Duyarlı css içerik kaydırıcısı. CSS3'te duyarlı kaydırıcı

Bu eğitimde, resimlerin sağdan sola kaydığı bir atlıkarınca ile süslenmiş bir başlığı olan basit bir duyarlı sayfa oluşturacağız. Çözümümüz JavaScript kullanmaz, slayt gösterisi çoğu modern tarayıcıda desteklenen CSS3 animasyonlarına dayanır: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ ve IE10.

Adım 1 - Hazırlık

4 büyük resme ihtiyacımız olacak (örneğimizde boyut 1200px x 390px'dir). Yatay kaydırıcı için Photoshop'ta 4800px x 390px bir görüntü hazırlayacağız, tüm görüntülerimizi yatay olarak birbiri ardına yerleştirip sonucu web dostu bir formatta kaydedeceğiz (“ kaydırıcı-yatay.jpg”).

2. Adım - HTML

Aslında başlığımız için background-position özelliğini canlandıracağız. Başlığın kendisi çok basit bir işaretlemeye sahiptir:

L "ile de Batz

Tam sayfa kodu şöyle görünür:

L "ile de Batz

Adım 3. Mobil cihazlar için CSS

Mobil cihazlar için stiller tanımlamaya başlayacağız. Tasarım tabanını ayarlayalım ve ardından büyük ekranlar için şablon uzantıları ekleyelim. Ders metninde sadece temel özellikler verilmiştir, kodun tamamı kaynakta görüntülenebilir:

Gövde (genişlik: %90; minimum genişlik: 300 piksel; maksimum genişlik: 1200 piksel; kenar boşluğu: 0 otomatik; üst dolgu: 1em; renk: # 504331) üstbilgi (metin hizalama: merkez; konum: göreli;) h1 ( yazı tipi boyutu: 2.75em; arka plan: beyaz; görüntü: satır içi blok; dolgu: 0 10 piksel; kenar boşluğu: .25em;) h1: sonra (içerik: ""; yükseklik: 2 piksel; görüntü: blok; konum: mutlak ; sol: 0; sağ: 0; üst: .5em; z-endeksi: -1; kenarlık-üst: 1 piksel katı # 504331; kenarlık-alt: 1 piksel katı # 504331;) .links (arka plan: url (../ resimler / map.png) alt orta tekrar yok; dolgu-alt: 177 piksel;)

Adım 4. Büyük ekranlar için stiller

Büyük ekran bölümlerinde .ana ve .ekran farklı gösterilmelidir. Bölüm .bağlantı 300 piksel genişliğinde olacak ve sağ kenar çubuğu olarak konumlandırılacak ve bölüm .ana solda kalacak. Ayrıca bölümleri ayırmak için çift çizgi ekleyeceğiz. 1024 pikselden büyük ekran genişliğini belirlemek için @media sorgusunu kullanacağız:

@media yalnızca ekran ve (min-genişlik: 1024 piksel) (.content (konum: göreli;) .main (sağ kenar boşluğu: 320 piksel; dolgu: .5em 20 piksel .5em 0; / * çift satır ekle * / sağ kenarlık : 1 piksel katı # 504331; kutu gölgesi: 2 piksel 0 beyaz, 3 piksel 0 # 504331;) .links (konum: mutlak; sağ: 0; üst: 0; genişlik: 300 piksel; metin hizalama: sağa;))

Adım 5: duyarlı başlık resimleri

Öğreticimizin ana kısmı üzerinde çalışmaya başlayalım: başlıkta duyarlı bir CSS kaydırıcısı. İlk olarak, arka plan resmini responsive yapalım.

Başlık (arka plan: url (../ resimler / kaydırıcı-yatay.jpg) 0 alt tekrar-x; arka plan boyutu: %400; dolgu-alt: %32,5;)

Yüzde olarak ifade edilen iki değerin kullanılması (mülk için %400) arka plan boyutu ve alt dolgu için %32,5) başlık arka planı, ekran boyutundan bağımsız olarak doğru şekilde görüntülenecektir.

Neden %400? 4 slaytımız var, bu yüzden başlıkta arka plan görüntüsünün 1/4'ünü gösterecek. Yani arka plan boyutu başlıktan 4 kat daha geniş olmalıdır.

Neden %32,5? Arka planımızı başlığın altına konumlandırıyoruz. Arka plan görüntüsünün yüksekliği 390 pikseldir, bireysel slaytın genişliği 1200 pikseldir, 390/1200 = 0,325, yani yükseklik genişliğin %32,5'idir.

Adım 6. Animasyon

Mülkü canlandıracağız arka plan konumu... İkinci resim özelliğini görüntülemek için arka plan konumuönemli olmalı %33.33333 alt, üçüncü - %66.66667 alt ve dördüncüsü %100 alt... İlk resim bir özellik değeriyle görüntülenir arka plan konumu eşit 0 alt veya 133.333333% alt(tekrarları şu şekilde ayarladık: tekrar-x).

Her görüntü "zafer" zamanının %25'ine sahiptir. İlki %0 ile %25 arasında, ikincisi %25 ile %50 arasında, üçüncüsü %50 ile %75 arasında ve sonuncusu %75 ile %100 arasında görüntülenir. Geçişleri, çıktı süresinin %25'i geçmeden görüntü biraz daha erken kaymaya başlayacak şekilde (%5 değerini kullanarak) ayarladık. böyle görünüyor @ana kareler:

@keyframes h_slide (%0 (arka plan konumu: %0 alt;) %20 (arka plan konumu: %0 alt;) %25 (arka plan konumu: %33.33333 alt;) %45 (arka plan konumu: %33.33333 alt ;) %50 (arka plan konumu: %66.66667 alt;) %70 (arka plan konumu: %66.66667 alt;) %75 (arka plan konumu: %100 alt;) %95 (arka plan konumu: %100 alt;) %100 (arka plan konumu: %133,33 alt;))

Tarayıcı öneklerini eklemeniz gerektiğini unutmayın: @ -webkit-keyframes (Chrome, Safari, iOS Safari, Android için) ve @ -moz-keyframes (Firefox 15 için).

Tam başlık kodu aşağıdadır. "h_slide" animasyonumuz her 24 saniyede bir (her slayt için 6 saniye) sonsuz bir döngüde tekrarlanır. Zaman fonksiyonu önemlidir rahatlama böylece her slayt geçişin sonunda yavaşlar.

Başlık (metin hizalama: merkez; konum: göreceli; arka plan: url (../ resimler / kaydırıcı-yatay.jpg) 0 alt tekrar-x; arka plan boyutu: %400; alt dolgu: %32,5; -webkit- animasyon: h_slide 24s hareket hızı sonsuz; -moz-animasyon: h_slide 24s hareket hızı sonsuz; animasyon: h_slide 24s hareket hızı sonsuz;)

Şu anda, bir kaydırıcı - bir atlıkarınca - bir işletme, bir web sitesi - bir portföy veya başka herhangi bir kaynak için bir web sitesinde sahip olmanız gereken işlevsellik. Tam ekran görüntü kaydırıcılarının yanı sıra, yatay dönen kaydırıcılar herhangi bir web tasarımına iyi uyum sağlar.

Bazen kaydırıcı site sayfasının üçte birini kaplamalıdır. Burada atlıkarınca kaydırıcısı, geçiş efektleri ve duyarlı düzenlerle birlikte kullanılır. E-ticaret siteleri, tek tek gönderilerde veya sayfalarda birden fazla fotoğrafı sergilemek için bir dönen kaydırıcı kullanır. Kaydırıcı kodu, ihtiyaçlarınıza göre serbestçe kullanılabilir ve değiştirilebilir.

kullanma JQuery birlikte HTML5 ve CSS3, sayfalarınızı benzersiz efektler sağlayarak daha ilgi çekici hale getirebilir ve ziyaretçilerin dikkatini sitenin belirli bir alanına çekebilirsiniz.

Slick - modern kaydırıcı eklentisi - carousel

Kaygan Geliştiricilerinin, çözümlerinin tüm kaydırıcı gereksinimlerinizi karşılayacağını iddia ettiği ücretsiz bir jquery eklentisidir. Uyarlanabilir kaydırıcı - atlıkarınca çalışabilir " fayans"Mobil cihazlar için ve" sürükle ve bırak"Masaüstü sürümü için.

Geçiş efektini içerir " çürümek", İlginç bir fırsat" merkez modu», Otomatik kaydırma ile görüntülerin tembel yüklenmesi. Güncellenen işlevsellik, slayt eklemeyi ve bir slayt filtresini içerir. Eklentiyi gereksinimlerinize göre özelleştirebilmeniz için her şey.

Owl Carousel 2.0 - jQuery - dokunma dostu eklenti

Bu eklenti, cephaneliğinde hem yeni başlayanlar hem de deneyimli geliştiriciler için uygun olan çok çeşitli işlevlere sahiptir. Bu, atlıkarınca kaydırıcısının güncellenmiş bir sürümüdür. Selefi tam olarak aynı adlandırıldı.

Kaydırıcı, genel işlevselliği geliştirmek için bazı yerleşik eklentiler içerir. Animasyon, video oynatma, kaydırıcı otomatik oynatma, tembel yükleme, otomatik yükseklik ayarı ana özellikleridir.

Destek yetenekleri sürükle ve bırak eklentinin mobil cihazlarda daha rahat kullanımı için dahil edilmiştir.
Eklenti, mobil cihazların küçük ekranlarında bile büyük görüntüleri görüntülemek için mükemmeldir.

Sayfaya bir kaydırıcı yerleştirmenize izin veren oldukça küçük, ancak işlevsellik açısından zengin jquery eklentisi - küçük bir çekirdeğe sahip ve çok fazla site kaynağı tüketmeyen bir atlıkarınca. Eklenti, dikey ve yatay kaydırıcıları, animasyonları görüntülemek ve galeriden görüntü kümeleri oluşturmak için kullanılabilir.

AnoSlide - Ultra kompakt duyarlı jQuery kaydırıcısı

Aşırı yoğun jQuery kaydırıcısı- işlevselliği normal bir kaydırıcıdan çok daha fazla olan atlıkarınca. Tek görüntü önizlemesi, çoklu görüntü karusel ekranı ve başlık tabanlı kaydırıcı içerir.

Baykuş Atlıkarınca - Jquery Kaydırıcısı - Atlıkarınca

- dokunmatik ekranlar ve teknoloji desteği ile kaydırıcı sürükle ve bırak kolayca entegre HTML- kod. Eklenti, özel olarak hazırlanmış herhangi bir işaretleme olmadan güzel atlıkarıncalar oluşturmanıza izin veren en iyi kaydırıcılardan biridir.

3D galeri - atlıkarınca

kullanır 3 boyutlu- dayalı geçişler CSS- stiller ve biraz Javascript kod.

Harika 3D atlıkarınca. Görünüşe göre bu hala bir beta sürümü, çünkü şu anda onunla ilgili birkaç sorun keşfettim. Kendi kaydırıcılarınızı test etmek ve oluşturmakla ilgileniyorsanız, bu atlıkarınca çok yardımcı olacaktır.

Önyükleme kullanarak atlıkarınca

Duyarlı Kaydırıcı - Yeni web siteniz için doğru teknolojiyi kullanan bir atlıkarınca.

Bootstrap - Hareketli Kutu carousel kaydırıcı çerçevesine dayalı

En çok portföy ve iş sitelerinde talep edilir. Bu tür atlıkarınca kaydırıcısı genellikle her tür sitede bulunur.

Bu küçük kaydırıcı, herhangi bir ekran çözünürlüğüne sahip cihazlarda çalışmaya hazır. Kaydırıcı hem dairesel hem de atlıkarınca modlarında çalışabilir. küçük daire benzer türdeki diğer kaydırıcılara alternatif olarak sunulur. İşletim sistemleri için yerleşik destek var iOS ve Android.

Kaydırıcı dairesel modda oldukça ilginç görünüyor. Yöntem desteği mükemmel bir şekilde uygulandı sürükle ve bırak ve otomatik slayt kaydırma sistemi.

Güçlü, duyarlı, dönen kaydırıcı, modern bir web sitesi için mükemmeldir. Herhangi bir cihazda düzgün çalışır. Yatay ve dikey modları vardır. Boyutu sadece 1 KB'a küçültülmüş. Ultra kompakt eklenti ayrıca mükemmel yumuşak geçişlere sahiptir.

Vay - kaydırıcı - atlıkarınca

Web siteniz için orijinal bir kaydırıcı oluşturmanıza yardımcı olabilecek 50'den fazla efekt içerir.

Kaydırıcının nasıl uyum sağladığını görmek için tarayıcı pencerenizi yeniden boyutlandırın. Bxslider, 50'den fazla özelleştirme seçeneğiyle birlikte gelir ve özelliklerini çeşitli geçiş efektleriyle gösterir.

jCarousel - jQuery resimlerinizin görüntülenmesini organize etmenize yardımcı olacak eklenti. Örnekte gösterilen çerçeveden kolayca özel carousel görüntüleri oluşturabilirsiniz. Kaydırıcı duyarlıdır ve mobil platformlarda çalışmak üzere optimize edilmiştir.

Scrollbox - jQuery eklentisi

kaydırma kutusu kaydırıcı - atlıkarınca veya metin kaydırma satırı oluşturmak için kompakt eklenti. Anahtar özellikler, fareyle üzerine gelindiğinde duraklama ile dikey ve yatay kaydırmayı içerir.

Basit kaydırıcı - atlıkarınca. Hızlı bir eklenti istiyorsanız, bu %100 iyidir. Yalnızca kaydırıcının çalışması için gereken temel işlevlerle birlikte gelir.

Flexisel: Duyarlı JQuery Slider Eklentisi - Carousel

İçerik oluşturucular, eski okul eklentisinden ilham aldı ve bir kopyasını mobil ve tablet cihazlarda kaydırıcının doğru çalışmasına odaklandı.

Mobil cihazlarda çalışırken duyarlı bir düzen, tarayıcı penceresinin boyutuna yönelik bir düzenden farklıdır. hem düşük hem de yüksek çözünürlüklü ekranlarda çalışmak için mükemmel şekilde uyarlanmıştır.

Elastislide - duyarlı kaydırıcı - atlıkarınca

Cihazın ekran boyutuna mükemmel uyum sağlar. Belirli bir çözünürlükte görüntülenecek minimum görüntü sayısını ayarlayabilirsiniz. Dikey kaydırma efektiyle birlikte sabit bir sarmalayıcı kullanarak bir resim galerisi atlıkarınca kaydırıcısı olarak iyi çalışır.

Serbestçe yeniden dağıtılabilir kaydırıcı Woothemes... En iyi duyarlı kaydırıcılardan biri olarak kabul edilir. Eklenti birkaç şablon içerir ve hem acemi kullanıcılar hem de uzmanlar için faydalı olacaktır.

inanılmaz atlıkarınca

inanılmaz atlıkarınca- duyarlı görüntü kaydırıcı açık jQuery... gibi birçok site yönetim sistemini destekler. WordPress, Drupal ve Joomla... Ayrıca destekler Android ve iOS ve herhangi bir uyumluluk sorunu olmayan masaüstü işletim sistemleri. Yerleşik şaşırtıcı atlıkarınca şablonları, kaydırıcıyı dikey, yatay ve dairesel modlarda kullanmanıza olanak tanır.

4 Kasım 2019 giriş güncellendi

Yuri Nemets

Saf CSS kaydırıcıları + bonus kaydırıcısı

CSS kaydırıcılarının Javascript kaydırıcılarına göre bazı avantajları vardır. Böyle bir avantaj indirme hızıdır. Yalnızca kaydırıcılar için resimler büyük boyutlarda kullanılmaz (farklı ekranlar için optimizasyon yoksa), aynı zamanda komut dosyalarının yüklenmesi için de biraz zaman harcanır. Ancak makalede yalnızca saf CSS kaydırıcıları göreceksiniz.

Kaydırıcılar hakkında sitede bulduğum şey:

1.Css3 görüntü kaydırıcısı

Slaytlar arasında gezinmek için radyo düğmelerini kullanan bir CSS kaydırıcısı. Bu radyo düğmeleri, kaydırıcıların altında bulunur. Ayrıca radyo düğmelerine ek olarak, sol ve sağdaki oklar kullanılarak navigasyon gerçekleştirilir. Şu anda hangi görüntünün görüntülendiğini takip etmek için: kontrol edilen sözde sınıflar kullanılır.

2.Css3 küçük resim kaydırıcısı

Önceki CSS kaydırıcısının aksine, burada radyo düğmeleri yerine, altta tüm resimlerin küçük resimleri bulunur ve bu, resim galerisi oluştururken de kullanışlıdır. Görüntüler tuhaf bir etkiyle değişiyor: Büyütüldüklerinde düzgün bir şekilde kayboluyorlar.

3. CSS galerisi

Ancak bu CSS kaydırıcı, satış sayfaları için mükemmeldir. Kural olarak, açılış sayfaları geliştirirken (sayfa satarken), birçok web geliştiricisi en başta bir kaydırıcı yerleştirir, böylece ilk ekranda (kaydırmadan) ziyaretçi bu sayfada kendisi için olan tüm faydaları hemen görebilir. Her şeyden önce, bu kaydırıcı duyarlı ve bu da harika.

4. Bağlantısız CSS kaydırıcısı

Sadece bu kaydırıcının bağlantıları kullanmadığını belirtmek isterim! Varsayılan olarak, ana görüntünün (slayt) yanı sıra 2 slayt daha görünür. Ana olanın arkasında bulunurlar. Slaytların değiştirilmesi güzel bir modda gerçekleşir: önce iki slayt birbirinden ayrılır ve bu slayt merkezde olur ve daha sonra asıl olan olur. Slayt daha sonra büyütülür ve diğerlerinin önüne yerleştirilir.

5. CSS3'te duyarlı kaydırıcı

Radyo düğmesi kontrollerine sahip başka bir duyarlı kaydırıcı. Bu kaydırıcının farklı cihazlarda nasıl görüneceğini görmek için - tarayıcı penceresini kendiniz değiştirebilir veya kaydırıcının bulunduğu sayfada, kaydırıcının bilgisayarınızda görüneceğini göreceğiniz üzerine tıklayarak farklı cihazlar için özel simgeler vardır, tablet veya akıllı telefon.

*** BONUS KAYDIRICI ***

Yukarıda sunulan tüm kaydırıcılara ek olarak, sizi bir tane daha memnun etmek istiyorum. Bu kaydırıcı, bir resim galerisi oluşturmak için mükemmeldir. Ne yaptığını kelimeler açıklayamaz, bu yüzden videodaki her şeyi izlesen iyi olur:

Çıktı

Kaydırıcıların yardımıyla, resim galerilerini güzel bir şekilde tasarlayabilir, onları daha kompakt bir şekilde yerleştirebilir, satış sayfasının ilk ekranına (sayfanın kaydırmadan görünen kısmı) bir kaydırıcı ekleyerek ziyaretçiye ana avantajları hemen gösterebilirsiniz. o alacak. Kaydırıcıları nerede ve nasıl kullanabileceğinizin birçok yolunu hala bulabilirsiniz, ancak bir şey açıktır - doğru kullanıldığında faydalıdırlar.

Makalede tartışılan öğeler.

Bu eğitimde, harika bir CSS3 kaydırıcısı yapacağız. Slaytlar arasında bir solma efekti kullanacaktır. Ek olarak, her görüntü için bir açıklama kullanabilirsiniz. Bilgileri düzenlemek için sırasız bir liste kullanılacaktır. Slaytlar, CSS3 animasyonları kullanılarak otomatik olarak değişecektir.

HTML işaretlemesi

HTML işaretlemesi çok basittir. Örnekte dört slayt var. Her biri bir görüntü (arka plan olarak) ve bir div öğesindeki açıklama metninden oluşur. Ek slaytlar eklemek çok kolaydır.

CSS

Kaydırıcı, anim_slides ve anim_titles CSS3 animasyonlarını kullanır. Birincisi bireysel slaytlar için, ikincisi ise açıklama metni için kullanılır. Açıklama için konum ve opaklık da değiştirilir.

/ * Kaydırıcı * / .slides (yükseklik: 300 piksel; kenar boşluğu: 50 piksel otomatik; taşma: gizli; konum: göreli; genişlik: 900 piksel;) .slides ul (liste stili: yok; konum: göreli;) / * Animasyon çerçeveleri # anim_slides * / @ -webkit-keyframes anim_slides (%0 (opaklık: 0;) %6 (opaklık: 1;) %24 (opaklık: 1;) %30 (opaklık: 0;) %100 (opaklık: 0;) ) @ -moz-keyframes anim_slides (%0 (opaklık: 0;) %6 (opaklık: 1;) %24 (opaklık: 1;) %30 (opaklık: 0;) %100 (opaklık: 0;)). slaytlar ul li (opaklık: 0; konum: mutlak; üst: 0; / * css3 animasyonu * / -webkit-animasyon-adı: anim_slides; -webkit-animasyon-süresi: 24.0s; -webkit-animasyon-zamanlama-fonksiyonu: lineer; -webkit-animation-yineleme-sayısı: sonsuz; -webkit-animation-yön: normal; -webkit-animation-delay: 0; -webkit-animation-play-durumu: çalışıyor; -webkit-animation-doldurma modu : ileri; -moz-animasyon-adı: anim_slides; -moz-animasyon-süresi: 24.0s; -moz-animasyon-zamanlama-fonksiyonu: doğrusal; -moz-animation-ite rasyon-sayısı: sonsuz; -moz-animasyon-yön: normal; -moz-animasyon-gecikmesi: 0; -moz-animasyon-oynatma durumu: koşuyor; -moz-animasyon-doldurma modu: ileri; ) / * Css3 gecikmeleri * / .slides ul li: nth-child (2), .slides ul li: nth-child (2) div (-webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s;) .slides ul li: nth-child (3), .slides ul li: nth-child (3) div (-webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s;). slaytlar ul li: nth-child (4), .slides ul li: nth-child (4) div (-webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s;) .slides ul li img (ekran: blok;) / * Animasyon kareleri #anim_titles * / @ -webkit-keyframes anim_titles (%0 (sol: %100; opaklık: 0;) %5 (sol: %10; opaklık: 1;) %20 ( sol: %10; opaklık: 1;) %25 (sol: %100; opaklık: 0;) %100 (sol: %100; opaklık: 0;)) @ -moz-keyframes anim_titles (%0 (sol: 100) %; opaklık: 0;) %5 (sol: %10; opaklık: 1;) %20 (sol: %10; opaklık: 1;) %25 (sol: %100; opaklık: 0;) %100 (sol : %100; opaklık: 0;)) .slides ul li div (arka plan rengi: # 000000; kenarlık yarıçapı: 10px 10px 10px 10px; kutu gölgesi: 0 0 5px #FFFFFF iç metin; renk: #FFF FFF; yazı tipi boyutu: 26 piksel; sol: %10; kenar boşluğu: 0 otomatik; dolgu: 20 piksel; konum: mutlak; üst: %50; genişlik: 200 piksel; / * Animasyon css3 * / -webkit-animasyon-adı: anim_titles; -webkit-animasyon-süresi: 24.0s; -webkit-animasyon-zamanlama-fonksiyonu: doğrusal; -webkit-animation-yineleme-sayısı: sonsuz; -webkit-animasyon-yön: normal; -webkit-animasyon-gecikmesi: 0; -webkit-animasyon-oynatma durumu: koşuyor; -webkit-animasyon-doldurma modu: ileri; -moz-animasyon-adı: anim_titles; -moz-animasyon-süresi: 24. 0s; -moz-animasyon-zamanlama-fonksiyonu: doğrusal; -moz-animation-yineleme-sayısı: sonsuz; -moz-animasyon-yön: normal; -moz-animasyon-gecikmesi: 0; -moz-animasyon-oynatma durumu: koşuyor; -moz-animasyon-doldurma modu: ileri; )

ücretsiz koleksiyon HTML ve CSS kaydırıcısı kod örnekleri: kart, karşılaştırma, tam ekran, duyarlı, basit, vesaire. Haziran 2018 koleksiyonunun güncellemesi. 7 yeni ürün.

İçindekiler

İlgili Makaleler

kod hakkında

HTML / CSS / JS'de bir dizi alıştırma ekranı. PNG simgeleri, CSS3 geçişleri ve flexbox katmanlamayla ilgili kişisel bir deney.

HTML, CSS ve JavaScript bilgi kartı kaydırıcısı.
Andy Tran tarafından yapılmıştır.
23 Kasım 2015

Masaüstü ve mobil tarayıcılarda çalışan fotoğraf kaydırıcısı.
Taron tarafından yapılmıştır
29 Eylül 2014

Karşılaştırma (Önce / Sonra) Kaydırıcıları

kod hakkında

CSS ve jQuery ile yapılmış, tamamen duyarlı ve dokunmaya hazır, basit ve temiz bir görüntü karşılaştırma kaydırıcısı.

kod hakkında

Yalnızca html ve css içeren bir öncesi ve sonrası kaydırıcısı.

kod hakkında

Görüntü kaydırıcıdan önce / sonra iki katmanımı kullanarak yeni bir fikirle oynamak. Minimum düzeyde tutmak. Vanilya tutmak. Faydalıysa beğen :)

Vanilla JS, minimal, görünüşü güzel.
Huw tarafından yapılmıştır
3 Temmuz 2017

kod hakkında

JavaScript içeren bir "bölünmüş ekran" kaydırıcı öğesi.

Tamamı bir SVG içinde olan önce ve sonra kaydırıcısı için küçük bir deney. Maskeleme oldukça basit hale getirir. Hepsi SVG olduğundan, resimler ve başlıklar birlikte güzel bir şekilde ölçeklenir. Kaydırıcı kontrolü için GreenSock'un Draggable ve ThrowProps eklentileri kullanıldı.
Craig Roblewsky tarafından yapılmıştır.
17 Nisan 2017

Kaydırıcı için özelleştirilmiş aralık girişi kullanır.
Dudley Storey tarafından yapılmıştır
14 Ekim 2016

HTML, CSS ve JavaScript ile duyarlı görüntü karşılaştırma kaydırıcısı.
Ege Görgülü tarafından yapılmıştır.
3 Ağustos 2016

HTML5, CSS3 ve JavaScript videosu öncesi ve sonrası karşılaştırma kaydırıcısı.
Dudley Storey tarafından yapılmıştır
24 Nisan 2016

2 görüntüyü hızlı bir şekilde karşılaştırmak için CSS3 ve jQuery tarafından desteklenen kullanışlı, sürüklenebilir bir kaydırıcı.
CodyHouse tarafından yapılmıştır
15 Eylül 2014

Tam Ekran Kaydırıcılar

kod hakkında

Radyo girişlerine dayalı basit kaydırıcı. %100 saf HTML + CSS. Yön tuşlarıyla da çalışır.

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Tam ekran kaydırıcı için güzel geçiş efekti.

kod hakkında

Swiper.js ile yatay paralaks sürgülü kaydırıcı.

kod hakkında

Fare hareketinde duyarlı, pürüzsüz 3B perspektif kaydırıcı.

HTML, CSS ve JavaScript ile tam ekran kahraman görüntü kaydırıcısı (kaydırma panelleri teması).
Tobias Bogliolo tarafından yapılmıştır.
25 Haziran 2017

Animasyonu geliştirmek için Hız ve Hız efektlerini (UI Paketi) kullanan bir kaydırıcı etkileşimi. Animasyon, ok tuşları, gezinme tıklaması veya kaydırma jakı ile tetiklenir. Bu sürüm, etkileşimin bir parçası olarak sınırları içerir.
stephen scaff tarafından yapılmıştır
11 Mayıs 2017

Görüntüleri göstermek için minimal tarzda basit kaydırıcı. Her slaytta görüntünün bir kısmı çıkar.
nathan taylor tarafından yapılmıştır
22 Ocak 2017

Şey oldukça kolay özelleştirilebilir. Yazı tipini, yazı tipi boyutunu, yazı tipi rengini, animasyon hızını güvenle değiştirebilirsiniz. JS'deki dizideki yeni bir dizenin ilk harfi yeni bir slaytta görünecektir. Yeni bir slayt oluşturmak (veya silmek) kolaydır: 1. JS'deki diziye yeni şehir ekleyin. 2. Slayt sayısı değişkenini değiştirin ve CSS'de scss listesine yeni bir resim koyun.
Ruslan Pivovarov tarafından yapılmıştır.
8 Ekim 2016

1. Görüntü maskeleme dikdörtgen kenarlığı için klip yolu (yalnızca webkit).
2. Bu maske için karışım modu.
3. Akıllı renk sistemi, sadece renk adınızı ve değerinizi sass haritasına koyun ve ardından bu renk adıyla uygun sınıfı öğelere ekleyin ve her şey işe yarayacak!
4. Harika krediler yan menüsü (demonun ortasındaki küçük düğmeyi tıklayın).
5. Vanilya js ile sadece< 200 lines of code (basically it’s just adds/removes classes).

Nikolay Talanov tarafından yapılmıştır.
7 Ekim 2016

Bu, saf JS ve CSS'ye (kütüphaneler olmadan) dayalı kaydırmalı eğik kaydırıcı.
Victor Belozyorov tarafından yapılmıştır.
3 Eylül 2016

Pokemon tasarımı ile bir kaydırıcı animasyon.
pham mikun tarafından yapılmıştır
18 Ağustos 2016

Karmaşık animasyon ve yarı renkli açılı metin içeren HTML, CSS ve JavaScritp kaydırıcısı.
Ruslan Pivovarov tarafından yapılmıştır.
13 Temmuz 2016

HTML, CSS ve JavaScript ile kaydırıcı paralaks efekti.
manuel madeira tarafından yapılmıştır
28 Haziran 2016

Dalgalanma efektli HTML, CSS ve JavaScript kaydırıcısı.
Pedro Castro'nun yaptığı
21 Mayıs 2016

HTML, CSS ve JavaScript ile kaydırıcıyı gösteren Clip-Path.
Nikolay Talanov tarafından yapılmıştır.
16 Mayıs 2016

Önceki / sonraki slaytların önizlemesini içeren GSAP + Slick kaydırıcı.
Karlo Videk tarafından yapılmıştır.
27 Nisan 2016

HTML, CSS ve JavaScript tam sayfa kaydırıcısı.
joseph martucci tarafından yapılmıştır.
28 Şubat 2016

HTML, CSS ve JavaScript ile tam kaydırıcı prototipi.
Gluber Sampaio tarafından yapılmıştır.
6 Ocak 2016

Greensocks TweenLite / Tweenmax ile canlandırılan tam ekran, bir tür duyarlı, slayt gösterisi.
Arden tarafından yapılmıştır
12 Aralık 2015

Arden tarafından yapılmıştır
5 Aralık 2015

HTML, CSS ve JavaScript ile Tam Ekran kaydırıcı (GSAP Zaman Çizelgesi) # 1.
Diaco M.Lotfullahi tarafından yapılmıştır.
23 Kasım 2015

Özel efektlerle HTML ve CSS kaydırıcısı.
Nikolay Talanov tarafından yapılmıştır.
12 Kasım 2015

HTML, CSS ve JavaScript ile paralakslı tam ekran sürükle-kaydırıcı.
Nikolay Talanov tarafından yapılmıştır.
12 Kasım 2015

Dönen kaydırıcı kavramının kanıtı. Klip yolu ve çok sayıda matematik kullanır.
tyler johnson tarafından yapılmıştır
16 Nisan 2015

TranslateX ve translate3d düzgünlüğünü kullanan basit bir tam ekran CSS ve jQuery kaydırıcısı!
Yusuf tarafından yapılmıştır
19 Ağustos 2014

Duyarlı Kaydırıcılar

kod hakkında

Görüntü Opaklığı Kaydırıcısı

HTML ve CSS'de görüntülerin opaklık kaydırıcısı.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Yığılmış Esnek Slayt Düzeni

Bu örnek, birbiri üzerine yığılmış slayt düzeninin nasıl oluşturulacağını gösterir (özellikle içeri / dışarı geçişler için kullanışlıdır). Bu, yüksekliklerini ayarlamadan ve mutlak konumundan kaçınmadan elde edilir; bu nedenle tamamen esnektirler ve normal sayfa akışında tutmaları kolaydır.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Duyarlı Kaydırıcı

HTML, CSS ve JavaScript'te animasyonlu duyarlı kaydırıcı.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: animate.css

kod hakkında

Maskeli Metinli Kaydırıcı

Yalnızca maskelenmiş metin içeren CSS kaydırıcısı.

Uyumlu tarayıcılar: Chrome, Edge (kısmi), Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Paralaks efektli görüntü ve içerik.

kod hakkında

CSS sadece slayt galerisi.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

kod hakkında

Saf HTML / CSS Kaydırıcısı

Dairesel SVG ilerleme çubuğuna sahip saf HTML / CSS kaydırıcısı.

Uyumlu tarayıcılar: Chrome, Edge (kısmi), Firefox (kısmi), Opera, Safari

Duyarlı: evet

Bağımlılıklar: font-awesome.css

kod hakkında

Yalnızca CSS kullanan ve görüntülerin en boy oranını koruyan küçük resimlerle tamamen duyarlı bir dikey kaydırıcı oluşturmaya yönelik bir deney.

kod hakkında

Vanilya JavaScript ile yapılmış basit bir Flexbox görüntü kaydırıcısı / atlıkarınca.

kod hakkında

Bu, bir slayt her değiştirildiğinde hareket bulanıklığı efektini simüle eden bir deneydir. SVG Gauss Bulanıklığı filtresinden ve bazı CSS ana kare animasyonlarından yararlanır. Efektin düzgün çalışması için herhangi bir Javascript gerektirmemesine rağmen, bu örnekte Javascript yalnızca kaydırıcı işlevi için kullanılmıştır.

kod hakkında

Cool, kaydırıcıyı JS ile canlandırır.

kod hakkında

Bu, SVG modellerinin yalnızca CSS'ye yönelik bir görüntü kaydırıcısı için maskeli benzeri görüntüler oluşturmamıza nasıl yardımcı olabileceğine ilişkin bir deneydir.

Bazı kaydırıcı geçişlerini keşfetme. Paralaks seçeneği etkinleştirilmiş kaydırıcı kaydırıcı. Çoğunlukla burada CSS filtreleriyle oynamak.
Mirko Zorić tarafından yapılmıştır.
12 Haziran 2017

Bazı ince ara animasyonlar içeren basit GSAP kaydırıcısı.
Goran Vrban'ın yaptığı
9 Haziran 2017

HTML, CSS ve JavaScript içeren kaydırıcı kullanıcı arayüzü.
Mergim Ujkani tarafından yapılmıştır.
6 Haziran 2017

Kaydırıcı GSAP sürümü 2.
em tarafından yapılmıştır
4 Mayıs 2017

Basit bir ekleme sınıfı anlaşması kullanan küçük bir geçiş kaydırıcısı. Zamanlamaları biraz yumuşatmalı ve mobil için en iyi yaklaşıma karar vermelisiniz (yalnızca yığınlayın, dokunma olayları ekleyin, görüntüleri tam görünüm alanı yapın, vb.) Kaydırma tekerleğini (kaydırma kaydırma), gezinme düğmelerini ve ok tuşlarını destekler. Ayrıca içerik sarmalayıcıyı artırabilir görüntülerin canlandırma olmayan durumlarında görünüm alanını doldurmasını sağlamak, ki bu da oldukça havalı.
stephen scaff tarafından yapılmıştır
3 Ocak 2017

Kaydırıcı animasyon efekti oluşturmak için kaldıraçlı CSS kenar görüntüsü ve klip yolu.
emily hayman tarafından yapılmıştır
31 Aralık 2016

Flexbox ile oluşturulmuş küçük kaydırıcı. Biraz duyarlıdır ve kaydırıcı alanının yanında sabit öğelere sahip olabilir.
Robert tarafından yapılmıştır
28 Kasım 2016

HTML, CSS tuval kaydırıcısı.
Nvagelis tarafından yapılmıştır
29 Ekim 2016

HTML, CSS ve JavaScript 3D pürüzsüz kaydırıcı.
Eduardo Allegrini tarafından yapılmıştır.
19 Ekim 2016

Sprinkles ile HTML ve CSS cupcake kaydırıcı!
Jamie Coulter tarafından yapılmıştır.
14 Ekim 2016

mario s maselli tarafından yapılmıştır
12 Ekim 2016

UI animasyonunu 2 numaralı HTML, CSS ve JavaScript ile keşfetme.
mario s maselli tarafından yapılmıştır
22 Eylül 2016

HTML, CSS ve JavaScript ile UI animasyonu # 3'ü keşfetme.
mario s maselli tarafından yapılmıştır
22 Eylül 2016

HTML, CSS ve JavaScript ile E-Ticaret Slider v2.0.
Pedro Castro'nun yaptığı
17 Eylül 2016

Kavisli arka plana sahip HTML, CSS ve JavaScript temiz kaydırıcı.
Ruslan Pivovarov tarafından yapılmıştır.
13 Eylül 2016

UI animasyonunu # 1 HTML, CSS ve JavaScript ile keşfetme.
mario s maselli tarafından yapılmıştır
8 Eylül 2016

CSS'nin gücünün keyfini çıkarın: Her orta görüntüde yukarı ve aşağı ve ışık kutulu sayfalandırılmış kaydırıcı.
Kseso tarafından yapılmıştır
15 Ağustos 2016

Çift pozlama, 2 farklı görüntüyü tek bir görüntüde birleştiren fotoğraf tekniğidir.
misaki nakano tarafından yapılmıştır.
3 Ağustos 2016

CSS3 özellik klibini kullanan kaydırıcı.
Pedro Castro'nun yaptığı
1 Mayıs 2016

Duyarlı CSS kaydırıcısı.
geekwen tarafından yapılmıştır
19 Nisan 2016

Bu, doğrudan çevrilemeyecek güzel anlamlara sahip sözcükleri gösteren basit bir kaydırma çubuğu deneyidir. Odak: zarif tipografi ve basit ama çekici geçişler.
joe harry tarafından yapılmıştır
5 Nisan 2016

Animasyon fikri, CSS klip yolunun değerini değiştirmek, böylece bir maskeleme efekti yapmaktır.
Bhakti Al Ekber tarafından yapılmıştır.
31 Mart 2016

HTML, CSS ve JavaScript ile nokta kaydırıcı.
Derek Nguyen tarafından yapılmıştır.
16 Mart 2016

HTML, CSS ve JavaScript ile prizma efekti kaydırıcısı.
kazanan tarafından yapılmıştır
12 Mart 2016

HTML, CSS ve JavaScript ile kayan arka plan galerisi.
Ron Gierlach tarafından yapılmıştır.
30 Kasım 2015

HTML, CSS ve JavaScript kaydırıcı çözümü.
Jürgen Genser tarafından yapılmıştır.
30 Eylül 2015

Sequence.js tarafından desteklenen bir ürün kaydırıcısı. Sequence.js - Benzersiz kaydırıcılar, sunumlar, afişler ve diğer adım tabanlı uygulamalar oluşturmak için duyarlı CSS animasyon çerçevesi.
Ian Lunn tarafından yapılmıştır.
15 Eylül 2015

Küçük daire özelleştirilmiş kaydırıcı.
Bram de Haan tarafından yapılmıştır.
11 Ağustos 2015

HTML, CSS ve JavaScript ile duyarlı GTA V kaydırıcısı.
eduard mayer tarafından yapılmıştır.
24 Ocak 2014

Kaydırıcı gibi ama bilinmeyen nedenlerle küp gibi dönüyor.
Eric Brewer'ın yaptığı
4 Aralık 2013

Hugo DarbyBrown tarafından yapılmıştır.
28 Ağustos 2013

Basit Kaydırıcılar

HTML, CSS ve vanilya JavaScript ile görüntü bindirme kaydırıcısı.
Yugam tarafından yapılmıştır
7 Haziran 2017

HTML ve CSS özellikli görüntü kaydırıcı.
Joshua Hibbert tarafından yapılmıştır.
16 Haziran 2016

Çok Eksenli Görüntü Kaydırıcısı

HTML, CSS ve JavaScript ile çok eksenli görüntü kaydırıcısı.
Burak Can'ın yaptığı
22 Temmuz 2013

Küp kaydırıcı, HTML5 / CSS3 3d dönüşümleri ile küçük bir deney.
İlya K tarafından yapılmıştır.
26 Haziran 2013