CSS3 slideshow box
A következő példában egy slideshow-t szeretnék nektek bemutatni, amihez nem használunk semmi mást csak html-t és css-t. A slideshow egyszerű és könnyen alkalmazható bármilyen méretben és weboldalon. Nagyszerűen lehet rajta fontosabb infókat, vagy reklámokat futtatni.
A CSS részben használjuk a CSS3 animációs képességeit amit egy korábbi cikkben már bemutattam nektek. Közben annyi változás történt, hogy immár több böngésző támogatja (a Can I use? szerint is) ezt a megoldást (IE8-9 azóta sem). Tehát jobb a helyzet, mint amikor utoljára írtam róla.. Még pár év és csak sikerül utolérniük a böngészőknek a fejlesztőket.
A hátterem: 610 x 300
1. A slideshow HTML része:
<!DOCTYPE html> <html> <head> <title>Simple Slideshow</title> <link rel="stylesheet" type="text/css" href="slide.css"> </head> <body> <div class="contener_slideshow"> <div class="contener_slide"> <div class="slide_1"><img src="slide1.png"></div> <div class="slide_2"><img src="slide2.png"></div> <div class="slide_3"><img src="slide3.png"></div> </div> </div> </body> </html>
2. A slideshow CSS része:
.contener_slideshow /*slideshow konténer méretezése */ { width:610px; /*600x200-as slide-ra optimalizálva */ height:300px; /*azért nagyobb, hogy lehetőség legyen betenni background-ot*/ margin:0 auto; overflow: hidden; position: relative; background-image: url('backgrd.png'); } .slide_1, .slide_2, .slide_3 { position: absolute; /*hagyjunk 10px rést a slideok között, hogy a háttér jobban mutasson*/ width:610px; height:200px; } .slide_1{left: 5px;} /*pozicionálás*/ .slide_2{left: 610px;} .slide_3{left: 1220px;} .contener_slide { top:50px; /*igazítsuk a background közepére a slide-sort*/ width: 1220px; height: 200px; left:0px; position: absolute; -webkit-animation-duration: 12s; /*a különböző böngészők miatt kénytelen vagyunk a 4-es definiálást használni...*/ -webkit-animation-iteration-count:infinite; /*animáció időtartam, elnevezés illetve végtelen rotáció*/ -webkit-animation-name: slideing; -moz-animation-duration: 12s; -moz-animation-iteration-count:infinite; -moz-animation-name: slideing; -ms-animation-duration: 12s; -ms-animation-iteration-count:infinite; -ms-animation-name: slideing; animation-duration: 12s; animation-iteration-count:infinite; animation-name: slideing; } @-webkit-keyframes slideing /*keyframe-ek definiálása, az eltolt képeket balra mozgatjuk a futószalagon.*/ { /* szintén a böngészők miatt 4 változat.*/ 0% {left:0px;} 22% {left:0px;} 30% {left:-605px;} 55% {left:-605px;} 75% {left:-1215px;} 90% {left:-1215px;} } @-moz-keyframes slideing { 0% {left:0px;} 22% {left:0px;} 30% {left:-605px;} 55% {left:-605px;} 75% {left:-1215px;} 90% {left:-1215px;} } @-ms-keyframes slideing { 0% {left:0px;} 22% {left:0px;} 30% {left:-605px;} 55% {left:-605px;} 75% {left:-1215px;} 90% {left:-1215px;} } @keyframes slideing { 0% {left:0px;} 22% {left:0px;}/ 30% {left:-605px;} 55% {left:-605px;} 75% {left:-1215px;} 90% {left:-1215px;} }