Cara Memasang Animasi Wave Bergelombang di Bagian Footer

Untuk update artikel kali ini, saya akan sedikit memberikan tutorial cara memasang animasi wave bergelombang di bagian footer. Ini sering dibilang cukup mudah, kenapa mudah? Karena kalian hanya perlu menyimaknya dan copy paste bahan-bahan yang sudah saya sediakan.

Animasi wave bergelombang untuk sekarang ini sangat banyak peminatnya, bahkan sudah semakin banyak pula para blogger yang memasangnya di blog mereka masing-masing. Tidak kecuali, adapun kelebihan dari animasi wave ini sendiri sebagai berikut.

1. Memberikan tampilan blog menjadi lebih bagus
2. Enak dipandang
3. Tidak berat (Dikarenakan hanya menggunakan CSS)

Animasi Wave bergelombang di bagian footer dapat menambah keindahan dan tampilan estetika pada sebuah website. Nah untuk kalian yang tertarik dan ingin memasangnya juga di blog kalian. Silahkan simak cara-cara yang sudah saya jelaskan dibawah ini.

Cara Memasang Animasi Wave Bergelombang

Untuk memulai semua cara dan langkah-langkah pembuatannya, disini kita hanya memerlukan CSS dan HTML saja.

1. Buat Animasi Wave Bergelombang

Anda dapat membuat animasi Wave bergelombang menggunakan CSS. Berikut adalah contoh kode CSS yang dapat Anda gunakan:

.waves {position:relative;width: 100%;height:15vh;margin-bottom:-7px; /*Fix for safari gap*/ min-height:100px;max-height:150px;}
.content {position:relative;height:20vh;text-align:center;background-color: white;}
/* Animation */
.parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;}
@keyframes move-forever {
  0% {transform: translate3d(-90px,0,0);}
  100% { transform: translate3d(85px,0,0);}}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {height:40px;min-height:40px;}
.content {height:30vh;}
h1 {font-size:24px;}}

2. Tambahkan Kode CSS ke Situs Web Anda

Setelah Anda membuat animasi Wave bergelombang, Anda dapat menambahkan kode CSS ke situs web Anda. Anda dapat menambahkan kode CSS ke file style.css atau memasukkannya ke dalam tag <style> pada file HTML.

3. Tambahkan HTML untuk Animasi Wave Bergelombang

Untuk menampilkan animasi Wave bergelombang di bagian footer, Anda perlu menambahkan HTML untuk elemen yang akan menampilkan animasi tersebut. Anda dapat menambahkan kode HTML berikut ke file HTML:

<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>

Pastikan kode HTML tersebut ditempatkan di bagian footer situs web Anda.

<footer>
<div class='footer-wrapper'>
<p><a href='#'>blogcozone.com</a> | Allright Reserved.</p>
</div>
</footer>

Note:
Kode footer di atas hanya sebagai contoh, setiap kode yang ada di blog pasti berbeda-beda. Jadi, sobat tinggal atur saja di bagian footer.

Live Demo

4. Atur CSS untuk Footer

Terakhir, Anda perlu mengatur CSS untuk bagian footer situs web Anda agar animasi Wave bergelombang tampil di bagian footer. Anda dapat menambahkan kode CSS berikut ke file CSS Anda:

footer {
  position: relative;
  z-index: 1;
}

Pastikan kode CSS tersebut ditempatkan di file CSS Anda.

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah memasang animasi Wave bergelombang di bagian footer situs web Anda. Namun, perlu diingat bahwa efek animasi dapat memengaruhi kecepatan tampilan situs web Anda. Pastikan Anda melakukan uji coba dan pengujian untuk memastikan situs web Anda tetap berfungsi dengan baik.

Menyesuaikan Tampilan Animasi Wave Bergelombang Sesuai Keinginan Anda

Selain itu, Anda juga dapat menyesuaikan tampilan animasi Wave bergelombang sesuai dengan preferensi Anda dengan mengubah nilai-nilai pada kode CSS. Beberapa hal yang dapat Anda ubah antara lain:

1. Warna
   Anda dapat mengubah warna animasi Wave bergelombang dengan mengubah nilai pada properti background-color pada kode CSS.
2. Tinggi
   Anda dapat menyesuaikan tinggi animasi Wave bergelombang dengan mengubah nilai pada properti height pada kode CSS.
3. Kecepatan Animasi
   Anda dapat mengubah kecepatan animasi Wave bergelombang dengan mengubah nilai pada properti animation pada kode CSS. Anda dapat mengubah nilai pada properti duration dan ease-in-out sesuai dengan keinginan Anda.
4. Sudut Kemiringan
   Anda dapat mengubah sudut kemiringan animasi Wave bergelombang dengan mengubah nilai pada properti transform pada kode CSS. Anda dapat mengubah nilai pada properti skewY sesuai dengan keinginan Anda.

Dengan menyesuaikan kode CSS, Anda dapat membuat animasi Wave bergelombang yang unik dan sesuai dengan tampilan situs web Anda.

Namun, perlu diingat bahwa animasi Wave bergelombang hanya sebagian kecil dari tampilan situs web Anda. Pastikan untuk menyesuaikan tampilan animasi Wave bergelombang dengan tampilan keseluruhan situs web Anda agar terlihat serasi dan menarik.

Dalam memasang animasi Wave bergelombang di bagian footer situs web Anda, pastikan juga untuk mengikuti prinsip desain web yang baik dan etika dalam mengoptimalkan tampilan situs web. Jangan terlalu banyak menggunakan animasi atau efek yang dapat memperlambat tampilan situs web Anda atau mengganggu pengalaman pengguna.