Interested in what we do?
Let’s have a talk, and see how together we can take your brand to the next level.
Dev and Design
Membuat Image Sliders Menggunakan Keyframe CSS3
Image Sliders sering kali digunakan dalam mempercantik website yang kita bangun untuk beberapa featured konten yang diwakili dengan gambar-gambar yang menarik. Image Sliders juga sering digunakan pada website photography, portofolio, magazine, bahkan saat ini company website juga banyak yang menggunakannya.
Pembuatan Image Sliders kebanyakan menggunakan plugin dari Javascript, seperti Jquery Cycle, Jquery Carousel, dsb. Namun saat ini kita gak sedang membahas bagaimana cara membuat slideshow menggunakan Jquery, karena CSS3 sudah mampu membuat Image Sliders yang cukup dinamis yang gak kalah sama Javascipt. Pasti penasaran kan? Gak perlu banyak basa basi, gue bakal langsung kasih tahu caranya sekarang.
Contoh :
<div id="content-slider"> <!--untuk menentukan ukuran slideshow--- > <div id="slideshow"> <!-- division untuk isi konten slideshow-- > <img src="images1.jpg"> <!-- Gambar 1-- > <img src="images2.jpg"> <!-- Gambar 2-- > <img src="images3.jpg"> <!-- Gambar 2-- > <img src="images4.jpg"> <!-- Gambar 2-- > </div> <!-- end slideshow-- > </div> <!-- end content-slider-- >
Kode CSS :
#content-slider {
position:relative;
overflow:hidden;
width:950px
}
#slideshow {
width: 1000%;
-webkit-animation: slideshow 10s infinite; /* For Safari 5, Chrome*/
-moz-animation: slideshow 10s infinite; /*For Firefox 5+ */
-ms-animation: slideshow 10s infinite; /*For IE 10 */
-o-animation: slideshow 10s infinite; /* For Opera 12+*/
}
#slideshow img{
float:left
}
/* Animation
============================================*/
@-webkit-keyframes slideshow {
0%, 10%, 100% { margin-left: 0; }
20%, 30% { margin-left: -950px;}
40%, 50% { margin-left: -1900px;}
60%, 70% { margin-left: -2850px;}
80% {margin-left: 0;}
}
@-moz-keyframes slideshow {
0%, 10%, 100% { margin-left: 0; }
20%, 30% { margin-left: -950px;}
40%, 50% { margin-left: -1900px;}
60%, 70% { margin-left: -2850px;}
80% {margin-left: 0;}
}
@-ms-keyframes slideshow {
0%, 10%, 100% { margin-left: 0; }
20%, 30% { margin-left: -950px;}
40%, 50% { margin-left: -1900px;}
60%, 70% { margin-left: -2850px;}
80% {margin-left: 0;}
}
@-o-keyframes slideshow {
0%, 10%, 100% { margin-left: 0; }
20%, 30% { margin-left: -950px;}
40%, 50% { margin-left: -1900px;}
60%, 70% { margin-left: -2850px;}
80% {margin-left: 0;}
}
Bingung dengan koding CSS3 diatas? Jangan garuk-garuk kepala dulu gan! Hehehe.
Hmm, oke gue jelasin sekarang. Pertama kita tentukan lebar division slideshow dan agar pada saat loading page panjang image sliders tetap terlihat rapi kita gunakan syntax “overflow:hidden” (tanpa tanda kutip).
Kemudian panjang gambar dikalikan banyaknya gambar, misalnya kita mempunyai 2 yang akan kita jadikan slideshow dengan resolusinya 950 x 350 px berarti 950 X 2 = width:1900px. Namun ada cara yang lebih simple lagi jika kita males mengkalikan banyaknya gambar, yaitu kita masukkan width : 1000%. Supaya posisi gambar yang lainnya menjadi horizontal kita masukkan syntax “float : left;”
Setelah itu kita atur animasi yang akan kita jalankan dengan menggunakan syntax “-webkit-animation: slideshow 10s infinite; “ (tanpa tanda kutip) syntax ini digunakan untuk browser Safari 5+ dan Google Chrome. Dalam syntax tertulis : Slideshow 10s infinite yang artinya adalah seluruh image dalam slideshow akan berjalan selama 10 detik dengan jumlah looping tak terbatas.
Perjalanan kita tidak sampai di situ! Sekarang supaya image sliders benar-benar jalan dengan baik kita gunakan :
@-webkit-keyframes slideshow { /*Panggil Fungsi Slideshow pada “-webkit-animation”*/
0%, 10%, 100% { margin-left: 0; }
20%, 30% { margin-left: -950px;}
40%, 50% { margin-left: -1900px;}
60%, 70% { margin-left: -2850px;}
80% {margin-left: 0;}
}
Disini gue memakai 4 gambar untuk contoh slideshow yang gue buat, jadi syntax di atas yang artinya
0%, 10%, 100% { margin-left: 0; } Gambar pertama akan tetap berada pada posisi yang sesuai tanpa ada spasi disebelah kirinya. Kemudian gambar pertama akan bergeser pada poisisi 20% sampai 30% dengan “margin-left: -950px;” akan menggeser gambar yang pertama dan berubah ke gambar kedua. Lalu pada pada posisi 40% sampai 50% dengan “margin-left: -1900px” akan menggeser 2 gambar sebelumnya dan berubah menjadi gambar ketiga. Setelah itu pada posisi 60%, 70% dengan “margin-left: -2850px;” akan menggeser 3 gambar sebelumnya lalu akan berubah menjadi gambar keempat. Terakhir pada posisi 80% akan kembali ke posisi gambar pertama.
Sampai disini sudah ngerti? Kalau masih bingung langsung aja dipraktekin!. Oh iya, kekurangan membuat slideshow dengan teknik ini adalah loe gak bisa asal nambah gambar seenaknya tanpa mensetting ulang CSSnya dan teknik ini juga gak support pada browser jadul, seperti Internet Explorer 6,7,8, Mozilla Firefox 3 – 4. Tapi ini cukup ampuh buat dipraktekkin buat yang belum ngerti sama Javascript atau bisa juga ke dalam editor website yang gak support Javascript seperti, Multiply, Myspace, dsb.
Udah dulu yaa gan, kalau ada tips dan trik yang lebih canggih gue pasti langsung bakal tulis buat kalian semua. Selamat mencoba…
