Membuat Animasi Gelombang (Wave Animation) Dengan CSS3

Labkom99.com – Membuat Animasi Gelombang (Wave Animation) Dengan CSS3. Wave animation atau Efek animasi gelombang css3 yang dipelajari pada kemsempatan ini dibuat dengan menggunakan animasi CSS3 dan gambar png. Dalam efek animasi gelombang ini, 3 gambar garis png akan menghasilkan animasi bergelombang dengan menggunakan sedikit kode CSS. Sehingga menghasilkan efek animasi garis dan gelombang yang realistis.

Css3 memiliki wave animation dan efek gelombang yang dinamis. Karena css3 memiliki efek transisi dan animasi, sekarang sangat mudah menggunakan css3 untuk mencapai efek gelombang dinamis. Tidak masalah menggunakan transformasi secara langsung, sehingga translateX menghasilkan offset untuk terus mencapai efek dinamis. Lebih sederhana untuk diterapkan daripada menggunakan flash. Dan halamannya juga relatif lebih ramah.

Alat / Bahan Baku

Notepad

Bisa menggunakan tools web programming lain

Perhatian

Wave animation merupakan suatu afek animasi yang difungsikan untuk mempercantik halaman web. Seperti halnya yang labkom99 jabarkan pada kesempatan kali ini. Dengan membuat animasi gelombang dengan CSS3, perlu adanya kemampuan untuk mendesain dan memiliki imajinasi yang tinggi agar menghasilakn sesuatu yang unik dan menarik.

Namun jangan kuatir labkom99 sudah banyak memiliki contoh cara membuat efek animasi yang dapat di pelajari seperti, Membuat Animasi Teks Dengan HTML5 Dan Canvas, Membuat efek animasi teks keren menggunakan HTML5, untuk mebuat animasi pada teks. Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas animasi untuk pergerakan kursor. Dan 30 Efek Animasi Mouse Hover Tombol Button Keren Dengan HTML Dan CSS3untuk membuat tombol Button keren.

Metode / Langkah

Untuk membuat animasi gelombang atau wave animation membetuhkan beberapa trik CSS3 yang sangat sederhana. Sehingga mampu menghasilkan efek gelombang yang dibuat degan gambar png seperti yang sudah di jelaskan diatas. Berikut kode CSS3nya :

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #b7977b 20%, #036564 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

Dan untuk Struktur HTML dari efek animasi gelombang garis CSS3 adalah sebagai berikut:

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner bgTop">
    <div class="wave waveTop" style="background-image: url('img/wave-top.png')"></div>
  </div>
  <div class="waveWrapperInner bgMiddle">
    <div class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></div>
  </div>
  <div class="waveWrapperInner bgBottom">
    <div class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></div>
  </div>
</div>

Dan Demo Membuat Animasi Gelombang (Wave Animation) Dengan CSS3

bisa dilihat seperti di bawah ini :