Home

Slideshow (sangat) Sederhana

Mari berdiskusi bersama kami di Group Facebook Kurung Kurawal

Banyak sekali plugin jQuery untuk membuat slideshow dengan animasi yang terbilang “wah”. Tetapi adakalanya, misalnya saya sendiri kemarin, membutuhkan animasi untuk slideshow yang ringan, dan (sangat) sederhana. Tentu saja, plugin yang “wah” untuk jQuery yang bertebaran di internet tersebut juga menyediakan opsi untuk hanya menggunakan animasi yang sederhana, tapi dalam kasus yang saya alami, saya harus membuat animasi tersebut dengan script yang sependek-pendeknya.

Berikut yang saya lakukan, untuk HTML, sederhana saja, hanya buat sebuah div sebagai container untuk gambar-gambar yang akan dijadikan sebagai slideshow. Slideshow nantinya hanya berupa animasi fading-out (gambar memudar) dan bergantian untuk setiap gambarnya, dengan durasi tampil sekian detik.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<html>
<head>
    <title>Animasi sangat sederhana</title>
    <style type='text/css'>
    #slideshow img
    {
        position: absolute;
        left: 0;
        top: 0;
    }
    </style>
 
    <!--jquery, bisa didownload di jquery.com
    // atau ambil dari google CDN (seperti dibawah)-->
    <script type='text/javascript'
        src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'>
    </script>
 
    <!--script animasi-->
    <script type='text/javascript'>
 
    // Fungsi yang menjadi inti dari script animasi ini
    function simpleSlideshow(slideContainer, duration)
    {
        // gambar/foto yang akan dianimasikan
        // adalah child (anak) pertama dari container yang digunakan
        var currentSlide = $('img:nth-child(1)', slideContainer);
 
        // slide tersebut akan dimodifikasi sedemikian rupa
        $(currentSlide)
        .css({
            opacity: 0 // buat opacity-nya menjadi 0, sehingga tidak terlihat (transparan)
        })
        // appendTo akan membuat anak pertama menjadi anak terakhir,
        // sehingga akan berada dibagian paling depan.
        // namun meskipun berada dipaling depan,
        // tidak akan terlihat karena sudah transparan (step sebelumnya)
        .appendTo(slideContainer)
 
        // animasikan tingkat opacity menjadi 1 (FULL),
        // sehingga pelan-pelan akan terlihat
        .animate({
            opacity: 1
        }, 'normal', function(){
            setTimeout(function(){
                // fungsi akan dijalankan kembali
                // setelah sekian detik sesuai dengan duration
                // sehingga menampilkan efek animasi berulang-ulang
                simpleSlideshow(slideContainer, duration);
            }, duration);
        })
    }
 
    // implementasi
    // jalankan fungsi animasi ketika document sudah di-load (ready)
    $(function(){
        var duration = 3000; // millsecond        
        var slideContainer = $('#slideshow');
        simpleSlideshow(slideContainer, duration);
    });
    </script>
</head>
<body>
<div id='slideshow'>
    <img src='image1.jpg'>
    <img src='image2.jpg'>
    <img src='image3.jpg'>
    <img src='image4.jpg'>
</div>
</body>
</html>

Untuk melihat demo-nya, silakan klik disini.

Konsep dari animasi ini sangat sederhana, seperti yang tertulis sebagai comment pada script-nya. Kita hanya memainkan tingkat opacity dari masing-masing anak (dalam hal ini, adalah tag ). Dengan properti CSS, position absolute, left 0, dan top 0, akan membuat gambar-gambar tersebut menumpuk satu sama lainnya pada posisi yang sama pula. Dengan catatan, gambar-gambar yang digunakan harus memiliki panjang dan lebar yang sama, agar tidak ada yang terlihat terpotong oleh gambar lainnya.

Dengan posisi yang saling menumpuk tersebut, gambar yang berada diurutan paling belakang (anak pertama, belakang disini dilihat dari sudut pandang sumbu Z, 3 Dimensi) tidak akan terlihat, karena tertutup oleh gambar yang diurutan paling depan. Animasi terjadi karena jquery memainkan tingkat opacity dari 0 (transparan) menjadi 1 (Fully Opaque). Dan, setiap kali fungsi dijalankan, anak pertama akan menjadi anak terakhir, anak kedua menjadi pertama, ketika menjadi kedua, dan seterusnya, dan fungsi diulang-ulang dengan setTimeout(), sehingga terbentuklah animasi slideshow yang (sangat) sederhana.

Demikian, semoga post ini dapat berguna bagi kita semua.