Membuat Animasi Teks dengan jQuery

30/10/2017    Risman Hakim    1132     Website

Pada kesempatan kali ini saya akan berbagi tutorial mengenai bagaimana cara membuat animasi teks dengan jQuery. Mungkin sebelmnya kalian telah mencoba berbagai cara untuk membuat animasi teks, bisa dengan CSS3 javascript ataupun yang lain nya. Nah, berikut ini tidak kalah serunya, kita akan membuat animasi dengan bantuan jQuery. itung-itung menambah referensi dalam membuat animasi teks yah :) . Baik langsung saja simak langkah-langkah nya berikut ini.

Seperti pada judulnya, kita akan membuat animasi teks, tentu kita butuh objek teks sebagai animasinya, untuk itu silahkan kalian bisa ketikan kode HTML5 berikut ini.

<body>
    <h1>DUMETSCHOOL.</h1>
</body>

Setelah membuat kode sederhana seperti diatas, selanjutnya kita akan desain tampilan teks menjadi sedikit lebih menarik lagi untuk kita lihat, berikut kode CSS3 untuk desain teks animasinya.

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: #fff;
  text-align: center;
}

h1 {
  margin: 0;
  padding: 0;
  font-family: 'Raleway';
  font-weight: 400;
  font-size: 3em;
  color: #9A12B3;
}
.letterDrop {
  position: relative;
  top: 0;  
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  opacity: 0.8;
  transform: rotateX(-90deg);
  animation: letterDrop 1.2s ease 1 normal forwards;
}

@keyframes letterDrop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 3.75em;
        transform: rotateX(-360deg);
    }
    100% {
        opacity: 1;
        top: 4.50em;
        transform: rotateX(360deg);
    }
}


span:nth-child(2n) {
  color: #663399;
}

Selanjutnya yang palng utama dalam tutorial ini adalah kita wajib menuliskan kode jQuery berikut ini, supaya animasi teks nya bisa berjalan dengan baik.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
;(function($) {
  $.fn.letterDrop = function() {
  return this.each( function() {
  var obj = $( this );
 
  var drop = {
    arr : obj.text().split( '' ),
    
    range : {
      min : 1,
      max : 9
    },
    
    styles : function() {
      var dropDelays = '\n', addCSS;
      
       for ( i = this.range.min; i <= this.range.max; i++ ) {
         dropDelays += '.ld' + i + ' { animation-delay: 1.' + i + 's; }\n';  
       }
      
        addCSS = $( '<style>' + dropDelays + '</style>' );
        $( 'head' ).append( addCSS );
    },
    
    main : function() {
      var dp = 0;
      obj.text( '' );    
      $.each( this.arr, function( index, value ) {
        dp = dp.randomInt( drop.range.min, drop.range.max );
        if ( value === ' ' )
          value = '&nbsp';
          obj.append( '<span class="letterDrop ld' + dp + '">' + value + '</span>' );
      });
    }
  };
   
  Number.prototype.randomInt = function ( min, max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
  };
 
  drop.styles();
  drop.main();
  });

};
}(jQuery));
$( 'h1' ).letterDrop();
</script>

Jika telah selesai semua kode diatas diketikan, simpan filenya kemudian silahkan kalian buka pada broweser masing-masing dan lihat hasilnya, maka ketika pertama kali browser membuka halaman akan terlihat animasi teks yang turun dari atas browser.
Baik, cukup sekian tutorial kali ini, semoga bermanfaat dan bisa menambah referensi. Bagi kalian yang ingin membuat animasi teks sederhana bisa mengikuti tutorial mengenai Cara Membuat Animasi Teks dengan CSS3. Selamat mencoba.

jQuery, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More