Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat animasi efek seperti gelombang di blogger
Info: Oke jika kamu sudah penasaran dengan oemabajasan kita kali ini yuk langsung aja kita bahas bersama sama
Seperti Gelombang
Pernahkah kamu melihat air laut yang diiringi dengan gelombang wah pastinya keren sekali ya kan, nah hal tersebut bisa menjadi inspirasi untuk admin membuat sebuah tampilan di blogger menggunakan efek animasi seperti gelombang air laut, dan pada kode CSS posisi telah di tetapkan pada tampilan bawah footer, jika kamu ingin mengubahnya di oerlukan pemahaman kode CSS untuk membuat nya
Menggunakan Animasi
Pastinya untuk membuat tampilan di blogger bisa bergerak gerak adalah dengan menggunakan animasi, sedangakan animasi yang dimaksud bukanlah animasi atau anime yang ada di film film ya beda lah, tapi yang admin maksud disini adalah penggunaan animasi pada CSS, sama halnya untuk membuat tampilan seperti air bergelombang di blogger kita harus menggunakan animasi CSS
Responsive
Tampilan animasi gelombang di blogger tersebut sagat lah responsive yakni responsive pada tampilan mobile dan responsif juga pada tampilan desktop, dan kamu jagan khawatir jika dengan menggunakan animasi gelombang tersebut membuat blog kamu menjadi lambat, karena 100% pembuatan nya mengunakan kode CSS saja, insya Allah tidak akan membuat blog kamu menadi lambat
Contoh Tampilan
Jika kamu penasaran degan bagaimana contoh tampilan dari animasi air bergelombang tersebut, kamu bisa menggunakan tombol dibawah ini untuk langsung melihatnya
Info: Luar biasa keren kan, ya kan, ya lah
Cara pembuatan
Baiklah sekarang saatnya adin akan membahas mengenai bagaimana caranya membuat tampilan air gelombang di blogger menggunakan animasi kode CSS, perhatikan setiap langkah langakah yang admin Jabarkan sebentar lagi
Kode CSS
Langkah pertama yang bisa kamu lakukan untuk membuat tampilan seperti air bergelombang, kamu bisa menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>
/* Gelombang animasi by Icloudice */.rahnav-co{position:absolute;bottom:0;width:100%;z-index:-1} .rahnav-in{position:relative} .rahnav-in .waves{position:absolute;bottom:0;width:100%;height:53px;min-height:100px;max-height:150px;bottom:-8px} .rahnav-fl{position:relative;height:53px;background:#C6DAFC} .rah > use{fill:#C6DAFC;animation:rahnav-gel 25s cubic-bezier(.55,.5,.45,.5) infinite} .rah > use:nth-child(1){opacity:.7;animation-delay:-2s;animation-duration:7s} .rah > use:nth-child(2){opacity:.5;animation-delay:-3s;animation-duration:10s} .rah > use:nth-child(3){opacity:.3;animation-delay:-4s;animation-duration:13s} .rah > use:nth-child(4){opacity:1;animation-delay:-5s;animation-duration:20s} @media (max-width: 896px){.rahnav-co .rahnav-fl{height:200px}} @keyframes rahnav-gel{0%{transform: translate3d(-90px,0,0)}100%{transform: translate3d(85px,0,0)}} .dark-mode .rahnav-fl{background:} .dark-mode .rah > use{fill:#fefefe}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya untuk membuat tampilan dari animasi gelombang air di blogger salin lagi kode HTML di bawah in kemudian letakkan di atas kode </body>
<div class='rahnav-co' id='rahnav-co'>
<div class='rahnav-in'>
<svg class='waves' preserveaspectratio='none' shape-rendering='auto' viewbox='0 24 150 28'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='wave-bh'>
</path>
</defs>
<g class='rah'>
<use x='48' xlink:href='#wave-bh' y='0'>
</use>
<use x='48' xlink:href='#wave-bg' y='3'>
</use>
<use x='48' xlink:href='#wave-bh' y='5'>
</use>
<use x='48' xlink:href='#wave-bh' y='7'>
</use>
</g>
</svg>
</div>
<div class='rahnav-fl'>
</div>
</div>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan tampilan gelombang air tersebut
Penjelasan
Dibutuhkan sedikit penjelasan agar saat kamu memasang dan meng install kode kode yang saya berkan di atas tidak salah alias benar, yag pertama bahwa setiap template itu berbeda mungkin saja tampilan efek animasi CSS air bergelombang tersebut tidak sesuai dengan template blog kamu, jadi uba saja pemgaturan properti width dan height pada kode CSS yang say berikan oke, sesuaikan nilai atau (value) nya samapai pas dengan template blog kamu ok