Home » Tutorial » Cara Mudah Membuat Slider dengan CSS

Cara Mudah Membuat Slider dengan CSS

Cara Mudah Membuat Slider dengan CSS | Kali ini saya akan memberikan tutorial untuk membuat Slider . Biasanya slider itu menggunakan Jquery dan Javascript yang dapat membuat loading blog akan semakin berat, akan tetapi slider ini sangatlah ringan karena diciptakan dengan menggunakan CSS Animation .
Berikut adalah Penampakan dari Slider yang saya bicarakan :

Cara Mudah Membuat Slider dengan CSS

Keren bukan ?
Untuk membuatnya sangatlah Mudah, yaitu :

CSS

<style>
#sliderSK {
width: 468px;
height: 60px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
}
#maskSK {
overflow:hidden;
}
#sliderSK:hover {
background-color:#fff;
border-right: 4px solid rgb (176,0,0)
border-left: 4px solid rgb(176,0,0)
border-top: 4px solid rgb (22,22,22)
border-bottom: 4px solid rgb(22,22,22)
box-shadow :0px 0px 13px;
}
#sliderSK:hover #pauseSK {
opacity:1;
}
#sliderSK:hover #progressSK {
background-color:rgba(255,255,255,0.0);
}
#sliderSK:hover ul, #sliderSK:hover #progressSK, #sliderSK:hover #overlaySK {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#sliderSK ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}
#pauseSK {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progressSK {
width:2px;
height:3px;
background-color:#0054BB;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlaySK {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#sliderSK ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#sliderSK li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#sliderSK li:last-of-type {
background-color:#362c30;
}
#sliderSK li a {
display:block;
text-decoration:none;
}
#sliderSK li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
</style>

HTML

Bagaimana ?
Cukup mudahkan ?
Saya rasa cukup sekian, semoga bermanfaat .....

3 komentar :

takim ahmad12 Desember 2013 22.34
thanks gan atas ilmunya dah di share moga mulus terus,,
BalasHapus
Balasan
Ibrahim M.Pd.I20 Juni 2014 23.23
Kalau boleh tanya, slide yang sobat paparkan berat ngak ya loadingnya, sebab jika berat tentu akan menggangu kinerja blog secara keseluruhan. Terima kasih sebelumnya dan salam kenal
BalasHapus
Balasan

Tambahkan komentar

Gimana cerita gue? Tinggalin komentar loe disini, kali aja kita jodoh!