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
Read More
Contoh Judul Skripsi Tentang Web Design Untuk Referensi
Mengapa Kesulitan Membuat CSS? Anda akan Tahu Setelah Membaca Ini!
7 Tools Pemrograman Berbasis Ai Selain ChatGPT Untuk Menulis Coding

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.

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