Technology

Slider Tampil Lebih Cantik dengan Efek Animasi

 

Loading...

Bagi programmer yang ingin menambahkan animasi pada komponen slider dari website yang sedang anda kerjakan, maka source code berikut mungkin bisa anda manfaatkan. Source code berikut menggunakan logika yang sederhana. Yaitu setiap pergantian slider akan menambahkan animasi berupa gambar bergerak agar kelihatan lebih interaktif.

Plugin yang saya gunakan adalah jQuery, jQuery Cycle dan jQuery Easing. jQuery Cycle sebagai slider dan jQuery Easing sebagai efek animasinya. Langsung saja, berikut prakteknya;

File index.html

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style>
#outer_slider{width:960px;height:380px;}
.inner_slider{width:960px;height:380px;}
</style>
</head>
<body>
<center>
<div id="outer_slider">
<div>
<div data-function='animate1'>
<img src="images/bg3.jpg" />
<div>
<img src="images/01.png" style="position: absolute;z-index: 10;top: -240px;right: 80px;opacity:0"/>
<img src="images/02.png" style="position: absolute;z-index: 10;top: -75px;left: 125px;opacity:0"/>
<img src="images/033.png" style="position: absolute; z-index: 10; top: 280px; left: -270px; opacity: 1;" />
</div>
</div>
<div data-function='animate2'>
<img src="images/bg4.jpg" />
<div>
<img src="images/01.png" style="position: absolute;z-index: 10;top: -240px;right: 80px;opacity:0"/>
<img src="images/02.png" style="position: absolute;z-index: 10;top: -75px;left: 125px;opacity:0"/>
<img src="images/033.png" style="position: absolute; z-index: 10; top: 280px; left: -270px; opacity: 1;" />
</div>
</div>
<div data-function='animate3'>
<img src="images/bg5.jpg" />
<div>
<img src="images/01.png" style="position: absolute;z-index: 10;top: -240px;right: 80px;opacity:0"/>
<img src="images/02.png" style="position: absolute;z-index: 10;top: -75px;left: 125px;opacity:0"/>
<img src="images/033.png" style="position: absolute; z-index: 10; top: 280px; left: -270px; opacity: 1;" />
</div>
</div>
</div>
<div>

</div>
</div>
</center>
<script src="js.js"></script>
</body>
</html>

Perhatikan pada tag:

<div data-function=’animate1′>

Attribute data-function adalah fungsi yang akan di-load saat slider sedang menambilkan banner. Di sini nantinya Anda bisa memberi efek yang berbeda-beda untuk setiap slider. Perhatikan pada file javascript berikut.

File js.js

$('#outer_slider').ready(function() {
$('.inner_slider').cycle({
fx: 'scrollHorz',
easing: 'easeInOutBack',
timeout: 0,
speed: 750,
slideExpr: '.items',
slideResize: 0,
after: after_slider_animate,
before: before_slider_animate,
cleartype: true,
cleartypeNoBg: true,
pager: '.nav',
pagerAnchorBuilder: function(idx, slide) {
return '< button >'+ ( idx + 1 ) +'< / button >';
}
});

Berikut adalah fungsi untuk mendeklarasi slider. Dengan event ketika slider berjalan akan mengaktifkan fungsi “after_slider_animate”

function after_slider_animate(currSlideElement, nextSlideElement, options, forwardFlag) {
//$(countDisplay).html(opts.nextSlide + " of " + opts.slideCount + "images");
var index = options.nextSlide;
if(index==0)index=options.slideCount;
index = index-1;
var parent = $('#outer_slider .inner_slider .items').eq(index).attr('data-function');
runFunction(parent);

}
});

function runFunction(nama)
{
window[nama]();
}

function animate1(){
var parent = $('#outer_slider').find('.inner_slider').find('.items').eq(0).find('.parts');
parent.find('img').eq(0).css({
'position': 'absolute',
'z-index': 10,
'top': '-240px',
'right': '80px',
'opacity': 0
});
parent.find('img').eq(1).css({
'position': 'absolute',
'z-index': 10,
'top': '-75px',
'right': '125px',
'opacity': 0
});
parent.find('img').eq(2).css({
'position': 'absolute',
'z-index': 10,
'top': '280px',
'left': '-270px',
'opacity': 0
});
parent.find('img').eq(0).animate({
opacity: 1,
top: '+=360'
},400);
parent.find('img').eq(1).animate({
opacity: 1,
top: '+=170'
},1000);
parent.find('img').eq(2).animate({
opacity: 1,
left: '+=450'
},1600);
}
function animate2(){
var parent = $('#outer_slider').find('.inner_slider').find('.items').eq(1).find('.parts');
parent.find('img').eq(0).css({
'position': 'absolute',
'z-index': 10,
'top': '-240px',
'right': '80px',
'opacity': 0
});
parent.find('img').eq(1).css({
'position': 'absolute',
'z-index': 10,
'top': '-75px',
'right': '125px',
'opacity': 0
});
parent.find('img').eq(2).css({
'position': 'absolute',
'z-index': 10,
'top': '280px',
'left': '-270px',
'opacity': 0
});
parent.find('img').eq(0).animate({
opacity: 1,
top: '+=360'
},400);
parent.find('img').eq(1).animate({
opacity: 1,
top: '+=170'
},1000);
parent.find('img').eq(2).animate({
opacity: 1,
left: '+=450'
},1600);
}
function animate3(){
var parent = $('#outer_slider').find('.inner_slider').find('.items').eq(2).find('.parts');
parent.find('img').eq(0).css({
'position': 'absolute',
'z-index': 10,
'top': '-240px',
'right': '80px',
'opacity': 0
});
parent.find('img').eq(1).css({
'position': 'absolute',
'z-index': 10,
'top': '-75px',
'right': '125px',
'opacity': 0
});
parent.find('img').eq(2).css({
'position': 'absolute',
'z-index': 10,
'top': '280px',
'left': '-270px',
'opacity': 0
});
parent.find('img').eq(0).animate({
opacity: 1,
top: '+=360'
},400);
parent.find('img').eq(1).animate({
opacity: 1,
top: '+=170'
},1000);
parent.find('img').eq(2).animate({
opacity: 1,
left: '+=450'
},1600);
}

Dari JavaScript di atas, yang perlu diperhatikan adalah fungsi “window[nama]();”. Fungsi tersebut adalah untuk menjalankan fungsi berdasarkan string. String sendiri berasal dari nilai attribute data-function dari setiap DOM pada container slider. Jadi di setiap element slider akan memiliki fungsi sendiri sendiri untuk animasinya, sesuai dengan isi attribute data-function. Semoga bermanfaat. ;-)

Loading...

4 komentar

  • Musa
    15 Februari 2013 - pukul 9:36

    Bang, contohnya kurang jelas. Ada file yang bisa instan yang bisa langsung berjalan dan bisa langsung didownload gak?

    • 18 Februari 2013 - pukul 21:36

      segera saya upload untuk file examplenya, ditunggu ya :)

  • 16 Februari 2013 - pukul 18:17

    bang bro kalau syntaks ini harus di download nggak?
    kalau offline bagaimana?
    apa bisa file-file ini di pindah ke localhost?

    ditunggu jawabannya bang bro tks.

    • 18 Februari 2013 - pukul 21:39

      Kalau mau di offlinekan juga bisa. Untuk yang sekarang itu saya langsung mengambil plugin dari online. kalau mau di offlinekan tinggal di download file lib dari plugin tersebut dan tinggal di arahkan saja. :)

      misal di:

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *