Resimleri, kartları ve çok daha fazlasını karşılaştırmak için 27 CSS ve HTML kaydırıcısı

Diğerlerinden farklı kılacak özel bir dokunuş sağlamak için web sitemize uygulanabilecek bir dizi CSS ve HTML kodu ile devam ediyoruz. + C kontrolü ve + v kontrolü sayesinde web'i hazır hale getirecek kodumuz var günler veya haftalar geçirdikten sonra geliştirme aşamasında yayınlanacak.

Şimdi, HTML ve CSS'de, genellikle çok fazla içeriği birkaç pikselin karesine entegre ettiğimiz alanı hazırlamamıza izin verecek 27 kaydırıcının zamanı. Bu kaydırıcılar karttan değişir, karşılaştırmalı, tam ekran, duyarlı ve en basit, ama aynı zamanda da çok zarif. Kimseyi kayıtsız bırakmayacak 27 kaydırıcı ile gidiyoruz, özellikle web sitenizden içerik okumak, bir ürün satın almak için geçen müşteri veya kullanıcı öncesi ve sonrası bir resmi karşılaştırmak için karşılaştırmalı bir kaydırıcı kullanıyoruz.

Kartlardaki ekranlar

HTML ve CSS'de çok sezgisel bir kaydırıcı web sitenize bir dizi kart götürün harika bir tarzda bir animasyonla birinden diğerine aktarılır. Bu HTML ve CSS koduna bu ince dokunuşu veren tam olarak animasyon ve arka plan gradyanıdır ve aynı zamanda biraz JavaScript için de öne çıkar. Zarif, bu kaliteli kaydırıcıyı tasvir eden kelimedir.

Bilgi kartı kaydırıcısı

Bu bilgi kartı kaydırıcısı ayrıca HTML, CSS ve JavaScript'te koddur. Daha ziyade bir dizi kart en büyük değeri sadeliği olsa da, animasyon için fazla ilgi görmüyor. Bu listeden dikkate alınacak başka bir kaydırıcı.

Karşılaştırmalı resim kaydırıcısı

Bu kaydırıcı Çok kullanışlı Ve kesinlikle bunu, önce ve sonra fotoğrafların yatay olarak kayan dikey bir çubukla karşılaştırıldığı çok sayıda web sitesinde görmüşsünüzdür. Karşılaştırmalar için harika bir yardımcıdır, bu yüzden onu bu kaydırıcı listesindeki temel unsurlardan biri yapıyoruz.

JavaScript içermeyen karşılaştırmalı kaydırıcı

Bu kaydırıcının mükemmel kalitesi, JavaScript olmadan gelir, bu nedenle başka bir karşılaştırma yapmak için yalnızca CSS ve HTML kodunu web sitenize uygulamanız gerekir. Görüntü karşılaştırmasını görmek için görüntünün altındaki kara kutuyu bir taraftan diğerine kaydırmak için kullanmanız gerekecektir. Öncekisi kadar sezgisel değil, ancak JavaScript olmadan çok kullanışlı.

Üç katmanlı karşılaştırmalı görüntü kaydırıcısı

Adı her şeyi söylüyor, bir görüntü kaydırıcısı bir seferde üçe kadar karşılaştırma yapmanızı sağlar. Verilen örnek, başı profilde görmek için, diğeri kasları göstermek için ve diğeri kemikleri görmek için kaydırıcıdır. İşlemi için HTML, CSS ve JavaScript kullanır.

Vanilla JS Görüntü Kaydırıcısı

Başka bir karşılaştırmalı resim kaydırıcısı büyük bir düğmeyle görüntüyü bir taraftan diğerine kaydırmak için. Minimalist, az JavaScript ve harika bir görsel yüzey ile. Görüntüleri karşılaştırmak için en çarpıcı olanlardan biri.

Ekranı çapraz olarak böl

bu karşılaştırmalı resim kaydırıcısı Envato Tuts tarafından oluşturulmuştur ve iki görüntüyü karşılaştırırken diğer türden duyumlara neden olmak için kaydırıcının çapraz olarak konumlandırılması ayrıcalığına sahiptir. Yüksek kaliteli bir karşılaştırmalı kaydırıcı olarak JavaScript, CSS ve HTML kullanır.

Tam ekran kaydırıcı

Tam ekran kaydırıcıların buluşacak kısmına geldik Kaydırıcı Geçişi bir geçişle karakterize edilir büyük efektli bir animasyon tarafından gerçekleştirildi. Resimleri tam ekranda göstermeyi planlıyorsanız ve çok dikkatli geçiyorsanız JavaScript, CSS ve HTML kodlarını kullanın.

Paralakslı yatay kaydırıcı

Için paralaks etkisinin hayranları bu kaydırıcı Swiper.js, HTML ve CSS ile. Her iki tarafta bulunan iki düğmeyle kaydırmanın yanı sıra, sağ tarafta tam karuselin tüm görüntüleri minyatür olarak var. Web sitemizi ziyaret edenleri kayıtsız bırakmayacak farklı ve kaliteli bir görsel kaydırıcı.

Düzgün 3B perspektif kaydırıcısı

Duyarlı bir kaydırıcı işaretçi hareketlerini takip edin fare. Ziyaretçide karışık duygulara yol açabilecek büyük bir perspektif etkisine neden olabilir. Doğru şekilde nasıl kullanacağınızı biliyorsanız, web sitemize bu orijinal ve ince dokunuşu verebilirsiniz. JavaScript, CSS ve HTML kodu eksik değil.

Hero tam ekran kaydırıcısı

HTML, CSS ve JavaScript'te tam ekran ana resim kaydırıcısı. Bir her animasyonda sıçrama efekti bu onu veriyor ve genel olarak listenin geri kalanı gibi kaliteli bir tam ekran kaydırıcıyla karşı karşıyayız.

Kenarlıklı VELO.JS kaydırıcısı

Basitçe harika bir geçiş animasyonuna sahip tam ekran kaydırıcı olarak öne çıkan özelliklerden biri. Web'de nasıl uygulanacağını düşünmeye başlamak için onu çalışırken görmenizi öneririz. Hız efektlerini kullanın Ok düğmelerini kullanan animasyonu geliştirmek için, gezinmede bir tıklama ve hatta kaydırma, Tek kelimeyle mükemmel.

Küçük resimlerle duyarlı CSS dikey kaydırıcı

Kaydırıcılara geçiyoruz Mobil için duyarlı CSS bunun gibi harika bir kalite. Sağda, basıldığında dikey düşüşte bir animasyon başlatacak bir dizi küçük resim olacak. Bu listenin en iyilerini kaydırmak için yalnızca CSS kullanan harika efekt.

Görüntü kaydırıcı flexbox

diğer JavaScript ile yapılmış duyarlı resim kaydırıcısı ve oldukça zarif olmanın basitten daha fazlası olduğunu. Kısa, sade ve minimalist, bundan başka bir şey yok. Bu Flexbox kaydırıcıları listesinde yeri vardır.

SVG filtreleriyle Hareket Bulanıklığı

Etkisini simüle eden bir deney her slaytta hareket bulanıklığı etkinleştirildi. SVG Gauss bulanıklaştırma filtresi ve bazı CSS animasyon tuşları kullanır. JavaScript'te kullanılan kod, yalnızca verilen örnek ve kaydırıcının işlevselliği içindir.

Hareketli kaydırıcı

Animasyonlu bir kaydırıcı JavaScript, HTML ve CSS ile uyumlu. Sağ tarafta, zarif ve özlü bir animasyonla ortaya çıkan görüntülerin üzerinden geçmemize izin veren oklarımız var. Her slaytta kendini öne çıkarmak için büyük bir etki elde edilir. Animasyonlarda çok güncel.

SVG desenlerine sahip görüntü kaydırıcısı

Deneyen deneylerden bir diğeri svg kalıpları taşımak CSS kaydırıcısı için maskelenmiş görüntüler oluşturmak için. Harika bir finiş ile çok çarpıcı bir bulanıklık efekti yaratır. Web sitemizin ziyaretçisinde iyi hisler uyandırmak için bu kaydırıcılardan bir diğeri.

Basit katman kaydırıcısı

Birden fazla olan bir kaydırıcı seçkin animasyon yeni bir görüntüyü kaydırmak için simgeye her tıkladığımızda bu dalga efektini sunar. HTML, CSS ve JavaScript ile yapıldığında başka bir görüntü kaydırıcısı haline gelir.

Saf CSS kaydırıcısı

Saf CSS olan en basit kaydırıcılardan bir diğeri. Avantajlarından biri sol altta bir dizi nokta önümüzden geçecek her bir görüntüye özel bir animasyon olmadan ulaşmak için düğmeler görevi görecek.

Yalnızca Cupcakes CSS kaydırıcısı

El listedeki en tatlı kaydırıcı ve sadece CSS ve HTML'de olduğunu. Sağ tarafta farklı cupcake çeşitlerinin bulunması tüm listenin en özellerinden biridir. Birini tıkladığınızda harika bir sıçrama efektiyle biten harika bir animasyonla birlikte bir kek belirir. Şüphesiz en iyilerden biri.

Kaydırıcı animasyon efekti

Animasyondaki en zarif kaydırıcılardan biri ve ilk değişimde bizi şaşırtmayı başarır. Animasyonun ortaya çıktığı ilk andan itibaren HTML, CSS ve JavaScript kodu bizi şaşırttı. Minimalist dokunuşta en iyilerden bir diğeri.

Kaydırıcı dilimi

Un basit bir ekleme sınıfı kullanan geçiş kaydırıcısı ve bu, bu listedeki favorilerden biri olması için çok düzgün animasyonlarla karakterize edilir. Kendinizi web'in mobil sürümünde farklılaştırmak istiyorsanız, bu olmazsa olmazlardan biridir. Görsel olarak büyük bir anlaşma.

Kaydırıcı Paralaks New York

Bunun en büyük avantajlarından biri CSS'de paralaks kaydırıcısı çok özelleştirilebilir olmasıdır. Bu, yazı tipini, boyutunu, rengini ve animasyonun hızını değiştirebileceğiniz anlamına gelir. Yeni bir JavaScript dizisi dizesindeki her şehrin ilk harfi yeni bir slaytta görünür. Bu yazının değerli kaydırıcılarından bir diğeri.