Cara Mudah Membuat Animasi Bergelombang "Wave" pada Bagian Footer

Pedia Lover - Untuk membuat animasi bergelombang (wave) pada bagian footer, sobat dapat menggunakan CSS dan animasi keyframes.

"Animasi gelombang atau biasa disebut wave ini terbilang bagus dan keren apabila kita pasang pada bagian footer." Sudah banyak juga blog ataupun web yang memakai animasi wave ini, karena tidak memberatkan sama sekali.

Apabila sobat ingin memasangnya pada blog atau web sobat, sobat bisa ikuti beberapa langkah mudah yang sudah mimin jabarkan secara detail di bawah.

Ini hanya untuk keperluan pribadi saja, dan hanya untuk mempercantik tampilan.

Membuat Animasi Bergelombang "Wave" di Bagian Footer

Dan, berikut adalah langkah-langkah cara membuat animasi gelombang "wave" untuk footer:

Siapkan Elemen HTML untuk bagian Footer

Misalnya, Sobat dapat menggunakan elemen <footer> dengan ID "footer" seperti berikut:

<footer id="footer">

  <!-- Konten footer -->

</footer>

Gunakan CSS untuk Mengatur Tampilan Footer dan Membuat Animasi Gelombang

Berikut adalah contoh CSS untuk membuat animasi gelombang menggunakan keyframes:

/* Mengatur tampilan footer */
#footer {
  background-color: #f1f1f1;
  padding: 20px;
}

/* Membuat animasi gelombang */
@keyframes wave-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Menggunakan animasi gelombang pada footer */
#footer {
  animation: wave-animation 2s infinite;
}

Dalam contoh di atas, animasi gelombang menggunakan keyframes dengan nama "wave-animation". Pada setiap frame animasi (0%, 50%, dan 100%), kita mengubah transform elemen footer untuk menerapkan efek pergeseran vertikal menggunakan translateY(). Nilai -10px pada frame 50% berarti footer akan sedikit naik selama setengah durasi animasi, kemudian kembali ke posisi awal.

Terakhir, sisipkan CSS di atas ke dalam bagian <style> dari halaman HTML sobat., atau letakkan dalam file eksternal CSS yang kemudian dihubungkan ke halaman HTML.

Penutup

Dengan langkah-langkah di atas, sobat sekarang memiliki animasi gelombang yang sederhana pada bagian footer. Sobat juga dapat menyesuaikan gaya dan waktu animasi sesuai dengan kebutuhan sobat dengan mengubah nilai-nilai pada CSS.

Nah, bagaimana menurut sobat ... Cukup mudah bukan?

Demikianlah tutorial yang bisa mimin bagikan pada kesempatan kali ini, cara membuat animasi bergelombang "wave" pada bagian footer. Semoga bermanfaat dan selamat mencobanya!

Artikel ini pertama kali tayang di pedia lover pada rabu, 05/07/2023.