Az ötlet itt egy diavetítés megjelenésének megteremtése a körhinta nélkül. Más szavakkal, képsorozatot készítünk balról jobbra csúsztatva, és ismételjük meg, amint a képek vége elérkezett. A trükk az, hogy egyetlen háttérképet használunk CSS animációkkal (…)
Az ötlet itt egy diavetítés megjelenésének megteremtése a körhinta nélkül. Más szavakkal, képsorozatot készítünk balról jobbra csúsztatva, és ismételjük meg, amint a képek vége elérkezett.
A trükk az, hogy egyetlen háttérképet használunk CSS animációkkal, hogy áthelyezzük a képernyőn és megismételjük, amikor elkészült. Ez egy képgaléria illúzióját kelti, amikor valóban egyetlen képet használunk.
A HTML beállítása
Itt van egy terv arról, hogyan kell strukturálni a HTML-t:
Két elem van, amellyel dolgozunk: az egyik általunk hívott .container, amely pontosan illeszkedik a nézetablak szélességéhez, és egy másik, amelyet hívunk .sliding-background, amely a mögött ül .containerés túlcsordul. Lényegében .containera maszkot használjuk .sliding-backgrounda képernyő teljes szélességének elrejtéséhez .
Ez azt jelenti, hogy csak két elemet kell létrehoznunk a HTML jelölésben:
Az elemek elhelyezése
Menjünk előre, és adjunk hozzá néhány CSS-t, amelyek helyesen helyezik el a két elemünket.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )A .containerfelhasználás a overflowtulajdonság, amely elrejti, hogy bármit is vizuálisan tartalmaz azon kívül. Gondoljon rá, mint egy vágás egy fényképre. Lehet, hogy vannak extra cuccok a tartályon kívül, de a tartály megakadályozza, hogy lássuk.
Itt .sliding-backgroundjön a játék. Valami nevetséges szélességre van beállítva, amely túlcsordítja a legtöbb nézetablakot. És ez a trükk: olyannak kell lennie, amely túlcsordítja a tartályt. Ebben az esetben egy kissé önkényesen választott 5076pxszélességet használunk, amelynek túl kell esnie a böngésző nézetablakainak többségén.
A háttérkép létrehozása
Szükségünk van egy képre, ha egy diavetítő galéria illúzióját készítjük, igaz? Ez a következő ügyrendünk.
Emlékszel, hogyan említettük 5076pxa csúszó háttér kissé önkényesen választott szélességét? Nos, önkényes, de szándékos abban az értelemben, hogy szépen osztható 3-mal, ami belefér egy perc hosszú ciklus időzítésébe, amely egy kicsit később fog megjelenni. Ez azt jelenti, hogy a háttérképünk vászonja 5076 / 3vagy 1692px. Végül a hátterünk egy perc alatt összesen háromszor megismétlődik egy végtelen ciklusban. Matematika a győzelemhez!
A 500pxmagasság valóban önkényes. Ez lehet bármi, amire vágyik, mindaddig, amíg ez a háttérképfájl tényleges mérete is.
A bemutató háttérképének létrehozásához használt Photoshop-fájl e fejezet elején letölthető, ha kiindulópontot keres.
Miután a képet elmentette (és optimalizálta!), Ezt fogjuk használni háttérképként a CSS-ben:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Nagy! Ez adja azt a ginormikus képet, amely elárasztja a tárolót, és mostantól végtelenül görgethető a képernyőn.
A háttér animálása
Rendben, mozgassuk ezt a dolgot. Azt akarjuk, hogy balról jobbra haladjon egy ismétlődő ciklusban, hogy zökkenőmentes hatást keltsen, amely a kép örökké tart.
Először definiáljuk a CSS animációt:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )A transformtulajdonság segítségével a bal oldali képet a tároló bal szélére helyezzük, amikor az animáció elkezdődik, így:
Mire az animáció elkészül, negatívan (balról jobbra) átalakítja a pozíciót egy olyan összeggel, amely megegyezik a képünk pontos szélességével. És mivel a .sliding-backgroundtényleges kép háromszorosa a szélességének, a kép háromszor megismétlődik 0% és 100% között, mielőtt ismét hurokba kapcsolna.
Megjegyzés: az ok, amiért kiegészítőt használunk
background-positionhogy a főszerepben animálna transforma mozgást, ami sokkal teljesítőbb.
Rendben, fejezzük be a dolgokat úgy, hogy felhívjuk az slideanimációnkat az .sliding-backgroundosztályra:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )A animationtulajdonság utasítja a .sliding-backgroundfelhasználót, hogy használja az slideanimációt, és futtassa azt egy-egy percig lineáris, végtelen ciklusban.
Összeállítva
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )