Animasi Teks Berputar Dengan JQuery

Kelas Mat - Melalui blog kelasmat ini kemarin saya telah menuliskan sebuah trik untuk membuat animasi Teks Seperti Bernafas dengan CSS dan sebuah script yang bernama splitting.js dengan judul artikelnya adalah Animasi Teks Bernafas dengan CSS. Nah masih dalam konteks yang sama, yaitu tentang animasi teks, pada kali ini saya juga akan membuat sebuah animasi teks Berputar dengan Memanfaatkan Jquery.

Jadi Pastikan dalam blog kamu sudah terpasang Jquery nya berapapun versinya tidak masalah namun lebih baik lagi menggunakan jquery yang terbaru.

Cara Membuat Animasi Teks Berputar dengan CSS

Pertama-tama tentu kamu harus sudah berada pada editor template blogger kamu, kemudian baru Kita tentukan dulu gaya/style dari teks yang akan kita beri efek berputarnya. Misalnya h1 atau h2 atau yang lainnya dengan cara menambahkan kode berikut ini sebelum kode ]]></b:skin> :

Kode CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);
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: 0em;
  opacity: 0.8;
  transform: rotateX(-90deg);
  animation: letterDrop 1s ease 1 normal forwards;
}
@keyframes letterDrop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 3em;
        transform: rotateX(-360deg);
    }
    100% {
        opacity: 1;
        top: 3em;
        transform: rotateX(360deg);
    }
}
span:nth-child(2n) {
  color: #663399;
}

Kode Scriptnya

Setelah itu kita Buat scriptnya seperti di bawah ini. Copy dan Pastekan/Letakkan script berikut ini sebelum kode </body> :

(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();

Lihat tag h1 yang saya beri tanda kuning di atas, itu tag yang akan kita beri efek berputar. Jadi Sekarang kita bisa gunakan teks berputarnya pada tag html h1 misalnya seperti ini :

<h1>Kelasmat.Com</h1>

Jika langkah-langkah tadi tidak ada yang salah seharusnya hasil yang tadi kamu buat akan seperti di bawah ini:

Kelasmat.com
Semoga Bermanfaat dan jangan lupa jika artikel ini berguna, silahkan share keteman-teman kamu melalui tombol sosmed di bawah ini.
NB: Untuk melihat kembali Efek Animasi teks Berputar dengan Jquery ini, silahkan Lakukan refresh halaman ini dengan menekan tombol pada keyboard kamu.
Untuk Demo penerapannya kedalam blog untuk animasi judul blog, silahkan kunjungi halaman ini. Perhatikan Judul/Header Blognya.
{getButton} $text={Demo} $icon={preview}