Shuffle sendiri berarti mengubah ,menyeret dll. Dalam kasus ini saya akan membuat animasi shuffle text menggunakan CSS. Animasi yang ditampilkan nanti akan diberi efek hover pada textnya. Agar tidak penasaran bagaimana cara membuatnya coba ikutin langkah-langkah berikut ini:Langkah pertama buat file HTML lalu ketikkan syntax dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <h2> <span>Terimalah lagu ini</span> <span>Dari orang biasa</span> <span>Tapi cintaku padamu luar biasa</span> <span>Aku tak punya bunga</span> <span>Aku tak punya harta</span> <span>Yang kupunya hanyalah hati yang setia</span> <span>Tulus padamu</span> <span>uuuuuoooooo....</span> </h2> </body> </html> |
LAngkah kedua tambahkan style CSS untuk memberikan efek animasi yang akan dibuat ketikkan code berikut ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
@import url('https://fonts.googleapis.com/css?family=Courgette&display=swap'); body{ margin:0; padding:0; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Courgette', cursive; } h2{ position: relative; margin:0; padding:0; height: 50px; font-size: 30px; overflow: hidden; } h2 span{ display: flex; width: 100%; height: 100%; display: grid; align-items: center; } h2:hover span{ animation: shuffle steps(8) 6s infinite; } @keyframes shuffle { 0% { transform: translateY(0px); } 100% { transform: translateY(-400px); } } |
pada HTML terdapat tag <span> yang digunakan untuk membagi-bagi kalimat supaya animasi yang ditampilkan terlihat menarik. didalam style.css ada property animation : shuffle steps(8) => steps(8) ini adalah jumlah span yang terdapat pada file HTML, jadi saat bagian tag h2 setiap span dihover maka animasi akan berjalan dan pada @keyframes shuffle saat 100% nilai transform : translateY(-400px) nilai dihitung dari jumlah span yang dipakai dikali nilai height h2 [50 x 8 = 400].
JIka sudah kedua file sudah selesai diketikkan jangan lupa simpan lalu coba jalankan pada browser masing-masing, dan lihat hasilnya berikan efek hover pada kalimat yang tampil pertama, apabila benar kalimat yang tampilkan akan bergantian.
Demikian pembahasan artikel kali ini tentang cara membuat animasi shuffle text dengan html css, semoga bermanfaat dan selamat mencoba .
terima kasih.