Web siteniz için 19 kaydırıcı veya atlı karınca CSS ve HTML

sahip olan ekranın tüm genişliğini kaplayan web siteleriSatışa sunulan tüm bir ürün örneğini veya yaz için sunduğumuz gezileri görüntülemek için kullanışlı olabilecek belirli öğelerin entegre edilebileceğini gördük. Atlı karıncalar veya kaydırıcılar, ürünlerimizi görsel olarak çok dikkat çekici bir şekilde göstermemizi sağlayan web öğelerinden biridir.

Jardines de Viveros CSS'de ücretsiz kaydırıcılar, kaydırıcılar veya atlı karıncalar aşağıda bulacağınız, müşteriye bütçemizi kabul etmeden önce göstereceğimiz işteki her türlü hedef için iyi bir repertuar oluşturuyorlar. Hem yatay hem de dikey formatta biraz JavaScript içeren HTML ve CSS'de bir kaydırıcı koleksiyonudur. Bunu hızlı bir şekilde uygulamak için koda erişebilmeniz için yapalım.

Yatay karuseller

Bu atlıkarınca, bir oldukça gösterişli animasyon Bu kaydırıcıda oluşturacağımız profillerin fotoğraflarını ve simgelerini uzaklaştırmak için bir perde çiziyormuşuz gibi. Web üzerinden sattığımız ürünlerden çok memnun olan kullanıcıların referansları için mükemmel bir atlıkarınca.

İlgili makale:

Web sitenize özel bir dokunuş katmak için 27 HTML ve CSS kaydırıcı

Duyarlı sonsuz atlıkarınca

Bu kaydırıcı bazen görülebilen reklamlar gibi yanlardaki futbol sahalarında ve yatay olarak kayan farklı reklamlar göstererek. Marka ortaklarını ve diğer logo türlerini göstermesi gereken açılış sayfaları için idealdir.

React Carousel

Bu kaydırma React.js ile dikkat çekiyor. sürekli bir animasyonda bir görüntüden diğerine geçerken görüntüleri orantılı bir boyutta görüntülemeye borçludur. Bu oldukça basit CSS hakkında söylenecek çok az şey var, ancak web'de nasıl düzgün bir şekilde konumlandırılacağını bilirsek harika bir etkiye sahiptir.

Pürüzsüz 3D Kaydırıcı

HTML, CSS ve JavaScript'ten oluşan bu 3D atlıkarınca akıcılığı ve harika görsel efektli sıçrayan bir animasyon. Her kartı tanımlayan bir dizi öğe, bir iş ve web sitenize dahil etmek için göz alıcı bir atlıkarınca.

İlgili makale:

46 Javascript Kaydırıcılar ve Kaydırıcılar

Otomatik sonsuz karusel

Kendi adının da belirttiği gibi otomatik olarak görüntülenen bir kaydırıcı kullanıcı etkileşime girmek zorunda kalmadan onunla hiçbir zaman. Bu çarpıcı karuseli oluşturan farklı görüntüler, sihirli bir şekilde solduğu geçiş nedeniyle ortaya çıkıyor.

Vurgulu Atlı Karınca

Üzerine gelme öğesi ile bu kaydırıcı soldan sağa hareket ederveya tam tersi, fare işaretçisini üzerinde bıraktığımızda. Bu görüntü kaydırıcısını oluşturabilen farklı fotoğraflar arasında geçiş yapmak için yumuşak bir geçiş.

Mobil Atlı Karınca

ayrıca Atlı Karınca Malzeme Tasarımı olarak adlandırılırve tüm kart türlerinde mevcut trendle, burada çok sayıda CSS / HTML biçiminde başka bir makale bulabilirsinizGoogle tarafından yayınlanan tasarım dilinden oluşarak diğerlerinden uzaklaşır. Kartlara uzun basarak farklı kartları hareket ettirebilirsiniz.

Instagram Besleme Atlı Karıncası

Bu vurgulama kaydırıcısının arkasındaki fikri çökertebilirsiniz büyütülebilen bir görüntü şeridi ile bunlardan birine tıklayarak. Belirli bir web sitesi türüne yönelik olmasına rağmen, harika efektli bir animasyon. Bir slick.js atlı karıncasına alınan Instagram gönderileri.

Basit senkronize atlıkarınca

Bir öncekiyle, özellikle görüntü şeridinde yapılacak çok şey var. kaydırıcıyla etkileşim çok farklı soldan sağa veya tersi yönde yanal bir hareketle hareket ettirerek. Yine slick.js işini yapıyor. Harika etkisiyle çarpıcı.

3D yatay karuseller

Yayınladığımız tüm listedeki en ilginç karusellerden biri. İçin öne çıkıyor yatay kaydırıcılarınız CSS ve HTML'de fevkalade iyi hareket ediyor. Dört varyasyonla üretilebilecek farklı efektleri bulmak için sadece fare işaretçisini kutuların üzerinde bırakmanız gerekir.

CSS Döngüsü

Basit ve harika görsel efekt sırayla değişen kart dizileri önünde. Efekt 3B'dir, bu nedenle, özellikle de yaratıcısı tarafında dehayı gösteren minimal geri tepme etkisi nedeniyle çok dikkat çeken kaydırıcılardan biridir.

Ambilight Bootstrap Döngüsü

Çok fazla göze çarpmayan harika efektli basit bir kaydırıcı. Biridir o basit kaydırıcılar genellikle aradığımız ve bu çok tantana olmadan bir olma hissini veriyor, ancak bu, işlevini mükemmel bir şekilde yerine getiriyor.

Carousel Takımı

Blogda bulunan editör ekibini tanıtmak istiyorsanız, bu kaydırıcı kendi rolünde mükemmel. Ne kadar basit olduğu için öncekine benzer iyi. Takımın her bir fotoğrafını barındırmak için elmas kullanımıyla dikkat çekiyor. Otomatik oynatmaya sahiptir.

Atlıkarınca Küpü

İçinde bir küp olduğu için öne çıkan kaydırıcı yüzlerin her biri resimlerden biridir veya bir web sitesinde görüntülemek istediğimiz fotoğraflar. Bunları kaydırmak ve hangi içeriğin sizi beklediğini bulmak için her birine tıklamanız yeterlidir.

Atlı karınca ok tuşları

Etkileşimin içinden geçtiği bir kaydırıcı ok tuşlarını kullanarak. Yıllar öncesine benzeyen, doğrudan başka bir etkileşim türüne giden çok fazla tantana olmadan basit. Belirli bir kullanım için.

Dikey karuseller

Harika bir görsel etkiye sahip bir kaydırıcı otomatik olarak sürekli bir dikey animasyonda oynatılır yuvarlatılmış köşeli kartlarıyla dikkat çekiyor. Çok güncel ve bu listenin tamamında tek başına öne çıkanlardan biri.

Saf CSS Döngüsü

Bu atlıkarınca, bir gidebileceğimiz yan menü seçeneklerinin her birine tıklayarak. Bilgi, söylenenden çok daha fazlası olmaksızın iyi bir geri tepme etkisiyle ortaya çıkıyor.

Dikey karusel tepkisi

Benzer dikeyliği için önceki, ancak bu kaydırıcı, sekmelerin her birinin görüntülerini göstermek için sayfanın tüm genişliğini alabilir. Geniş formatı ve slaytlar arasında geçiş yapmak için CSS geçişlerinin kullanılması ilginç.

3D Bölünmüş Atlı Karınca

3D olarak dönen kaydırıcı desenli harika görsel efekt çok çarpıcı bir animasyon. Seçeneklerin her biri sol taraftaki menüden her biri için noktalı olarak seçilebilir. Ne kadar yaratıcı olduğuna dair listedeki en iyilerden biri.