Speciális „Marquee” létrehozása a CSS3 animációval
Ma megnézzük “sátor” még egyszer. Valójában az előző postánkban foglalkoztunk vele, amelyről beszéltünk -WebKit sátor tulajdonjogát, de ezúttal egy kicsit tovább fogjuk venni ezt a témát.
Ebben a bejegyzésben létrehozunk egy sátor-szerű hatása a CSS3 animáció használatával. Így további funkciókat tudunk hozzáadni, amelyeket nem lehet elérni csak a -WebKit sátor.
Ha már nem ismeri a CSS3 animációs modult, javasoljuk, hogy tekintse meg a következő hivatkozásokat, mielőtt folytatná a dokumentációt:
- CSS3 animációk - W3School
- CSS animációk - Mozilla Dev. Hálózat
Szintén vegye figyelembe, hogy a CSS3 animáció jelenleg Firefox 8+, Chrome 12+ és Safari 5.0+ esetén csak az előre megadott verzióval működik.-Moz- és -webKit-). Azonban a W3C hivatalos verzióját csak az előtag nélkül használjuk fel, hogy elkerüljük a cikk túlzott felesleges feltöltését..
Címzési probléma megoldása
A marquee egyik problémája az, hogy a szöveg folyamatosan mozog. Ez a viselkedés zavarja az olvasást, és a szöveget is nehéz olvasni. Ezúttal megpróbáljuk létrehozni a saját sátorverziót, és felhasználóbarátabbá tenni. Például; a szöveg folyamatos mozgatása helyett, megállítjuk, ha teljesen látható lesz, így a felhasználó egy pillanatra elolvashatja a szöveget.
A Storyboard (fajta)
Minden kreatív és tervezési alkotás, mint például egy logó, illusztráció vagy weboldal, általában vázlattal kezdődik. Az animációs termelés területén ez egy storyboard segítségével történik. Mielőtt elkezdenénk bármilyen kódolást, először a egyfajta storyboard, hogy segítsen megjeleníteni animációnkat.
Amint az a fentiekből is látható, csak két sornyi szöveget kívánunk megjeleníteni, amelyek mindketten egymás után mozognak jobbról balra.
Történetünk nem olyan bonyolult, mint egy igazi animációs film történetírója, de a lényeg az, hogy most már képesek vagyunk megjeleníteni, hogyan fog kinézni a sátorunk.
A HTML-jelölés
Mivel animációnk egyszerű lesz, a HTML jelölés is olyan egyszerű lesz, mint:
WordPress-hez kapcsolódó bejegyzések hozzáadása bővítmények nélkül
A Dropbox fájlok automatizálása műveletekkel
Az alapvető stílusok
Az animációs dolgok körül dolgozunk, majd adjunk hozzá néhány alapvető stílust. Kezdjük a háttér textúra hozzáadásával html elem.
html background: url ('… /images/skewed_print.png'); Ezután a sávot a böngészőablak középpontjába helyezzük, és hozzáadunk néhány részletet, mint például a belső árnyék, a háttérszín és a határok.
.házikó szélesség: 500px; magasság: 50px; margin: 25px auto; túlcsordulás: rejtett; pozíció: relatív; határ: 1px szilárd # 000; margin: 25px auto; háttérszín: # 222; -webkit-border-radius: 5px; határ-sugár: 5px; -webkit-box-shadow: 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, 2);
Ezután a szöveget - amely ebben az esetben egy bekezdéscímkére van csomagolva - pozícionáljuk, és a abszolút pozíciója az elem összeomlását okozza, meg kell határoznunk a szélesség elemét 100% annak érdekében, hogy fedezze a szülő szélességét.
.marquee p pozíció: abszolút; font-család: Tahoma, Arial, sans-serif; szélesség: 100%; magasság: 100%; margin: 0; vonalmagasság: 50px; szöveg-igazítás: központ; szín: #fff; szöveg-árnyék: 1px 1px 0px # 000000; szűrő: dropshadow (szín = # 000000, offx = 1, offy = 1);
Vessünk egy pillantást az eredményre.
Ezen a ponton mindent megtettünk, amire szükségünk van; szabadon hozzáadhatsz vagy testreszabhatod a stílusokat. Javasoljuk azonban, hogy a bemutató végéig tartsuk be a megadott sávméretünket (a magasságot és a szélességet).
Az animáció
Röviden, az animáció a mozgó tárgyak bemutatása. Minden mozgást egy időkeretben definiálunk. Tehát, amikor animáción dolgozunk, többnyire az Idő. Figyelembe vesszük az olyan kérdéseket, mint:
- Mikor indul az objektum?
- Mennyi ideig tart, amíg az objektum egy pontról a másikra mozog?
- Mikor és mennyi ideig maradjon az objektum egy adott ponton?
A CSS3 animációban a idő meghatározható a @keyframe szintaxis. De mielőtt beugrunk ebbe a részbe, először határozzuk meg a marquee szöveg kezdőhelyét.
Terveztük, hogy a szöveg jobbról indul, majd jobbra halad. Tehát itt először a CSS3 átalakítás tulajdonságával jobbra helyezzük el.
.p transform: translateX (100%);
Ne feledje, a 100% A bekezdéselemhez definiáltak megegyeztek a szülővel szélesség. Tehát ugyanez vonatkozik erre is; a bekezdéselem lesz lefordított jobbra 100% amely ebben a példában egyenlő 500px.
A képkockák
A @keyframe a szintaxis néhány ember számára egy kicsit zavarba ejtő, ezért itt egy egyszerű vizuális útmutatót hoztunk létre, hogy könnyedén megértsük, mi történik a @keyframe szintaxis.
Kattintson ide a nagyobb verzió megtekintéséhez.
Az egész animáció tart 20 másodperc és két szekvenciára van osztva 10 másodpercig minden egyes.
Az első sorban az első szöveg azonnal jobbra tolódik, és pillanatnyilag látható marad, hogy a felhasználó elolvassa a szöveget, míg a második szöveg rejtve marad. A második sorrendben az első sávszöveg balra tolódik ki, a második szöveg pedig jobbra tolódik el jobbra.
És itt vannak az összes kulcsfontosságú kód, amelyet alkalmazni kell az animáció futtatásához.
@keyframes left-one 0% transzformálás: translateX (100%); 10% transzformált: transzlateX (0); 40% transzformált: transzlateX (0); 50% transzformált: translateX (-100%); 100% transzformálás: translateX (-100%); @keyframes left-two 0% transzformált: translateX (100%); 50% transzformáció: transzlateX (100%); 60% transzformáció: transzlatex (0); 90% transzformált: transzlatex (0); 100% transzformálás: translateX (-100%);
A bal-on A kulcsképek meghatározzák az animáció első sorrendjét, míg a bal két A kulcskeretek meghatározzák a második sorozatot.
Animáció alkalmazása az elemekhez
Annak érdekében, hogy az animáció működjön, ne felejtse el alkalmazni az animációt az elemre. Az első szekvenciát az első szövegre vagy ebben az esetben az első bekezdésre alkalmazzák, a második szekvenciát a második bekezdésre is alkalmazzák.
.marquee p: n-gyermek (1) animáció: a baloldali 20-as évek végtelen; .marquee p: nth-child (2) animáció: a bal-két 20s végtelen;
Mindannyian készen állunk az animációnkkal; lássuk az eredményeket a böngészőben.
- Demó
- Letöltés forrása
pótlék
Azt is meg lehet határozni, hogy a marquee-szöveg felülről lefelé mozduljon el, vagy fordítva. Itt van, hogyan kell csinálni; cserélje ki a fenti animációs kódjainkat az alábbiakkal mozgassa a szöveget lefelé:
.p transform: translateY (-100%); @keyframes down-one 0% átalakítás: fordítson (-100%); 10% transzformálás: translateY (0); 40% transzformálás: fordítson (0); 50% transzformálás: fordítson (100%); 100% transzformálás: fordítson (100%); @keyframes down-two 0% transzformálás: fordítson (-100%); 50% átalakítás: fordítson (-100%); 60% átalakítás: fordítson (0); 90% transzformálás: translateY (0); 100% transzformálás: fordítson (100%);
Figyeljük meg, hogy megváltoztattuk a X-tengely nak nek Y-tengely és flip mindent fordítás negatív érték pozitív és fordítva.
Mi is van átnevezték az animációt nak nek down-on és down-két, így újra kell alkalmazni az Animáció nevet a bekezdéselemben is.
.marquee p: nth-child (1) animáció: a 20-as évek leereszkedése végtelen; .marquee p: nth-child (2) animáció: a 20-as évek leereszkedése végtelen;
Vagy, ha az ellenkezőjét szeretné mozgatni; alulról a tetejére. Az összes olyan kód, amelyet alkalmazni kell:
.marquee.up p transzformáció: translateY (100%); .marquee.up p: nth-gyermek (1) animáció: az egy-egy 20-as évek végtelenek; .marquee.up p: nth-child (2) animáció: két-két-két évvel könnyebbé teszi a végtelenséget; @keyframes up-one 0% átalakítás: fordítson (100%); 10% transzformálás: translateY (0); 40% transzformálás: fordítson (0); 50% átalakítás: fordítson (-100%); 100% átalakítás: fordítson (-100%); @keyframes up-two 0% transzformáció: translateY (100%); 50% transzformálás: fordítson (100%); 60% átalakítás: fordítson (0); 90% transzformálás: translateY (0); 100% átalakítás: fordítson (-100%);
- Demó
- Letöltés forrása
Következtetés
A jelenlegi böngésző támogatás hiánya ellenére a CSS3 Animáció, ha megfelelően történik, kétségtelenül számos jövőbeni használhatósági problémát fog megoldani, mint ahogyan ezt a példában tettük. Ha csak egy rövid animációra van szükségünk a modern böngészőkhöz, a CSS3 animáció használata valószínűleg jobb, mint a jQuery-parancsfájl betöltése.
Végül tudatában vagyunk annak, hogy ez a cikk néhány ember számára túlnyomórészt elsöprő lehet, így ha bármilyen kérdése van ezzel a cikkgel kapcsolatban, nyugodtan tegye közzé azt az alábbi megjegyzések részben.
