Cara Membuat Animasi Gelombang Air di Blog

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Animation Wave Water" dengan menambahkan hal ini dapat membuat blog menjadi lebih menarik karena ada animasi bergelombang seperti air di blog atau website kalian yang membedakan dengan blog lain.

Cara Membuat Animasi Gelombarng Air di Blog

animasi ini tidak memberatkan blog atau web kalian karena Pure CSS "Tidak Pakai Javascript" jadi aman bagi kalian yang suka dengan kecepatan tapi ga lambatin blognya pasti wajib pakai ini supaya terlihat menarik dan kekinian.

Bagaimana animasi nya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" untuk "Animation Wave Water" tersebut dibawah :#

See the Pen
Water Wave Background Animation Effects by Rian_kuno (@rian_kuno)
on CodePen.

Bagaimana animasinya ? menarik bukan dan berbeda dengan yang lain :3

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Membuat Animasi Gelombarng Air di Blog

1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat dibawah kode <style> atau <b:skin>

#gelombang{position:relative;width:100%;height:100vh;background:#3586ff;overflow:hidden}#gelombang.air{position:absolute;bottom:0;left:0;width:100%;height:100px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ7Y33Bobd8WEFNOeHRkjgYAU2wazREUZQbVSHBRh5l9rBcz8KP7VlRJ3FmjnGFWP71LvbSaUbHmJrvmH74Xx9JXI4GZLQWsSvrv5B6kQbwIlozPEBkK7Osv2tXxeSfJEk-dlzy8eNQO1R/s1600/wave.png);background-size:1000px 100px}#gelombang .air.air1{animation:wave 30s linear infinite;z-index:1000;opacity:1;animation-delay:0s;bottom:0}#gelombang .air.air2{animation:wave2 15s linear infinite;z-index:999;opacity:0.5;animation-delay:-5s;bottom:10px}#gelombang .air.air3{animation:wave 30s linear infinite;z-index:998;opacity:0.2;animation-delay:-2s;bottom:15px}#gelombang .air.air4{animation:wave2 5s linear infinite;z-index:997;opacity:0.7;animation-delay:-5s;bottom:20px}@keyframes wave{0%{background-position-x:0}100%{background-position-x:1000px}}@keyframes wave2{0%{background-position-x:0}100%{background-position-x:-1000px}}

4. Tambahkan kode berikut tepat dibawah kode <body>

<div id='gelombang'>
  <div class='air air1'></div>
  <div class='air air2'></div>
  <div class='air air3'></div>
  <div class='air air4'></div>
</div>

5. Simpan Tema
6. Selesai

Bagaimana hasilnya ? sama bukan dengan yang tampilan "Demo" tampilan nya sederhana tapi menarik mata kalian :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#

Cara Membuat Animasi Gelombang Air di Blog

Cara Membuat Animasi Gelombarng Air di Blog

Related Posts

Post a Comment