İçerik
- 01. Rollover metin efekti
- 02. CSS oluşturun
- 03. Kelimeyi konumlandırın
- 04. Yukarı ve yukarı
- 05. Aşağı gezinme
- 06. İnsanlar için otomatik
- 07. Alternatif sınıflar ekleyin
Fareyle üzerine gelme bağlantıları, özellikle sıra dışı veya orijinal bir şey yapıyorlarsa, kullanıcının dikkatini çekmenin harika bir yoludur. Orta Çocuk, başka bir yerde nadiren görülen, her harfi yakalayan ve onları animasyonla ayıran, ziyaretçi kelimenin üzerine geldiğinde devreye giren harika bir etkiye sahiptir. Animasyon, sandviç markasının eğlenceli karakterini aktarmaya yardımcı olur.
Bu makalede, siteniz üzerindeki etkiyi nasıl yeniden yaratacağınızı gösteriyoruz. Daha fazla ilham almak için, en iyi CSS animasyon örneklerine yönelik kılavuzumuza bir göz atın (bunları nasıl kodlayacağınıza ilişkin talimatlarla birlikte). Biraz farklı bir şey için, en iyi bir web sitesi oluşturucuyu veya en iyi bulut depolama seçimimizi deneyin. Sitenizi daha karmaşık hale getiriyorsanız, web barındırma işleminizin yerinde olduğundan emin olun.
01. Rollover metin efekti
Middle Child web sitesindeki harika metin efektlerinden biri, harflerin metin üzerinde bölündüğü ve hafifçe döndüğü menüdeki rollover efektleridir. Buna bazı basit HTML etiketleriyle başlayın.
div> div> Kahvaltı / div> / div>
02. CSS oluşturun
Aşağıdaki CSS kurallarını eklemek için ayrı bir CSS dosyası veya stil etiketleri kullanın ve gövdenin ve sarmalayıcının kullanılabilir tam yüksekliği almasını sağlayarak sayfanın tarayıcının tam boyutunu doldurmasını sağlayın.
gövde {genişlik:% 100; yükseklik:% 100; kenar boşluğu: 0; dolgu: 0; } .wrapper {display: grid; yükseklik:% 100; }
03. Kelimeyi konumlandırın
kelime sınıf, kelimeyi ızgarada ortalar. Verilen herhangi bir metin kelime sınıf bunu uygulatabilir. yukarı sınıfı diğer tüm harflere uygulanacak ve bunlar yukarı doğru hareket edecek.
.word {yazı tipi boyutu: 3em; kenar boşluğu: otomatik otomatik; } .word .up {display: inline-block; dönüştürme: translate3d (0px, 0px, 0px) döndürme (0deg); geçiş: tüm 0,5 sn'lik kolay giriş; }
04. Yukarı ve yukarı
Şimdi aşağı sınıf, çok benzer ayarları paylaşır. yukarı ancak fareyle üzerine gelme, yukarı doğru hareketi gösterir. yukarı yuvarlanmak. Görünümü iyileştirmek için yukarı doğru da hafifçe döndürülür.
.word .down {display: inline-block; dönüştürme: translate3d (0px, 0px, 0px) döndürme (0deg); geçiş: tüm 0,5 sn'lik kolay giriş; } .word: vurgulu .up {dönüşüm: translate3d (0px, -8px, 0px) rotate (12deg); renk: # 058b05}
05. Aşağı gezinme
Kullanıcı metnin üzerine geldiğinde, alt sınıf metni aşağı doğru hareket ettirir. Daha sonra JavaScript'te metin, sınıflar otomatik olarak alternatif aralıklara eklenecek şekilde ayrı aralıklara bölünecektir.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); renk: # 058b05; }
06. İnsanlar için otomatik
Her harfi farklı sınıflara sahip alternatif aralıklara yerleştirmek biraz güçtür, bu nedenle, seçiciyi sorgulamak ve her harfi almak için JavaScript alarak süreci otomatik hale getireceğiz. İşte str değişken, metin içinde dönerken geçerli harfi yakalar.
script> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; öğeler [i] .innerHTML = ’’;
07. Alternatif sınıflar ekleyin
Şimdi başka bir döngü, her harfi kendi aralık elemanına yerleştirir ve yukarı veya aşağı açıklıklar için sınıf. Buna tarayıcıda bakarsanız, metnin hafifçe dönerken yukarı ve aşağı bölündüğünü göreceksiniz.
Etkiyi Middle Child web sitesinde eylem halinde görebilirsiniz.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); öğeler [i] .appendChild (spn); spn.textContent = str [j]; let pos = (j% 2)? 'yukarı aşağı'; spn.classList.add (konum); }} / script>
Bu makale ilk olarak yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı.Sorunu satın al 286 veya abone ol.
