Hallo sahabat Dumet semua masih semangat belajar dan mencoba banyak hal kan, iya pada pembahasan artikel kali ini saya akan mencoba membuat animasi scroll down menggunakan html css , kita akan membuatnya dengan cara yang sederhana saja tanpa menggunakan plugin tertentu ,sahabat hanya perlu mengikuti langkah demi langkah pembuatanya.
Agar tidak terlalu lama menunggu ayo langsung saja dilanjutkan ,sekarang yang dibutuhkan adalah mengetikan file html-nya cukup dengan sintax dibawah ini saja,
Langkah selanjutnya sahabat membuat CSS-nya ,langsung saja ketikan sintax seperti dibawah 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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
body{ padding:0; margin:0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #0d193f; } .panah{ position: relative; width: 50px; height: 50px; transform: rotate(45deg); } .panah span{ position: absolute; top:0; left:0; width: 100%; height: 100%; display: block; box-sizing: border-box; border:none; border-right: 3px solid #fff; border-bottom:3px solid #fff; animation: animate 1s linear infinite; } .panah span:nth-child(1) { top:-30px; left:-30px; animation-delay: 0s; } .panah span:nth-child(2) { top:-15px; left:-15px; animation-delay: 0.2s; } .panah span:nth-child(3) { top:0px; left:0px; animation-delay: 0.4s; } .panah span:nth-child(4) { top:15px; left:15px; animation-delay: 0.6s; } .panah span:nth-child(5) { top:30px; left:30px; animation-delay: 0.8s; } @keyframes animate { 0%{ border-color: #fff; } 20%{ border-color: #fff; } 20.1%,100%{ border-color: #00ffc7; } } |
Nah jika sudah dibuat jangan lupa harus disave yaaa, lalu mari dijalankan ke browser masing-masing apakah sudah benar dalam penulisan kedua sintax diatas. Maka akan seperti ini tampilan yang sahabat buat:
Saya kira cukup pembahasan artikel ini ,mungkin dapat dikembangkan lagi animasi yang dibuat.
semoga bermanfaat dan tetap semangat belaja, sampai berjumpa lagi pada tutorial berikutnya.
terima kasih