Daha İyi UX 2021 İçin En İyi 14 CSS Kaydırıcısı

Mobil uyumlu web sitesi ve uygulama geliştirmeyi hızlandırmak için en iyi CSSS kaydırıcılarının kapsamlı listesi.

Geliştiriciler, web tasarımları aracılığıyla zahmetsiz içerik deneyimi sunmanın yeni yollarını bulmak için bilgisayar cihazlarında gece gündüz zaman harcarlar. CSS, HTML ve JavaScript, web tasarımının evriminde önemli roller oynamaktadır. İçeriği sunmanın yeni yollarını icat etmeden (ancak her bir dilin gelişimini unutmadan), web'i hızlandırmak yerine yavaşlatan tekrarlayan kalıplara takılıp kalma riskini alıyoruz. CSS kesinlikle bir web stil dili olarak büyüdü. Günümüzde, daha çok işlevsel diller gibi davranan önişlemcileriniz var. Bu, tarayıcının doğal olarak anlayacağı kitaplıklar ve komut dosyaları oluşturmak için çeşitliliğe ve esnekliğe yer açar. Şu anda ortaya çıkan bir CSS trendi, herhangi bir içerik türü için pürüzsüz bir kaydırma efekti elde etmek için jQuery veya JavaScript'ten harici yardıma ihtiyaç duymayan CSS kaydırıcılarıdır; statik veya dinamik.

Bu, artık ön uç web geliştirmenin her alanında yaygın olarak kullanılan CSS dönüşümleri ve animasyon işlevleri nedeniyle mümkündür. Biraz pratikle (ve kesinlikle sabırla), önceden inceleme yapılmadan geleneksel bir jQuery uygulaması gibi görünecek sağlam bir kayma efekti elde etmek mümkündür. Şu anda elinize alabileceğiniz en iyi CSS kaydırıcılarını bir araya getirdik. Bu CSS kaydırıcıları, günlük olarak gördüğünüz kaydırıcıların tüm önemli yönlerini bir araya getirir. Yalnızca bunlar performansı artırmakla kalmaz ve geleneksel kaydırıcılardan üç kat daha hızlı olmakla kalmaz, aynı zamanda bize ön yüzün yöneldiği yönü de gösterir ve bu çok güzeldir.

En İyi Mobil Dostu CSS Kaydırıcıları

CSS3 Kayan İçerik

Bu kayan içerik kaydırıcısı aslında CSS3 ile ilgili bir dizi öğreticiden geliyor, bu nedenle kaydırıcının kodunu almanın yanı sıra CSS3 hakkında da biraz daha bilgi edinebilirsiniz. Ana sınıfları yönetmek için biraz jQuery kullanır, ancak kod o kadar küçüktür ki sayfalarınızda etkilerini hissetmezsiniz bile. Çok fazla stil eklenmeden basit bir CSS kaydırıcısının nasıl göründüğüne dair güzel bir küçük örnek, bu nedenle geliştiriciler için, onu göze daha çekici hale getirmek için kaplama becerilerini kullanma şansı.

Basit Döngü Saf CSS

Bu nedenle Simple Carousel Pure CSS adı, işleri basit ve göze çekici tutar. Web sitenizi veya blogunuzu şişirmeyecek ücretsiz bir atlıkarınca arıyorsanız, bu mükemmel bir şekilde çalışacak olan araçtır. Toplamda kaç slayt olduğunu gösteren alt gezinmenin yanı sıra ileri geri oklara sahiptir. Pürüzsüz geçişlerle, herkes ilgi çekici içeriğinize göz atarken hoş bir deneyim yaşayacak. Söylemeye gerek yok, eğer herhangi bir kişiselleştirme ince ayarı yapmak istiyorsanız, siz de yapabilirsiniz ya da sadece varsayılan ayarlara gidip bir gün diyebilirsiniz. Seçenekler parmaklarınızın ucunda.

Duyarlı Slayt Gösterisi

Duyarlı bir yapıya sahip başka bir güzel CSS kaydırıcısı. Bu gün ve çağda, web sitenizin tüm öğelerinin ve bileşenlerinin tamamen esnek ve mobil kullanıma hazır olması önemlidir. Aksi takdirde, arama motorları tarafından cezalandırılabilir ve bu da kötü sıralamaya neden olur. Neyse ki, bu duyarlı slayt gösterisi, en azından sanat eserlerinizi akıcı bir kaydırıcıyla sunmaya özen gösterecek. Hatta canlı önizlemede esnekliği test edip deneyebilir ve ilk elden ne kadar sorunsuz çalıştığını görebilirsiniz. İlk bakışta oldukça basit ve basit, ancak bu işi yapmak ve kullanıcının süslü şeylerle dikkatini dağıtmamak için fazlasıyla yeterli.

Açıklamalı Doğrusal Döngü

Hemen kullanabileceğiniz çarpıcı, ücretsiz açıklamalı doğrusal bir atlıkarınca. Dinamik DOM durumunu taklit etmeyi amaçlayan CSS sözde sınıflarını, öznitelik değerlerini ve kardeş seçicilerini kullanır. Fareyle üzerine gelindiğinde, atlıkarınca resim yazısı ve slaytların sayısını gösterir ve varsayılan olarak yalnızca tıklamayla çalışır. Minimalist bir görünüme sahip bir web sitesi işletiyorsanız, bu araç sorunsuz bir şekilde entegre olacaktır. Olduğu gibi kullanarak, bunun bir kaydırıcı/atlıkarınca olduğuna dair bir not koyabilirsiniz, aksi takdirde bazıları bunun yalnızca bir görüntü olduğunu düşünebilir ve içeriğin görünmesi için imleçleriyle üzerinden geçmeyebilir.

Görüntü Çerçevesi CSS Kaydırıcısı

Web sitenize kesinlikle renk katacak biraz farklı bir şey arıyorsanız, bu sonraki CSS kaydırıcısı işinizi görecektir. Bu, içinde çalışan bir slayt gösterisine sahip bir görüntü çerçevesine sahip olduğu için sanatçılara, hatta fotoğrafçılara ideal olarak uyacaktır. Diğer slaytları kontrol etme işlevi, fareyle üzerine gelindiğinde görünür ve yalnızca düğmelere basılarak çalışır. Elbette yaratıcı dokunuşunuzu da tanıtabilir ve Image Frame CSS Slider'ın kişiselleştirilmiş bir sürümünü oluşturabilirsiniz. Örneğin, arka plan rengini tamamen şekillendirebilir ve diğer bölümleri değiştirebilirsiniz, böylece sonuç, stilinizi bir tişörte dönüştürür.

Referans Kaydırıcısı

İster bir ajans, ister serbest çalışan bir işletme, bir çevrimiçi mağaza, bir uygulama açılış sayfası, her ne olursa olsun, bir referans kaydırıcısı her zaman kullanışlıdır. Ne de olsa, dürüst referanslar/incelemelerle müşteri güveni oluşturmaya yardımcı olan işinize bu küçük katkıdır. Web sitenize eklemek için Testimonial Slider, tek bir kuruş harcamadan doğru yönde ilerlemenizi sağlayacak bir araçtır. Referanslar için bu ücretsiz CSS kaydırıcısı, farklı projelere kolayca uyum sağlayan basit bir yapı sunan, kullanımı biraz esinti. Yine de, markanızla doğal olarak uyum sağlayan bir sonuç elde etmek için her zaman kendi bükümünüzü ekleme seçeneği vardır.

Galeri CSS'si

Ben Schwarz, Avustralya'da ön uç geliştirme üzerine çok sayıda konferans yürütür ve GitHub'da barındırılan çok sayıda trend açık kaynak kitaplığına sahiptir. Galeri CSS, onun en çok aranan kütüphaneleri arasındadır ve görebileceği tüm ilgiyi gerçekten hak etmektedir. JavaScript ve jQuery geliştiricilerinin kullandığı yüksek standartları korurken saf CSS kullanan çarpıcı bir kaydırıcı çözümüdür. Tamamen tarayıcılar arası uyumlu, tam sayfa bir uygulamada ne kadar harika göründüğünü görmek için önizleme demo ana sayfasına bakın.

Sıra.js

Sequence, çeşitli animasyon efektleri için duyarlı bir CSS çerçevesi olarak övünür: yerel içerik kaydırıcıları oluşturma, web tabanlı sunumlar oluşturma, afiş oluşturma ve alıştırma (adım adım) sürecini içeren diğer projeler. Yerleşik CSS sınıflarıyla, adım adım kullanıcı deneyimi içeren bir uygulamayı veya widget'ı hızla prototipleyebilirsiniz. Tamamen donanım olarak optimize edilmiş, aynı zamanda etkileyici ve modern hissi korurken, saniyede şaşırtıcı kare hızları elde edebilirsiniz. Sequence geliştiricilerinin sağladığı ücretsiz temalardan herhangi birini seçebilir veya premium olanlarından birini satın alabilirsiniz. Talep üzerine ve finansal yatırım üzerine özel temalar mevcuttur. Belgeler, Sıra özelliklerinin tam kapsamını gösterir ve Sıralamayı benzersiz senaryolarda kullanabilmeniz için API'nin nasıl kullanılacağını açıklar.

CSS Akordeon Kaydırıcısı

Onur Adsay'ın yaratıcı gücü, saf CSS ve HTML ile oluşturulmuş bu akordeon kaydırıcıda kendini gösterdi. Kreasyonunu, ihtiyaç duyduğunuz sürgülü pencere sayısı, ihtiyaç duyduğunuz yükseklik ve genişlik türü ve hatta renk özelleştirmeleri gibi ihtiyaçlarınızı karşılamak için web sitesinde tamamen özelleştirebileceğiniz şekilde yapılandırdı. Kaydırıcı, hem işe alıştırma amaçları için hem de büyük sayfalarda genel içerik görüntüleme için kullanım bulacaktır. Sekmeli içerik olarak da bilinen blog yazarlarının WordPress bloglarında kullandıklarına benzer. Her bölüm (sınıf) ayrı ayrı bölünür ve her türlü içeriği kendi içinde barındırabilir, hatta interaktif medya veya dinamik içerik; son iki akordeon örneğini görebileceğiniz şekilde, ayarları değiştirdikçe özel olarak oluşturulan, size kullanılacak son kodu verir.

Slider.css

CSS slaytları başka hangi durumlarda sıklıkla kullanılıyor? Elbette cevap slayt gösterileri. HTML ile oluşturulan CSS dostu slayt gösterileri, konferanslarda ve etkinliklerde konuşanlar tarafından, ayrıca web sitelerini ilginç konular hakkında konuşmak veya projeleri için belgelere ev sahipliği yapmak için kullanmak isteyen geliştiriciler tarafından da zaten bol miktarda kullanıma maruz kalmıştır. Slider.css, hiçbir JavaScript eklenmemiş slayt gösterisi komut dosyasında gezinmek için basittir. Geçişleri destekler, Chrome kullanıcıları için bir ilerleme çubuğu vardır ve en aza indirgemek mümkündür. Ayrıca sayfa numaralarını gösterir ve slayt içeriğine odaklanan hafif bir tasarıma sahiptir.

Saf CSS Kaydırıcısı

Damian Drygiel'e neden saf bir CSS kaydırıcısı oluşturduğunu sorarsanız, bunun mümkün olduğunu hemen söyleyecektir. Başka hangi sebep gerekli? Damian, çok sayıda trend olan CSS ve HTML kalemi oluşturmuştur. Binlerce geliştiricinin dikkatini çektiler ve CSS Slider bu kalemlerin en başında geliyor. Bu CSS kodu, LESS'in arkasında oluşturulmuştur. Kaydırıcıda ayrıca gezinmenin iki yolu vardır: özel oklar ve radyo düğmeleri. Her slayt istediğiniz bilgiyi içerebilir, geçişler sorunsuzdur ve mobil cihazları destekler.

Saf CSS3 Kaydırıcısı

Tipik bir jQuery kaydırıcısının yapacağı gibi, kaydırıcıları otomatik olarak hareket ettiren bir animasyon efektine sahip bir CSS kaydırıcısına ne dersiniz? Elitewares'in Pure CSS3 Slider'ı zariftir, hızlıdır ve tam sayfa tasarımlarınızla bütünleşir.

Kutu Modelinin Açılması

Açılma, CSS geçişlerini kullanmaya ve içeriği kayan bir şekilde ortaya çıkarmak için dönüştürmeye yönelik başka bir benzersiz yaklaşımdır. Yön tuşlarınızın yardımıyla tamamen kaydırma efektine dayalı bir web sayfası oluşturabilirsiniz. Slayt gösterileri ve etkileşimli web sitesi konseptleri için uygundur. Unfold, herhangi bir sınıfa veya içerik senaryosuna eklenebilir ve içerik, kullanıcılar sayfada gezinirken farklı durumları yansıtacak şekilde dinamik olarak yönetilebilir. İçerik, belirli öğeye ulaşılana kadar DOM'den de gizlenebilir.

Özel Efektlerle Saf CSS Kaydırıcısı

Nikolay Talanov, şimdiye kadar kariyerinde bazı muhteşem kalemler yazdı, etkileşimli CSS ve HTML kavram kanıtı konusundaki çalışmaları boyunca toplam 300.000'den fazla görüntülendi. Nikolay'ın özel animasyon efektlerine sahip CSS kaydırıcısı, içeriğiniz için kayan bir efekt oluşturmak için saf CSS kullanma potansiyelini gerçekten gösteriyor. Demodaki slaytların her biri farklı bir geçiş efekti gösterir. Kullanıcılarınız, kullandığınız kaydırıcının CSS'den başka bir şeyle oluşturulmadığını asla tahmin edemez.

CSS Kaydırıcı Yapboz Oyunu

Mark Robbins, deneyimi oyunlaştırmak için CSS kullanma konusunda uzmanlığa sahiptir. Bu kaydırıcı bulmaca oyunu, kayan efektler elde etmek için CSS'nin kullanılabileceği farklı yolları gösterir. Web sitenizdeki içeriği göstermek için bu özel örneği kullanmayacaksınız, ancak CSS'nin sorunsuz geçiş efektleri oluşturmak için HTML ile nasıl etkileşime girdiğine dair bazı anlayışlı cevaplar alabilirsiniz.

Saf CSS Yatay Slayt

David Conner, bir CSS kaydırıcı portföyü oluşturdu. Yatay slaydı benzersizdir çünkü slaytlar arasında gezinmek için başlık menüsü öğelerini kullanır. Bir slayt öğesi tıklandığında, pürüzsüz sayfa geçişlerinin çalışmasına benzer şekilde, otomatik olarak bir sonrakine geçiş yapar. Bu işi kendi tasarımlarınız üzerinde yapmak için oldukça az sayıda uygulama da uygulanabilir.