Progress Animation - jQuery Image Rotator

Blogger Tune-Up beberapa hari ini disibukan dengan pekerjaan yang menurut orang lain mungkin biasa-biasa saja tapi bagi penulis sangatlah sulit. Penulis sedang mengotak-atik kode template Blogger versi HTML5 untuk membuat template index video yang diambil dari YouTube, Vimeo dan MetaCafe namun karena nyubi akhirnya pusing sendiri. Disaat stress tingkat benua ini kemudian hiburan dengan berkunjung pada beberapa situs, sedang asyik-asyiknya berselancar tiba-tiba laptop kesayangan tertutup jendela perangkat lunak yang tidak dikenali, dan perangkat lunak ini bernama Trojan.

Laptop berbasis sistem operasi jendela ini akhirnya ngadat untuk diajak berselancar. Jika laptop tua ini dipasang antivirus, dijamin dan garansi 100% pasti super lambat kerjanya. Maka dicari-carilah perangkat antitrojan, antimalware dan lain sebagainya, namun karena trojan yang sedang berkembang biak ini tidak dikenali namanya, akhirnya minta bantuan situs penyedia Online Scanner milik BitDefender. Ketika halaman BitDefender Online Scanner dibuka, mata tertuju pada Animasi pada saat melakukan scanning sistem. Progress Animation yang ditampilkan sangat memikat mata dan memancing ide ini untuk membuatnya. Ide ini kemudian dicoba untuk direalisasikan menggunakan bantuan Plugin jQuery Rotate buatan Wroclaw dengan framework jQuery.

Demo Progress Animation - jQuery Image Rotator

Skenario HTML

Asumsikan bahwa kita akan menggunakan sebuah latar yang kita beri class layer, kemudian sebuah wadah animasi yang kita beri class scanning, sebuah wadah gambar yang kita beri class radar, dan sebuah gambar yang berisi gambar radar sebagai objek yang akan diputar, sehingga skenario HTML-nya seperti dibawah ini:

<div class="layer">
 <div class="scanning">
  <div class="radar">
   <img src="radar.png" id="putar"/>
  </div>
 </div>
</div>

Pada skenario diatas jika kita perhatikan maka tampilan memiliki 3 lapisan; layer, scanning, radar dan objek yang akan diputar berada didalam tag img yaitu radar.png.

Skenario CSS

Agar tampilan HTML menjadi lebih menarik dan terasa hidup, dibawah ini kita beri sentuhan kode CSS yang digunakan untuk mempengaruhi masing-masing lapisan. Lapisan layer diberi latar sebuah gambar layer.png dengan tinggi (height) 100%, lebar (width) 100%, jarak tepi (margin) atas bawah 0, dan jarak tepi kiri kanan otomatis agar posisi lapisan layer seimbang berada di tengah halaman. Wadah animasi yaitu lapisan scanning diatur dengan lebar dan tinggi sesuai ukuran gambar scanning.png. Dan lapisan wadah objek yang akan diputar yaitu radar juga diatur tinggi dan lebarnya sesuai dengan ukuran objek gambar radar.png.

.layer {
 background: url(layer.png) no-repeat center center transparent;
 height: 100%;
 margin: 0 auto;
 width: 100%;
}
.scanning {
 background: url(scanning.png) no-repeat scroll center center transparent;
 height: 354px;
 margin: 100px auto 0;
 width: 346px;
}
.radar {
 height: 222px;
 margin: 100px auto 0;
 position: relative;
 top: 58px;
 width: 222px;
 z-index: 0;
}

Skenario jQuery

Dibawah ini adalah kode jQuery untuk memutar objek gambar radar.png. Perhatikan pada skenarion HTML bahwa objek gambar pada kode <img src="radar.png" id="putar"/> diberi ID putar, maka pada kode jQuery yang harus di load untuk di putar adalah yang memiliki ID putar (#putar). Sebenarnya pengaturan plugin jQuery Rotate ini banyak, namun pada artikel ini kita hanya akan membahas satu fungsi saja. Untuk informasi pengaturan lainnya silahkan kunjungi halaman Dokumentasi jQuery Rotate.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotateCompressed.js"></script>
<script type="text/javascript"> 
$(window).load(function(){
 var rotation = function (){
    $("#putar").rotate({
    angle:0, 
    animateTo:360, 
    callback: rotation,
    easing: function(x, t, b, c, d) { return (t/d)*c ; }
  });
 }
 rotation();
});
</script>

Pengaturan jQuery Rotate

Dibawah ini sekilas penjelasan mengenai kode plugin jQuery Rotate yang digunakan pada demo.

$(window).load(function(){

Kode diatas untuk memulai animasi ketika window (halaman) di load

var rotation = function (){

Kode diatas untuk membuat variabel rotation yang berisi fungsi rotasi

$("#putar").rotate({

Objek dengan ID putar diputar

angle:0, 

dengan sudut mulai 0 derajat

animateTo:360, 

diberikan animasi sebanyak 360 derajat

callback: rotation,

ketika objek telah berputar sebanyak 360 derajat maka objek akan diputar ulang

easing: function(x, t, b, c, d) { return (t/d)*c ; }

fungsi easing untuk memberikan efek natural dan lembut, lebih jelasnya silahkan bukan komentasi

});

fungsi memutar objek ditutup

}

deklarasi variabel rotation ditutup

rotation();

efek rotation di aktifkan

});

fungsi animasi saat halaman dibuka ditutup

Unduh Progress Animation - jQuery Image Rotator

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Special thanks to BitDefender for image and idea, and big thanks to Wroclaw for jQuery Rotate Plugin...