Cara Membuat Wave Animation Pada Footer Blog

 

Hiirotaku - Jika kita membahas mempercantik tampilan pada blog pasti tidak akan ada habisnya karena banyak sekali desain css yang sangat cocok dan ingin di pasang pada blog kita. Di Artikel kali ini saya akan membahas sedikit cara memasang animasi wave atau ombak bergelombang pada tampilan footer, tutorialnya cukup karena tinggal copy paste saja.

Anime wave ini lumayan di minati kalangan blogger karena tampilannya yang fresh, keren, terlihat profesional, dan tidak berat.

Cara Memasang Animasi Wave di Blogger

1. Untuk memulainya seperti biasa buka halaman blogger > Tema > Edit HTML

2. Copy dan Pastekan kode css di bawah ini tepat di atas kode ]]></b:skin>

/* Footer Wave Animations */
#footer .wave-animation{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);bottom:initial;top:0;height:5em}
#footer{padding-top:45px}
.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}
.wave-bg > use:nth-child(2){animation-delay:-2s;animation-duration:10s}
.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%)}
}
#footer{position:relative;background:linear-gradient(-50deg,rgba(242,193,78,.95),rgba(247,129,84,.95));z-index:2}
.main-container{margin:0 auto;width:90%;max-width:1080px}
#footer {
    padding-top: 80px;
}

3. Tahap berikutnya Copas kode di bawah ini pada bagian <footer> </footer>

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

Catatan : letakkan kode di bagian <footer> dengan benar agar pemasangan berhasil dan sempurna

DEMO

Nah itu dia tutorial cara memasang animasi efek ombak bergelombang, mudah bukan? pantengin trus blog hiirotaku untuk mempercantik blog kalian.