Wave Animation Teks Keren Dengan HTML5 Dan SVG

  • Whatsapp
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

Read More

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

Related posts

Leave a Reply

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