Hallo...
Semangat Pagi !
Setelah sebelumnya saya posting membuat slide foto di blogger, sekarang saya posting cara membuat slide foto di web. Tapi slide foto yang akan kita buat kali ini hanya dengan css. Kita sering menemui berbagai macam cara membuat slide foto, namun sebagian besar dari cara itu pasti menggunakan javascript dan jquery. Karena itulah kali ini saya share cara membuat slide foto dengan css.
Tampilan dari slide foto menggunakan css memang tidak sebaik dan sekeren dengan javascript ataupun jquery, apa lagi dengan bootstrap. namun membuat slide foto dengan css lebih mudah dan lebih asik !
Yuk simak kawan !
Langkah awal adalah, buka text editor anda, kalau saya memakai sublime text, karena lebih mudah pastinya.
nah setelah membuka sublime text, salinlah kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Latihan Slide SA-Lee</title>
<style>
#slidercontainer {
position: relative;
overflow: hidden;
background: #000
}
#slidercontainer {
width: 768px;
height: 341px;
margin-left: 246px;
}
#css3slider img {
width: 768px;
height: 341px;
margin-left: 0px;
}
#css3slider {
position: absolute;
width:3900px;
-webkit-animation-name:slider;
-webkit-animation-duration:15s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:slider;
-moz-animation-duration:15s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count:infinite;
-o-animation-name:slider;
-o-animation-duration:15s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count:infinite;
animation-name:slider;
animation-duration:15s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}
@-webkit-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}
@-moz-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}
@-o-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}
@keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}
#css3slider:hover {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused; }
}
#css3slider img {
margin-left: 0px;
}
#slidercontainer:hover:after {
color: rgba(255,255,255, 0.6);
}
</style>
</head>
<body>
<div id=slidercontainer>
<div id=css3slider>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgehoIktxKiMY2ABq6ks7_MFnW_ERe-zj4RxfwPmJrCgT4dZV94Z3_giw0CFVru5gn3O3DWkgj_m88_GOjHTMU4PH5Gi6Wc-WF5PI0CPuQjPpNjkCRFpp5fdMUcv2-g_V4h4wZaczSP-0o/s960/10660299_1636913959930856_3102166650881031680_n.jpg"><!-- img src"sesuaikan dengan nama folder dan nama file foto anda"-->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5OWFqi0t4L3VfBKMk6bOg1SrhV5r0qAKwmJT0jjQi2kIE4kB-8ExoyLq9NnDcQrMTp2JyZ87EAnW6Crbu2W-vE6QXT0_KjxdtioYyQOdzhkr2JNL29TDsJ9eEYgfiQW_CdI7yscBnUZg/s640/1904255_573624152766279_3782388883784785106_n.jpg">
<img src="foto/saya.jpg"> <!-- misal foto anda terdapat di dalam folder foto-->
<img src="inisaya.jpg"> <!-- misal foto anda terdapat di luar, satu folder dengan home.html-->
<img src="fotosaya.png"> <!-- misal file fotosaya berekstensi .png-->
</div>
</div>
</body>
</html>
Nah, selesai. simpan dengan nama home.html, ekstensi .html bisa kalian ubah menjadi .php :)
Lalu buka di browser anda, dengan cara CTRL+O pada browser, jika kalian menyimpan dalam folder htdocs, buka dengan ketikkan localhost/namafolder/home.php di url browser.
Sekian dan terimakasih, kalau ada yang kurang jelas dan ingin di tanyakan, silahkan hubungi saya melalui sosial media, atau komentar di bawah ini.
Selamat mencoba dan selamat belajar !
2 comments
Write commentsTrimakasih, membantu sekali. good
Replysama-sama :)
Reply