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 Wave Animation 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.

Komentar