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
CSS3 Slideshow
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;}
}