Animasi Image Menggunakan CSS dan jQuery

23 04 2010

Bagi anda yang sudah mahir membuat animasi flash, mungkin hal ini bukan menjadi sebuah masalah, tapi bagi saya yang awam, rasanya ribet harus membuat animasi flash, apalagi di linux belum ada hee… trus di browser juga harus terinstall plugin flash player, cape deh…

Solusinya kita bisa memanfaatkan kemampuan jQuery dan sedikit CSS, logikanya kita tinggal membuat sebuah ruang (div) untuk melakukan proses animasi ini, dalam ruang itulah kita ganti gambar secara bergantian dengan menggunakan jQuery, lebih tepatnya menampilkan satu gambar dan menyembunyikan yang lain…

Berikut ini script css untuk bagian utamanya, silahkan disesuaikan:

<style type="text/css">
*{outline: none;}
img {border: 0;}
.containerz {
width: 586px; /* lebar kotak luar */
padding: 0;
margin: 0 auto;
margin-left:102px; /* biar gak mepet kiri */
height: 180px; /* tinggi */
}
.folio_block {
margin: 0px;
}

Sedangkan CSS untuk bagian gambarnya adalah sebagai berikut:

/*--Main Container--*/
.main_view {
float: left;
position: relative;

}

/*--Window/Masking Styles--*/
.window {
height:180px;    width: 586px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
width: 586px;
}
.image_reel img {float: left;
width: 586px;
}

CSS dibawah ini digunakan untuk paging (halaman), saya berinama pagingz karena di program utama ada juga paging untuk berita:

/*--pagingz Styles--*/
.pagingz {
position: absolute;
left: 2px;
bottom: 0px;
z-index: 100;
text-align: center;
line-height: 22px;
background: url(pagingz_bg2.png) no-repeat;
display: none;
}
.pagingz a {
font-family: helvetica;
font-size: 9px;
padding: 1px 4px 1px 4px;
text-decoration: none;
color: #fff;
background: #000;
border: 1px solid #fff;
}
.pagingz a.active {
font-weight: bold;
background: #fdab00;
border: 1px solid #fff;
}
.pagingz a:hover {font-weight: bold;}
</style>

Dibagian body inilah anda menempatkan image yang akan digeser, ingat bahwa proses animasi ini sebenarnya adalah dengan menampilkan sebuah image disuatu tempat kemudian image yang lainnya disembunyikan, kemudian image yang ditampilkan diganti sehingga seolah2 image tersebut bergeser 😀

<body>

<div class='containerz'>

<div class='folio_block'>

<div class='main_view'>

<div class='window'>
<div class='image_reel'>

<a href="#"><img src="gambar_1.jpg" alt="" /></a>
<a href="#"><img src="gambar_2.jpg" alt="" /></a>
<a href="#"><img src="gambar_3.jpg" alt="" /></a>
<a href="#"><img src="gambar_4.jpg" alt="" /></a>
</div>
</div>
<div class='pagingz'>

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>

</div>

</div>

Jangan lupa untuk memanggil jQuery

<script type="text/javascript" src="jquery-latest.js"></script>

Inilah script utama yang digunakan untuk membuat animasi gambar slide

<script type="text/javascript">

$(document).ready(function() {

$(".pagingz").show();
$(".pagingz a:first").addClass("active");

var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth; 

$(".pagingz a").removeClass('active');
$active.addClass('active'); 

$(".image_reel").animate({
left: -image_reelPosition
}, 600 );

};

rotateSwitch = function(){
play = setInterval(function(){
$active = $('.pagingz a.active').next();
if ( $active.length === 0) {
$active = $('.pagingz a:first');
}
rotate();
}, 7000);
};

rotateSwitch(); 

$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});

$(".pagingz a").click(function() {
$active = $(this);

clearInterval(play);
rotate();
rotateSwitch();
return false;
});

});
</script>

Diambil dari berbagai sumber, semoga bermanfaat 😀


Aksi

Information

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s




%d blogger menyukai ini: