Animasi Teks Berputar Dengan JQuery - Kelas Math – Be Smart Ya kelas Math

Enter your keyword

Wednesday, January 1, 2020

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.
Animasi Teks Berputar Dengan 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
f5
pada keyboard kamu.
Untuk Demo penerapannya kedalam blog untuk animasi judul blog, silahkan kunjungi halaman ini. Perhatikan Judul/Header Blognya.

No comments:

Post a Comment

Silahkan Berkomentar dengan memperhatikan beberapa point dibawah ini.

► Berkomentarlah sesuai topik
► Jangan sungkan untuk bertanya
► Saya sangat menghargai komentar anda.
► Di mohon untuk tidak menautkan link aktif , Karena link anda bisa jadi dianggap sebagai spam