HTML5 kávéközelből

CSS3 slider gallery

április 21st, 2012 | Szerző: Szabó Viktor

Ez a cikk főként a CSS3 -ról fog szólni, arról, hogyan tudjuk kihagyni a JavaScript-et (JS) a kódjainkból és tisztán CSS3-al megvalósítani az áhított galéria effekteket. A példában nézzünk, egy manapság népszerű Slider effektet pusztán CSS3-al, JS nélkül.

CSS3 slider preview

A HTML5 része meglehetősen egyszerű lesz, hiszen a nagy részét a CSS3 dolgozza fel. Méghozzá úgy, hogy csináltam egy div-et aminek az id-ja images, ide kerülnek a képek, és egy button-t ami pedig a gombokért felel. A container a megjelenítés finomítását fogja szolgálni. Minden diát elláttam egy számmal, hogy tudjuk vezérelni a képek megjelenését, ezeket egy a tag-ba tettem. Lássuk a HTML5 kódunkat:

<!DOCTYPE html>
<html>
 <head>
  <title>HTML5 & CSS3 Image Slider Gallery</title>
 </head>

<body>
 <div id="container">
  <header>
   <h1>CSS3 Image Slider Gallery</h1>
  </header>
  <section>
   <div id="images">
    <img id="image1" src="kep1.jpg" />
    <img id="image2" src="kep2.jpg" />
    <img id="image3" src="kep3.jpg" />
    <img id="image4" src="kep4.jpg" />
    <img id="image5" src="kep5.jpg" />
   </div>
   <div id="button">
    <a href="#image1">1</a>
    <a href="#image2">2</a>
    <a href="#image3">3</a>
    <a href="#image4">4</a>
    <a href="#image5">5</a>
   </div>
 </section>
</div>

</body>
</html>

Nézzük ezután a CSS3 kódot, amit én két-három részre bontva mutatnék be nektek. Először is nézzük a fentebb említett id-val jelölt div-eket.

Kezdjük talán a container-rel. Abban definiálom le a középre igazítást, valamint megadom a konténer méretét és a behúzásokat, azaz pozicionálom az egészet.
Images-be kerül a kódnak a nagy része, hiszen méretezzük a képet, az általam megadott (bármi lehet) méretre (600×375) valamint itt ejtünk meg egy trükköt, az összes képet egymásra tesszük – mint a kártyákat -, pozíció: relatív és abszolút! Így átfedésbe kerülnek, takarják egymást. Ha megnézitek eltoltam mínuszba a bal oldal attribútumát, ez azért van, hogy a képek balról jobbra érkezzenek dia szerűen (slide). Itt definiáljuk a z-index-et is, mivel az összes kép egy helyre kerül és csak az adott/kiválasztott képet szeretnénk látni.
Természetesen, ha csak ennyit tennénk, nem lenne meg az áttűnés effektünk. Ami a CSS3-nak hála elérhetővé vált és viszonylag egyszerűen definiálható transition (átmenet típusa, időtartam). Ezt feliratoztam a kódban.

<style>

#container { /*container elem definiálása, középre igazítás, margó beállítás*/
width: 800px;
margin: 50px auto;
text-align: center;
}

header {
margin-bottom: 50px; /*oldal tetejétől a behúzás, hogy szebb legyen*/
}

h1 {
font-size: 24px;
font-weight: bold;
color: #8b66bc; /*h1 szöveg stílusa*/
}

#images {
width: 600px; /*képméretezés*/
height: 375px;
margin: 25px auto;
overflow: hidden; /*képek egymásra pozíciónálása, behúzás*/
position: relative;

}

#images img {
width: 600px; /*méretek megadása*/
height: 375px;
position: absolute; /*újabb pozícionálás az átfedés miatt*/
left: -500px; /*balról hozza az új képet, ezért -*/
top: 0;
z-index: 1; /*áttűnés efektért felel*/
opacity: 0; /*átlátszóság*/
transition: all linear 600ms; /* maga a slide effekt, a csúszás*/
-o-transition: all linear 600ms;
-moz-transition: all linear 600ms;
-webkit-transition: all linear 600ms;
}

#images img:target {
left: 0; /*kép igazítása, átlátszóság megszüntetése*/
z-index: 8;
opacity: 1;
}
</style>

Demo itt.

Ami nekem személy szerint nem tetszik, az 2 dolog:

Mikor váltok a képek között fehér a háttér. Elég sokat keresgéltem és olvastam, mire sikerült kiderítenem, hogy lehet a legegyszerűbben és leghumánusabban megoldani ezt a kérdést.
Ha nem adod meg az #images1-et a link végén, akkor nyitóképernyőnek üres galériát hoz az átlátszóság miatt, próbáljátok ki, hogy a demóra kattintotok, és törlitek a link végéről a kérdéses részt.

A megoldás természetesen a CSS3 fájlunk bővítése. Méghozzá akkor már a gombokat is csináljuk meg normálisan, hiszen úgy mutat.

#images img:first-child {
left: 0; /*hogy legyen alul egy kép konkrétan az 1-es és látható is legyen*/
opacity: 1;
}
#button a {
text-decoration: none; /*gombok kialakítása*/
border: 1px solid #aaaeb6;
padding: 5px 7px;
background: #dde2ea;

}
#button a:hover { /*gomb fölé vitt egér esetén*/
background: #97beff;
}

A Demo CSS3 Galéria itt megtekinthető.

Hasonló cikk a témakörben: