Membuat Animasi Teks WordPress Dengan Javascript (Efek 14)

2 March 2020
Membuat Animasi Teks Wordpress

Membuat Animasi Teks WordPress Dengan Javascript (Efek 14). Apabila Sobat ingin mempercantik tampilan website dengan animasi teks 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.

Ada 2 cara agar bisa membuat animasi di web yaitu dengan CSS atau JavaScript. Jika disuruh memilih maka perlu untuk menyesuaikan dengan kebutuhan efek yang ingin dibuat.

Apabila ingin efek yang sederhana atau transisi satu kali maka bisa menggunakan CSS. Namun apabila ingin yang lebih komplek seperti efek memutar, memantul, berhenti, jeda, dll maka bisa menggunakan JavaScript.

Membuat animasi menggunakan JavaScript memang terkesan lebih kompleks dan rumit jika dibandingkan menggunakan CSS, namun dengan JavaScript akan memberikan lebih banyak pilihan efek yang bisa dipilih.

Animasi Teks WordPress Dengan Javascript

Untuk membuat animasi teks javascript wordpress maka langkah pertama silakan pasang script berikut ini

<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('.ml14 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml14 .line',
    scaleX: [0,1],
    opacity: [0.5,1],
    easing: "easeInOutExpo",
    duration: 900
  }).add({
    targets: '.ml14 .letter',
    opacity: [0,1],
    translateX: [40,0],
    translateZ: 0,
    scaleX: [0.3, 1],
    easing: "easeOutExpo",
    duration: 800,
    offset: '-=600',
    delay: (el, i) => 150 + 25 * i
  }).add({
    targets: '.ml14',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Kemudian kedua copy paste html berikut ini

<h1 class="ml14">
  <span class="text-wrapper">
    <span class="letters">Sharing Teknologi - Berbagi Ilmu Tentang Teknologi</span>
    <span class="line"></span>
  </span>
</h1>

Dan terakhir copy dan paste CSS berikut

.ml14 {
  font-weight: 200;
  font-size: 3.2em;
}

.ml14 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml14 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #fff;
  transform-origin: 100% 100%;
  bottom: 0;
}

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

Maka hasilnya kurang lebih akan seperti ini

Sharing Teknologi - Berbagi Ilmu Tentang Teknologi

cukup mudah bukan?.

Terima kasih telah mengunjungi website kami.

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

Postingan Terkait

Komentar

Leave a Comment

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

Scroll to Top