Skapa avancerad Marquee med CSS3 Animation
Idag ska vi titta på “tält” igen. Vi har faktiskt tagit hand om det i vårt tidigare inlägg som talade om att använda -webkit-marquee egendom, men den här gången tar vi detta ämne lite längre.
I det här inlägget ska vi skapa en tält-liknande effekt med CSS3 Animation. På det sättet kommer vi att kunna lägga till fler funktioner som inte kan uppnås med endast -webkit-marquee.
Om du inte redan är bekant med CSS3 Animation-modulen rekommenderar vi att du tar en titt på följande referenser innan du fortsätter med den här dokumentationen:
- CSS3 Animationer - W3School
- CSS Animationer - Mozilla Dev. Nätverk
Notera också att CSS3 Animation för närvarande bara kan fungera i Firefox 8+, Chrome 12+ och Safari 5.0+ med den prefixade versionen (-moz- och -webkit-). Vi kommer emellertid endast att använda den officiella versionen från W3C utan prefixet för att undvika att överfatta denna artikel med överflödiga koder.
Adressering av Marquee-utgåva
Ett av problemen med markeringen är att texten ständigt rör sig. Detta beteende är störande för att läsa, och texten är också svår att läsa. Den här gången kommer vi att försöka skapa vår egen version av markeringen och göra den användarvänligare. Till exempel; istället för att texten flyttas kontinuerligt, Vi kommer att stoppa det när det är fullt synligt, så användaren kan läsa texten en stund.
The Storyboard (typ av)
Varje kreativ och design skapande, som en logotyp, en illustration eller en webbplats, börjar vanligen med en skiss. Inom animationsproduktionen görs detta med en storyboard. Innan vi börjar med någon kodning skapar vi först en typ av storyboard, för att hjälpa oss att visualisera vår animation.
Som du kan se från ovanstående storyboard planerar vi att visa bara två rader av text, som båda kommer att flytta sekventiellt från höger till vänster.
Vårt storyboard är inte lika komplicerat som en storyboard för riktig animationsfilm, men poängen är: vi kan nu visualisera hur vår marknad kommer att se ut.
HTML Markup
Eftersom vår animering kommer att bli enkel kommer HTML-uppställning också att vara så enkelt som:
Hur man lägger till WordPress-relaterade inlägg utan pluggar
Automatisera dina Dropbox-filer med åtgärder
Grundläggande format
Innan vi arbetar runt animationsmaterialen, låt oss lägga till några grundläggande stilar. Låt oss börja med att lägga till en bakgrundsstruktur för html element.
html background: url ('... /images/skewed_print.png'); Därefter lägger vi markeringen i mitten av webbläsarfönstret och lägger till några detaljer som inre skugga, bakgrundsfärg och gränser.
.marknad bredd: 500px; höjd: 50px; marginal: 25px auto; översvämning: gömd; position: relativ; gränsen: 1px solid # 000; marginal: 25px auto; bakgrundsfärg: # 222; -webkit-gräns-radie: 5px; gränsstråle: 5px; -webkit-box-skugga: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); boxskugga: inmatning 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Sedan placerar vi texten - som i det här fallet är insvept i en stycketikett - absolut, och sedan absolut positionen kommer att få elementet att kollapsa, vi måste definiera breddens element till 100% för att täcka dess förälders bredd.
.markering p position: absolute; font-family: Tahoma, Arial, sans-serif; bredd: 100%; höjd: 100%; marginal: 0; linjehöjd: 50px; text-align: center; färg: #fff; textskugga: 1px 1px 0px # 000000; filter: dropshadow (färg = # 000000, offx = 1, offy = 1);
Låt oss ta en titt på resultatet ett tag.
Vid denna punkt har vi gjort med alla grundläggande stilar vi behöver, Du är fri att lägga till fler eller anpassade stilar. Men vi föreslår att du håller fast vid vår angivna markeringsdimension (höjd och bredd) tills slutet av handledningen.
Animationen
Kort sagt är animering en presentation av rörliga objekt. Varje rörelse definieras i en tidsram. Så när vi arbetar med animering, handlar vi mest om Tid. Vi tar hänsyn till frågor som:
- När börjar objektet flytta?
- Hur lång tid tar det för objektet att flytta från en punkt till en annan?
- När och hur länge ska objektet förbli vid en given punkt?
I CSS3 Animation, den tid kan definieras med @keyframe syntax. Men innan vi hoppar in i det här avsnittet ska vi först ange startpunkten för markeringstexten.
Vi har planerat att texten börjar från höger och sedan gå till höger. Så här placerar vi först det till höger genom att använda egenskapen CSS3 Transformation.
.markering p transform: translateX (100%);
Kom ihåg att 100% som vi har definierat för vårt styckeelement var lika med dess förälder bredd. Så det kommer också att tillämpas här. styckeelementet kommer att vara översatt till höger om 100% som i detta exempel är lika med 500px.
keyframes
De @keyframe syntax kan vara lite förbryllande för vissa människor, så här har vi skapat en enkel visuell guide för att hjälpa dig att lätt förstå vad som händer i @keyframe syntax.
Klicka här för att se den större versionen.
Hela animationen kommer att pågå om 20 sekunder och är uppdelad i två sekvenser som varar 10 sekunder varje.
I den första sekvensen kommer den första texten direkt att glida in från höger och förbli synlig tillfälligt för att låta användaren läsa texten medan den andra texten kommer att förbli dold. I den andra sekvensen kommer den första markeringen texten att glida ut till vänster och den andra texten kommer omedelbart in från höger.
Och här är alla de keyframe-koder som vi måste tillämpa för att köra animeringen.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
De lämnade en keyframes kommer att definiera animationens första sekvens, medan vänster-två keyframes definierar den andra sekvensen.
Applicera animering till elementen
För att animationen ska fungera, glöm inte att tillämpa animationen på elementet. Den första sekvensen appliceras för den första texten eller i det här fallet första stycket och den andra sekvensen tillämpas också för andra stycket.
.markering p: nth-child (1) animation: left-one 20s lätt oändlig; .marquee p: nth-child (2) animation: left-two 20s lätt oändlig;
Vi är alla färdiga med vår animation; låt oss se resultaten i webbläsaren.
- demo
- Hämta källa
Bonus
Vi kan också definiera markeringstexten för att flytta den från topp till botten eller vice versa, precis som vi gjorde i vårt tidigare inlägg. Så här gör du det; ersätt våra ovanstående animationskoder med den här nedan till flytta texten nedåt:
.markering p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Observera att vi har ändrat x-axel till y-axel och vänd alla översättning negativt värde till positivt och vice versa.
Vi har också bytt namn på animationen till ned-on och ned-två, så vi måste också omprogrammera Animationsnamnet i styckeelementet.
.marquee p: nth-child (1) animation: down-one 20s lätt oändlig; .marquee p: nth-child (2) animation: down-two 20s lätthet oändligt;
Eller annars, om du vill flytta det motsatsen; från botten till toppen. Här är alla koder du behöver söka:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s lätthet oändligt; .marquee.up p: nth-child (2) animation: up-two 20s lätthet oändligt; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- demo
- Hämta källa
Slutsats
Trots bristen på aktuellt webbläsarsupport, kommer CSS3 Animation, om det är gjort korrekt, utan tvekan att lösa många användbarhetsproblem i framtiden, som vi gjort i det här exemplet. Om vi bara behöver en kort animering avsedd för moderna webbläsare är det troligen bättre att använda CSS3 Animation än att behöva ladda ett jQuery-skript.
Slutligen är vi medvetna om att den här artikeln kan vara lite överväldigande för vissa människor, så om du har några frågor angående denna artikel, skriv gärna det i kommentarfältet nedan.
