Catatan Hadi : Membuat Animasi Rotator Pada Gambar

Animasi Rotator merupakan animasi berputar pada website, biasanya teknik ini digunakan untuk membuat animasi pada gambar, dimana gambar tersebut akan berganti-ganti sendiri, gambar yang didepan akan pindah kebelakang dan seterusnya. Contohnya saat anda bermain kartu, dan membalikkan kartu yang ada didepan anda kepaling belakang, dan saat sudah dipindahkan akan muncul kartu baru. Begitu pula pada teknik animasi ini.

Untuk membuatnya,
siapkan beberapa gambar yang ingin ditampilkan.
setelah itu buatlah program untuk menampilkan gambar tersebut.

<html>
<head>
 <title> Algoritma-cyber.blogspot.com - Rotator </title>
</head>
<body bgcolor="black">
<center>
<h2><font color="white">Membuat Animasi Rotator Pada Gambar</font></h2>
<div class="putar">
 <img src="gambar/248600_4264140608290_1123963134_n.jpg" width="300">
 <img src="gambar/php2.jpg" width="300">
 <img src="gambar/384675_2374782615521_269187359_n.jpg" width="300">
 <img src="gambar/254141_1739543054929_2339128_n.jpg" width="300">
</div>
</body>
</html>

jika anda jalankan program tersebut,
akan menghasilkan output seperti gambar dibawah ini

Untuk membuat animasinya,
anda membutuhkan 2 buah library jquery, yaitu jquery,js dan jquery.cycle.all.min.js
jika anda belum memilikinya, bisa anda download melalui link dibawah ini

DOWNLOAD JQUERY.JS
DOWNLOAD JQUERY.CYCLE.ALL.MIN.JS

Jika sudah anda download,
tambahkan skript berikut pada program anda, untuk memanggil jquery tersebut.
letakaan tepat dibawah kode <head>

<script type="text/javascript" src="jquery/jquery.js"></script>
 <script src="jquery/jquery.cycle.all.min.js" type="text/javascript"></script>

setelah itu tambahakn javaskript tepat dibawah kode tersebut.

<script type="text/javascript">
 $(document).ready(function() {
  $(".putar").cycle({
   fx: 'shuffle'
  });
 });
</script>

sekarang coba anda jalankan program anda,
jika berhasil akan menghasilkan output sperti gambar dibawah ini

lihatlah gambar yang sebelumnya ada 4 gambar, sekarang tampil hanya satu gambar. Gambar tersbut tidaklh hilang tetapi ada dibelakang gambar pertama, seperti tumpukan kartu. dan jika animasi yang anda buat berhasil. gambar tersebut akan pindah kebelakang, dan akan muncul gambar baru. seperti gambar dibawah ini

tampilan diatas mungkin kurang rapih,
untuk itu tambahkan kode css ini tepat diatas kode </head>

<style type="text/css">
 .putar { 
  bottom: 0; left: 500; 
 }      
 </style>

sehingga jika anda jalankan programny lagi,
akan keluar output seperti gambar dibawah ini

Catatan Hadi

Pages

Sabtu, 09 Maret 2013

Membuat Animasi Rotator Pada Gambar

Tidak ada komentar:

Posting Komentar