Hover & Click Efektleri için 10 Özel CSS ve JavaScript Parçacığı

Geliştiriciler, fareyle üzerine gelme ve fare tıklamaları gibi basit kullanıcı eylemleriyle bazı çılgın efektler yapabilir. Bunlar çoğunlukla masaüstü kullanıcılarıyla ilgilidir ancak mobil web, çoğu tarayıcıda tıklama/dokunma efektlerini de destekler.

Kendi projelerinizde uygulayabileceğiniz harika fikirler arıyorsanız, bu koleksiyonda kesinlikle sizin için bir şeyler var. Biraz JavaScript ve CSS bilen herkes, bu efektleri herhangi bir tarayıcıda, herhangi bir web sitesinde çalışacak şekilde kolayca ayarlayabilir ve bir düzen deneyimine çeki düzen verebilir.

Düğme Vurgulu Efektler

Animasyon efektleri için bariz başlangıç ​​noktası CSS düğmeleridir. Bunlar, çok fazla etkileşimi ele aldıkları için günlük kullanımda en pratik olanlardır. CTA düğmeleri neredeyse dikkat çekmek için yalvarıyor ve bu vurgulu efektlerle dikkatleri daha da hızlı çekebilirsiniz.

Her efekt, animasyon için saf CSS kullanır. Bu düğmelerden birkaçı, fareyle üzerine gelme olayları için JavaScript'e dayanır, ancak tüm animasyonlar hala doğrudan CSS'de kontrol edilir.

Düz bir düzen tasarlıyorsanız, bu animasyonların üzerinde çalışmak çok kolay olacaktır.

Gezinme Gezintileri

Bu kalem için bir avuç gezinme vurgulu olayı bulacaksınız. Bunlar, her bir köprüyü farklı bir fareyle üzerine gelme efektiyle tekrar kontrol eden saf CSS'ye dayanır.

Gezinme menüleri genellikle çok basit ve geneldir. Bu nedenle, vurgulu etkinlikler tasarımı gerçekten renklendirebilir ve ziyaretçilere küçük ayrıntılara önem verdiğinizi gösterebilir.

Bu animasyonların çoğu, herhangi bir web sitesine sığacak kadar uysaldır, bu nedenle herhangi bir düzene kolay kopyalama/yapıştırma için mükemmeldirler.

Fotoğraf Vurgulu Efektler

Sıkıcı altyazıları olan ve gerçek bağlamı olmayan fotoğraf galerilerini ne sıklıkla buluyorsunuz? Bunları çok sık görüyorum ve kendilerini tembel hissediyorlar.

Hepsi basit küçük resim galerisine dayanan bu fotoğraf efektlerini gerçekten seviyorum. Bir resmin üzerine geldiğinizde, fotoğrafın başlığını, açıklamasını ve "devamını oku" düğmesini görürsünüz.

Her öğe farklı açılardan görüntüye kayar ve bu resim galerisinin sayfadan hemen çıkmasına yardımcı olur.

CSS Araç İpucu Hover'ları

Her tarayıcı varsayılan araç ipuçlarını destekler, ancak eklentileri kullanarak veya bunun gibi kalemleri klonlayarak her zaman kendinizinkini oluşturabilirsiniz. Ty Strong tarafından geliştirilmiştir ve saf CSS araç ipuçlarını ne kadar ileri götürebileceğinizi gösterir.

Bu parçacığın tamamı, HTML <dfn> etiketini hedefleyerek çalışır. Bu etikete sarılmış herhangi bir metnin üzerine gelindiğinde, bir araç ipucu gibi görünen, üzerine gelindiğinde otomatik olarak görünüme geçer.

Saf CSS üçgenleri yıllardır var olduğundan, araç ipucu stilini yeniden oluşturmak yeterince kolaydır. Ama en çok CSS3 ile kontrol edilen pürüzsüz animasyon durumlarından etkilendim.

Hover'da CSS Simgeleri

İşte saf CSS ile yapabileceğiniz harika bir şeye başka bir örnek. Bu basit düğmelerin tümü, yalnızca bir imleç üstlerine geldiğinde görünen gizli simgelere sahiptir.

Her simge, Font Awesome'den gelir, böylece bu tasarımı tamamen ücretsiz simgelerle çoğaltabilirsiniz.

Efektler, fareyle üzerine gelindiğinde görünen ve imleç başka bir yere hareket ettiğinde kaybolan kaydırma, uzatma ve solma simgelerini içerir.

Sonsuz Sayfalandırma

Web sayfalandırma, muhtemelen arayüzün gösterişli bir parçası olmadığı için her zaman oldukça sıkıcıdır. Ancak Mariusz Dabrowski'nin bu sayfalandırma efekti ile sayfalandırmanızı bir sonraki seviyeye taşıyabilirsiniz.

Bu animasyonla ilgili tek şey, bir sayfadan diğerine yüklenecek şekilde yapılmış olmasıdır. Bu nedenle, tüm sayfanın yeniden yüklenmediği Ajax destekli sayfalarda en iyi sonucu verir. Bu şekilde, yeni içerikler görünüme yüklenirken tüm animasyon görülebilir.

Kesinlikle sınırlı pratik değeri vardır, ancak etkisi mükemmeldir.

Yer Paylaşımlı Gezinme Animasyonu

Tam ekran gezinme menüleri, mobil uyumlu web siteleri için çok popülerdir ve çoğu kullanıcı için de çalışırlar. Ancak CodePen'de bunun gibi ücretsiz bindirme efektlerine sahip olduğunuzda bunların sıkıcı veya statik olması gerekmez.

Geliştirici Ryan Mulligan, bu canavarca animasyonu, tek bir CSS sınıfında çalışan saf CSS ana kareleriyle oluşturdu.

Click olayı jQuery aracılığıyla tetiklenir, ancak hareketin tamamı CSS'dir. Kesinlikle gördüğüm daha havalı animasyonlardan biri ve önyüklemesi şaşırtıcı derecede pürüzsüz.

Saf CSS Tıklama Etkisi

Google'ın malzeme tasarımı, bir dizi animasyon efektini özetler ve bunlardan biri, dalgalanma tıklama efektidir. Bu, Android cihazlarda en yaygın olanıdır, ancak web'e de sızmıştır.

Ve bu kalemle, CSS kodundan başka bir şey kullanmadan dalgalanma efektini kendi çalışmanızda çoğaltabilirsiniz.

Bu snippet, seçildiğinde de yanan simgeleri hedefler, bu nedenle biraz daha fazla sayfa öğelerini sekmeye/seçmeye benzer. Ancak efektler, klonlamayı kolaylaştıran her şeye aktarılabilir.

Mana Düğmesi

İşte, şekiller için SVG'leri ve animasyon için CSS'yi kullanırken gördüğüm en eşsiz düğme efektlerinden biri.

Coder Dean Hidri, bu mana düğmesi efektini yalnızca 80 satır CSS ve birkaç düzine HTML satırı (SVG dahil) ile oluşturdu. Fareyle üzerine gelindiğinde bu düğme, bir arka plan dolgusu oluşturmak için düğmenin içinde özel bir sıvı şekli canlandırır, ardından daha sonra canlandırır.

Bu düğme stilini kullanabilecek bir siteniz varsa, kesinlikle oynamaya değer.

İkonik Düğme FX

Simge yazı tipleriyle çok şey yapabilirsiniz ve David Darnes'ın bu animasyonlu düğmeleri harika bir örnektir.

Simgeler, üzerine gelindiğinde farklı bir şekilde canlanır ve her biri kendi imza efektine sahiptir. Bu simgelerin tümünü tek bir web sitesinde kullanamazsınız, ancak özel animasyon stillerinin klonlanması kolaydır. Yalnızca CSS3 üzerinde çalışırlar ve seçtiğiniz herhangi bir simge yazı tipine uyarlar. Hemen hemen her web sitesi için klonlamak için gerçekten eğlenceli bir efekt!

Ve bu, UX efektleri listemi tamamlıyor, ancak bu kesinlikle kesin koleksiyon değil.

Web'i araştırırsanız, birçok başka düğme/simge vurgulu efekti bulabilirsiniz ve birçoğunun ücretsiz kaynak kodu vardır. Ancak, özel web animasyonu hakkında daha fazla bilgi edinmek istiyorsanız, geliştiriciler için devasa eklentiler ve kaynaklar listemize göz atın.