Membuat Animasi Teks dengan jQuery

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.

30 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat