Cara Membuat Efek Animasi Gelombang (Wave) Di Blogger - JagoanQue

Cara Membuat Efek Animasi Gelombang (Wave) Di Blogger - JagoanQue

JagoanQue - Mungkin banyak diantara anda yang ingi mendesain blognya agar terlihat menarik dan terlihat keren dengan menggunakan efek animasi gelombang atau wave. Pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat Efek Animasi Gelombang (Wave) Di Blogger. Tutorial ini saya buat untuk anda yang ingin menggunakan efek gelombang di template anda masing - masing agar terlihat secantik mungkin. Karena dengan memiliki template yang cantik akan membuat pengunjung merasa nyaman.


Jika anda bertanya "Blog nya jadi berat gak?". Tentu saya jawab tidak, karena pembuatan script nya tidak menggunakan Javascript ataupun Library. Untuk cara pemasangan di blog atau template anda pun sangat gampang anda hanya perlu menambahkan beberapa CSS dan HTML maka efek gelombang akan muncul di blog anda.

Efek gelombang ini juga sudah responsif ya..Jadi tidak perlu khawatir lagi efek gelombangnya berantakan. Daripada lama - lama yuk simak tutorialnya dibawah ini.

Cara Membuat Efek Animasi Gelombang (Wave) Di Blogger

1. Login ke akun Blog anda

2. Pilih Tema dan pilih Edit HTML

3. Salin kode di bawah ini dan letakkan di atas atau sebelum kode ]]></b:skin>


/* Footer Wave JagoanQue */
#footer-navmenu .wave-animation{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);bottom:initial;top:0;height:5em}#footer-navmenu{padding-top:50px;background:linear-gradient(to right, #654ea3, #eaafc8);position:relative}#footer-navmenu-container{max-width:1000px;margin:0 auto;text-align:center}#footer-navmenu ul{list-style:none;margin:0}#footer-navmenu ul li{display:inline-block;margin:6px 0}#footer-navmenu ul li:last-child::after{content:""}#footer-container {background:linear-gradient(to right, #654ea3, #eaafc8);}

/* Wave Animation JagoanQue */
.wave-animation{display:block;width:100%;height:8em;max-height:100vh;margin:0;position:absolute;bottom:-10px}.wave-bg > use{-webkit-animation:move-forever 20s linear infinite;animation:move-forever 20s linear infinite}.wave-bg > use:nth-child(1){animation-delay:-2s;fill:rgba(232, 174, 199, 0.58);}.wave-bg > use:nth-child(2){animation-delay:-2s;animation-duration:10s;fill:rgba(232, 174, 199, 0.85);}.wave-bg > use:nth-child(3){animation-delay:-4s;animation-duration:8s}@-webkit-keyframes move-forever{0%{transform:translate(-90px,0%)}100%{transform:translate(85px,0%)}}@keyframes move-forever{0%{transform:translate(-90px,0%)}100%{transform:translate(85px,0%)}}.wave-animation{height:3em}.wave-animation{height:4em}

4. Jika sudah jangan di save sulu. Sekarang anda cari kode <! - - footer nav menu - - !> jika sudah ketemu kemudian salin kode di bawah ini tepat di atas kode tadi.


<div id='footer-navmenu'>
<svg class='wave-animation' preserveAspectRatio='none' viewBox='0 24 150 28' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<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='gentle-wave'/>
</defs>
<g class='wave-bg'>
<use fill='rgba(242,193,78,.5)' x='50' xlink:href='#gentle-wave' y='0'/>
<use fill='rgba(242,193,78,.7)' x='50' xlink:href='#gentle-wave' y='3'/>
<use fill='#fff' x='50' xlink:href='#gentle-wave' y='6'/>
</g>
</svg>
</div>

5. Setelah itu Simpan template anda dan lihat hasilnya

Penutup

Bagaimana? cukup mudah bukan. Jika anda sudah mengikuti tutorial di atas dengan benar maka saya yakin 100% efek dari gelombang ini akan tampil di blog anda. Semoga tutorial ini membantu anda untuk membuat efek gelombang dan jika anda suka dengan artikel artikel JagoanQue alangkah baiknya anda ikuti atau follow blog JagoanQue agar tahu update an artikel - artikel terbarunya dan share juga blog JagoanQue ke sosial media anda agar saya makin semangat untuk update artikel nya. Sekian dan Terimakasih.