Isi
- 01. Efek teks rollover
- 02. Membuat CSS
- 03. Posisikan kata
- 04. Ke atas dan ke atas
- 05. Melayang ke bawah
- 06. Otomatis untuk rakyat
- 07. Tambahkan kelas bergantian
Arahkan kursor ke link adalah cara yang bagus untuk menarik perhatian pengguna, terutama jika mereka melakukan sesuatu yang tidak biasa atau orisinal. Middle Child memiliki efek yang hebat, jarang terlihat di tempat lain, yang menangkap setiap huruf dan membaginya dengan animasi, yang muncul saat pengunjung mengarahkan kursor ke kata tersebut. Animasi membantu menyampaikan karakter lucu merek sandwich itu.
Dalam artikel ini, kami menunjukkan cara membuat ulang efek di situs Anda. Untuk inspirasi lebih lanjut, lihat panduan kami untuk contoh animasi CSS terbaik (dengan instruksi tentang cara mengkodekannya). Untuk sesuatu yang sedikit berbeda, cobalah pembuat situs web teratas atau pilihan penyimpanan awan terbaik kami. Dan jika Anda membuat situs Anda lebih kompleks, pastikan hosting web Anda tepat.
01. Efek teks rollover
Salah satu efek teks hebat di situs web Middle Child adalah efek rollover pada menu, di mana huruf-huruf terpisah pada teks dan berputar sedikit. Mulailah ini dengan beberapa tag HTML sederhana.
div> div> Sarapan / div> / div>
02. Membuat CSS
Gunakan file CSS terpisah atau tag gaya untuk menambahkan aturan CSS berikut dan membuat halaman memenuhi ukuran penuh browser dengan memastikan badan dan pembungkus mengambil tinggi penuh yang tersedia.
tubuh {lebar: 100%; tinggi: 100%; margin: 0; bantalan: 0; } .wrapper {display: grid; tinggi: 100%; }
03. Posisikan kata
Itu kata kelas memusatkan kata di grid. Teks apa pun yang diberi kata kelas dapat menerapkan ini. Itu naik kelas akan diterapkan ke setiap huruf lainnya dan ini akan bergerak ke atas.
.word {font-size: 3em; margin: otomatis otomatis; } .word .up {display: inline-block; transform: translate3d (0px, 0px, 0px) rotate (0deg); transisi: semua kemudahan 0.5s-in-out; }
04. Ke atas dan ke atas
Sekarang turun kelas berbagi pengaturan yang sangat mirip dengan naik tapi hover menunjukkan gerakan ke atas untuk naik berputar. Ke atas juga diputar sedikit untuk menyempurnakan tampilan.
.word .down {display: inline-block; transform: translate3d (0px, 0px, 0px) rotate (0deg); transisi: semua kemudahan 0.5s-in-out; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); warna: # 058b05}
05. Melayang ke bawah
Saat pengguna mengarahkan kursor ke teks, kelas bawah memindahkan teks ke bawah. Nanti di JavaScript, teks akan dipecah menjadi span terpisah dengan kelas yang ditambahkan secara otomatis ke span alternatif.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); warna: # 058b05; }
06. Otomatis untuk rakyat
Agak merepotkan untuk harus meletakkan setiap huruf dalam rentang bergantian dengan kelas yang berbeda, jadi kami akan mengotomatiskan prosesnya dengan membuat JavaScript meminta pemilih dan mengambil setiap huruf. Di sini str variabel mengambil huruf saat ini saat loop melalui teks.
script> var elements = document.querySelectorAll (’.word’); untuk (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elemen [i] .innerHTML = ’’;
07. Tambahkan kelas bergantian
Sekarang loop lain menempatkan setiap huruf dalam elemen span-nya sendiri dan menambahkan file naik atau turun kelas ke bentang. Jika Anda melihat ini di browser, Anda akan melihat teks dipisahkan oleh setiap huruf ke atas dan ke bawah, sambil berputar sedikit.
Anda dapat melihat efeknya beraksi di situs web Middle Child.
untuk (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elemen [i] .appendChild (spn); spn.textContent = str [j]; biarkan pos = (j% 2)? 'Naik': 'turun'; spn.classList.add (pos); }} / script>
Artikel ini awalnya diterbitkan di majalah desain web kreatif Desainer web.Beli edisi 286 atau langganan.
