Wave Animation Teks Keren Dengan HTML5 Dan SVG

by -9 views
Wave Animation Teks Keren Dengan HTML5 Dan SVG

Labkom99.com – Ini adalah wave animation teks keren berdasarkan HTML5 SVG. Efek animasi gelombang teks ini menggunakan SVG mask dan CSS blending mode pada teks untuk menciptakan efek gerak gelombang. Hasilnya seperti ada lautan pada teks, dan efeknya sangat keren.

Alat / Bahan Baku

Notepad

Bisa menggunakan tools web programming lain

Perhatian

Membuat Wave Animation teks keren Dengan menggunakan notepad untuk menuliskan kode HTML dan SVG. Cukup dengan menuliskan beberapa function HTML sehingga dapat membuat animasi teks keren ini. 

Semua format penulisan kodennyapun mayoritas hanya mengggunakan tag SVG.

Beberapa artikel labkom99 juga sudah menuliskan beberapa contoh membuat efek animasi gelombang keren seperti : Membuat Animasi Gelombang (Wave Animation) Dengan CSS3 dan Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3. Hasilnya memang banyak memiliki kemiripan namun dibuat dengan Teknik yang berbeda.

Metode / Langkah

Dalam membuat efek gelombang Teks Keren Dengan HTML5 Dan SVG

buka terlebih dahulu Notepad untuk menuliskan struktur HTML seperti pada dibawah ini :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="450px" height="240px" xml:space="preserve">
<defs>
<pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
<path fill="#000" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
</pattern>

<text id="text" transform="translate(2,116)" font-family="'Cabin Condensed'" font-size="104.047">LABKOM99</text>

<mask id="text-mask">
<use x="0" y="0" xlink:href="#text" opacity="1" fill="#ffffff"/>
</mask>

<g id="eff">
<use x="0" y="0" xlink:href="#text" fill="#a2a3a5"/>

<rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" x="-300" y="50" width="1200" height="120" opacity="0.3">
<animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="2s"/>
</rect>
<rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="45" width="1600" height="120" opacity="0.3">
<animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="3s"/>
</rect>

<rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="55" width="800" height="120" opacity="0.3">
<animate attributeType="xml" attributeName="x" from="-200" to="0" repeatCount="indefinite" dur="1.4s"/>
</rect>
<rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="55" width="2000" height="120" opacity="0.3">
<animate attributeType="xml" attributeName="x" from="-500" to="0" repeatCount="indefinite" dur="2.8s"/>
</rect>
</g>
</defs>

<use xlink:href="#eff" opacity="0.9" style="mix-blend-mode:color-burn"/>

</svg>

Dalam SVG, elemen <pattern> digunakan sebagai pola gerakan gelombang. <text> Elemennya adalah teks. g#eff menggunakan 4 persegi panjang dalam grup sebagai lapisan mask teks, dan mode pencampuran CSS ke color-burn.

Baca Juga : Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG

Demo Wave Animation Teks Keren Dengan HTML5 Dan SVG seperti dibawah ini :

Wave Animation Teks Keren Dengan HTML5 Dan SVG

Baca Juga : Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

Dan source code lengakap Wave Animation Teks Keren Dengan HTML5 Dan SVG bisa di DOWNLOAD di link tersebut.

Download      |    Demo

About Author: labkom99

Gravatar Image
Labkom99 merupakan salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!

Leave a Reply

Your email address will not be published. Required fields are marked *