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
0 komentar:
Posting Komentar - Back to Content