Senin lalu, saya membahas tentang cara atau teknik baru membuat Slider dengan hanya menggunakan CSS3 murni. Pada posting tersebut, tutorial yang dibahas adalah tutorial yang paling sederhana dari CSS slider. Nah, kali ini saya akan membahas lagi seperti janji saya pada posting sebelumnya. Kali ini CSS slider yang dibuat akan diintegrasikan dengan “animate.css”.
Jika anda belum mengenal apa itu animate.css, silahkan kenalan dulu di posting ini : Cara membuat animasi dengan animate.css.
Dengan mengintegrasikan CSS slider dengan efek animasi yang terdapat pada animate.css, slider yang dihasilkan akan semakin interaktif. Bahkan, bisa lebih keren daripada menggunakan library jquery/js. Pada tutorial ini, saya membuat 2 slider yang diintegrasikan dengan efek animasi di animate.css. Pada slider pertama, saya hanya menggunakan 1 efek animasi yang sama untuk tiap slide, yaitu efek fadeIn dan fadeOut. Sedangkan, pada slider kedua saya menggunakan efek yang berbeda-beda untuk tiap slide. Sehingga ada 3 jenis efek pada slider kedua ini.
Yap, langsung saja, berikut ini adalah kode HTML dan CSS-nya. Silahkan simak dan pahami.
<div class=”container”>
<input type=”radio” name=”slide” class=”radio-nav” id=”nav-1″ checked/>
<input type=”radio” name=”slide” class=”radio-nav” id=”nav-2″/>
<input type=”radio” name=”slide” class=”radio-nav” id=”nav-3″/>
<ul class=”slide”>
<li class=”slide-1″>
<img src=”images/1.jpg”/>
<div class=”caption”>Lorem Ipsum Dolor Sit Amet 1</div>
</li>
<li class=”slide-2″>
<img src=”images/2.jpg”/>
<div class=”caption”>Lorem Ipsum Dolor Sit Amet 2</div>
</li>
<li class=”slide-3″>
<img src=”images/3.jpg”/>
<div class=”caption”>Lorem Ipsum Dolor Sit Amet 3</div>
</li>
</ul>
<div class=”nav-arrow nav-next”>
<label class=”nav-1″ for=”nav-1″>></label>
<label class=”nav-2″ for=”nav-2″>></label>
<label class=”nav-3″ for=”nav-3″>></label>
</div>
<div class=”nav-arrow nav-prev”>
<label class=”nav-1″ for=”nav-1″><</label>
<label class=”nav-2″ for=”nav-2″><</label>
<label class=”nav-3″ for=”nav-3″><</label>
</div>
</div>
width:500px; /* Opsional */
height: 300px; /* Opsional */
}ul.slide {
display: block;
}.caption {
position: absolute;
background-color: rgba(0,0,0,0.5);
bottom:0;
padding:10px;
color:#fff;
left: 0;
right: 0;
}
ul.slide li {
position: absolute;
top:0;
bottom:0;
right: 0;
left: 0;
opacity: 0;
}/* Navigator */.radio-nav {
display: none;
}
.nav-arrow {
position: absolute;
top:45%;
width:50px;
height: 50px;
}
.nav-next {
right:10px;
}
.nav-prev {
left:10px;
}
.nav-arrow label {
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
background-color: rgba(0,0,0,0.3);
color: #fff;
border-radius: 50%;
display: block;
position: absolute;
padding:15px 20px;
cursor: pointer;
z-index: 1;
opacity: 0;
font-weight: bold;
line-height: 1;
}
.container:hover .nav-arrow label{
background-color: rgba(0,0,0,0.7);
}#nav-1:checked ~ .nav-prev label.nav-3,
#nav-1:checked ~ .nav-next label.nav-2,
#nav-2:checked ~ .nav-prev label.nav-1,
#nav-2:checked ~ .nav-next label.nav-3,
#nav-3:checked ~ .nav-prev label.nav-2,
#nav-3:checked ~ .nav-next label.nav-1 {
z-index: 2;
opacity: 1;
}/* Navigator */
ul.slide li {
-webkit-animation:fadeOut 1s; /* Efek slide keluar */
}
#nav-1:checked ~ ul.slide li.slide-1,
#nav-2:checked ~ ul.slide li.slide-2,
#nav-3:checked ~ ul.slide li.slide-3 {
-webkit-animation:fadeIn 1s; /* Efek slide masuk */
opacity: 1;
}
/* End, yang membuatnya jadi slider */
– Efek slide keluar dan efek slide masuk sebaiknya berlawanan agar terlihat lebih menarik. Anda bisa mengubah setiap efek sesuai kebutuhan anda. Daftar efek animasi ada disini : animate.css
#nav-1:checked ~ ul.slide li.slide-1,
#nav-2:checked ~ ul.slide li.slide-2,
#nav-3:checked ~ ul.slide li.slide-3 {
opacity: 1; /* menampilkan slide yang terpilih*/
}/* Efek Slide 1 */
ul.slide li.slide-1 {
-webkit-animation:fadeOutUp 1s; /* Efek slide keluar*/
-moz-animation:fadeOutUp 1s; /* Efek slide keluar*/
animation:fadeOutUp 1s; /* Efek slide keluar*/
}
#nav-1:checked ~ ul.slide li.slide-1 {
-webkit-animation:fadeInDown 1s; /* Efek slide masuk*/
-moz-animation:fadeInDown 1s; /* Efek slide masuk*/
animation:fadeInDown 1s; /* Efek slide masuk*/
}/* Efek Slide 2 */
ul.slide li.slide-2 {
-webkit-animation:fadeOutRight 1s; /* Efek slide keluar*/
-moz-animation:fadeOutRight 1s; /* Efek slide keluar*/
animation:fadeOutRight 1s; /* Efek slide keluar*/
}
#nav-2:checked ~ ul.slide li.slide-2 {
-webkit-animation:fadeInLeft 1s; /* Efek slide masuk*/
-moz-animation:fadeInLeft 1s; /* Efek slide masuk*/
animation:fadeInLeft 1s; /* Efek slide masuk*/
}/* Efek Slide 3 */
ul.slide li.slide-3 {
-webkit-animation:fadeOutLeft 1s; /* Efek slide keluar*/
-moz-animation:fadeOutLeft 1s; /* Efek slide keluar*/
animation:fadeOutLeft 1s; /* Efek slide keluar*/
}
#nav-3:checked ~ ul.slide li.slide-3 {
-webkit-animation:fadeInRight 1s; /* Efek slide masuk*/
-moz-animation:fadeInRight 1s; /* Efek slide masuk*/
animation:fadeInRight 1s; /* Efek slide masuk*/
}/* End, yang membuatnya jadi slider */
– Efek slide keluar dan efek slide masuk sebaiknya berlawanan agar terlihat lebih menarik. Anda bisa mengubah setiap efek sesuai keinginan anda. Daftar efek animasi ada disini : animate.css
Tertarik?
Dari trik di atas, saya -atau mungkin anda juga- menyadari bahwa dari teknik CSS slider ini bisa dikembangkan lebih jauh lagi. Apalagi, jika anda sudah melihat style-style slider dari CSSslider.com, anda pasti akan lebih tertarik lagi mengeksplorasi trik-trik untuk style slider yang lain. Di CSSslider.com, slider yang digenerate oleh softwarenya bisa menghasilkan puluhan slider dengan berbagai skin dan efek yang keren.
Sejujurnya, 2 slider yang saya buat di posting bagian 1 dan 2 ini, saya kira masih belum layak pakai karena belum terdokumentasi dan terstruktur dengan baik. 2 slider ini hanya bisa dipakai oleh orang yang benar-benar mengerti css juga. Posting ini dan posting sebelumnya hanya menjelaskan trik dasarnya saja. Selanjutnya, mungkin ada mastah yang mau membantu mengembangkannya juga? sehingga bisa menjadi library css yang bisa dipakai oleh umum dan terdokumentasi dengan baik. Amin.
Bagaimana menurut anda ? Sekian, Semoga bermanfaat.
~Muhammad Syakirurohman~
Cara Membuat Slider dengan CSS3 Murni (Tanpa Javascript) – Part 2 - BloggerIndo
[…] lalu, saya membahas tentang cara atau teknik baru membuat Slider dengan hanya menggunakan CSS3 murni. Pada posting tersebut, tutorial yang dibahas adalah […]
Cara Bangun Pagi
Boleh nih sob ane praktekin di blog, tapi kalau pasang slider loading blog jadi berat ga sih?
Syakir Rahman
Berat sih engga.. Cuma mungkin masih belum support semua browser gan.. Coba-coba boleh aja. tapi masih dalam pengembangan
Rahmad Suryadi
kalu gambar nya otomatis brtukar gmana cra ny mas ?
Syakir Rahman
Untuk saat ini belum ada fiturnya mas karena itu hanya CSS.. masih dalam tahap riset :), walaupun belum dilanjutkan lagi hehehe
desainavirs
wah keren gan sambil gerak..
semoga baik lagi
Lenaldi
kalo yg auto gmn gan? ga pakai navbar?
pemula css3 nih mau nyoba” hahaha
Syakir Rahman
Belum ngulik lagi gan.. agak sulit kalau pake css heheh
dadi
(~) ITU selector APA ya ?
Syakir Rahman
coba baca ini http://www.w3schools.com/cssref/css_selectors.asp