Membuat Text Animasi Dengan Javascript (Efek 2)

Membuat Text Animasi Dengan Javascript (Efek 1). Apabila kalian ingin mempercantik tampilan website dengan animasi text dengan hanya bermodal Javascript . Maka salah satu style ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki.

 Kalian bisa mengganti atau mencustom warna, ukuran font, jenis font, dll.

JavaScript merupakan suatu bahasa pemrograman tingkat tinggi dan juga dinamis. Dalam internet JavaScript sangat populer dan bisa bekerja di sebagian besar penjelajah web populer seperti Mozilla Firefox, Google Chrome, Internet Explorer, Netscape dan Opera. Kode JavaScript bisa disisipkan ke dalam halaman web menggunakan tag SCRIPT.

Sebelumnya kami menucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Membuat Animasi Text

Pertama Pasang script berikut

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml2');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml2 .letter',
    scale: [4,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 950,
    delay: (el, i) => 70*i
  }).add({
    targets: '.ml2',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Kedua copy paste html berikut ini

<h3 class="ml2">Visit Klaten</h3>

Terakhir Copy dan paste CSS berikut

.ml2 {
  font-weight: 900;
  font-size: 3.5em;
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
}

Dan hasilnya kurang lebih akan seperti ini

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.