CSS3 slider gallery
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.
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>
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:

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.