Tuesday

Animasi Ala Profile

dengan asumsi bahwa kemarin sudah punya jquery-1.6.2.min.js
dan juga sudah ada jquery-ui-1.8.16.custom.css
serta jquery-ui-1.8.16.custom.min.js

sedot ini dulu:
taruh di folder js

letakkan ini di antara <head> dan </head>
<script type="text/javascript">
$(document).ready(function(){
 $("#da-vinci-carousel").CloudCarousel(
  {
   reflHeight: 30,
   reflGap:0,
   xPos: 495,
   yPos: 25,
   speed:0.2,
   FPS:30,
   autoRotate: 'left',
   autoRotateDelay: 3000,
   mouseWheel:true
  }
 );
});
</script>

taruh ini di <body>
<div id="da-vinci-carousel" style="width:990px; height:450px; overflow:hidden;">
<img class="cloudcarousel" src="images/gambar1.jpg">
<img class="cloudcarousel" src="images/gambar2.jpg">
<img class="cloudcarousel" src="images/gambar3.jpg">
<img class="cloudcarousel" src="images/gambar4.jpg">
<img class="cloudcarousel" src="images/gambar5.jpg">
</div>

penjelasan:
untuk skrip:
reflHeight = tingginya bayangan
reflGap = celah antara gambar dan bayangan
xPos, yPos = koordinat titik tengah rotasi gambar
speed = kecepatan putaran dalam detik
FPS = frame per second
autoRotate = arah putaran
autoRotateDelay = jeda antara putaran
mouseWheel = gambar berputar bila roda di mouse diputar

untuk body div
div id="da-vinci-carousel" <= ini namanya identifier
style = tentukan ukuran bidang animasi, lebar 990px, tinggi 450px
overflow:hidden = kalau lewat dari bidang itu, gambarnya terpotong
img class="cloudcarousel" <= identifier untuk image

ICC

Animasi Ala Profile Rating: 4.5 Diposkan Oleh: Miftah Budi

0 komentar:

Post a Comment