Skip to main content

Membuat Animasi Gelombang dengan kode SVG dan CSS

Membuat Animasi Gelombang dengan kode SVG dan CSS

Beberapa tahun lalu saya merasa takjub melihat Template buatan Master disana karena terdapat style gelombang pada bagian header template buatan dia.

"Keren, bagaimana cara dia membuatnya?" Pikir saya.

"Ah masa bodo lah, nanti juga ada yang share caranya!" Ucap saya dalam hati.

Wkwk sudah seperti Cerpen aja ya guys ada dialognya, hehe.

Dan benar saja, tak lama kemudian Sofyan berbagi kode serupa seperti yang dibuat Master tersebut.

Ya intinya, cukup pasang kode SVG dan CSS berikut ini maka jadilah style Animasi Bergelombang.

Kode ini aslinya sudah terkombinasikan dengan header tapi saya pisahkan dan mengambil bagian kode animasinya saja.

Meskipun belum mencobanya tapi saya rasa kode ini dapat dipasang dimana saja. Dari sebelumnya menyatu dengan header, dengan memisahnya begini saya beranggapan mungkin pemasangannya akan lebih mudah alias tidak mempengaruhi kode lain dimana ia disandingkan nantinya. Ingin dipasang di header misalnya, maka pasang saja kode ini dibawah header maka headernya akan bergelombang, tapi tentu saja ini masih teori soalnya saya belum mencobanya.

Namun buat agan yang menginginkan kode aslinya silakan ambil di blog Sofyan DISINI

Kode CSS:

<style>
.gelombang {
color: white;
text-align: center;
background: linear-gradient(60deg, #186857 0%, #25a186 100%);
}
.waves {
position: relative;
width: 100%;
height: 5vh;
margin-bottom: -7px; /*Fix for safari gap*/
min-height: 150px; /*Tinggi ombak*/
max-height: 150px;
}
/* Animasinya */
.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);
}
}
</style>

Kode SVG:

<div class="gelombang">
<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="#ff0000" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="#0000ff" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="#25a186" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#186857" />
</g>
</svg> 
</div>

Hasilnya:


Warna ombaknya dapat diubah sesuai selera pada kode SVG bagian fill.

Bisa dengan kode warna HEX #ffffff atau gunakan kode warna RGB berurutan, ini kode warna putih rgb(255,255,255).

Dari RGB setelah ditambahi tingkat kecerahan 0.7 pada ujungnya maka akan menjadi RGBA, rgba(255,255,255, 0.7).

Tingkat kecerahan/transparancy paling gelap 0.1.

Gunakan kode warna berurutan untuk mendapatkan efek ombak yang halus.
rgba(255,255,255, 0.7)
rgba(255,255,255, 0.5)
rgba(255,255,255, 0.3)

Hasil menggunakan warna berurutan:

Tinggi gelombang 200 px Tinggi gelombang 30 px

Semoga bermanfaat!

Comments