Share
Världshälsoorganisations "World Mental Health Day" är här den 10 oktober 2018, för att öka medvetenheten om psykiska problem. I år är fokus på att uppmuntra oss alla att stödja och engagera sig i program och tjänster som kan nå ungdomar, så effektivt som möjligt behandla frågor så tidigt som möjligt.
För att markera dagen ska vi använda CSS för att animera en SVG centrerad på det gröna bandet som många bär på för att symbolisera mental hälsa medvetenhet.
Vi kommer att ha två händer som kommer samman från vänster och höger sida av scenen för att låsa ihop, vilket illustrerar det stöd som människor kan ge varandra, varefter det gröna bandet kommer att dyka upp tillsammans med en beskrivande text.
När du är klar har du den här animationen (tryck på REPRIS om det behövs):
Jag har förberett SVG och HTML-koden för dig i förväg så att du bara kan fokusera på att använda CSS för att animera olika element som innefattar illustrationen.
Börja med att skapa en tom HTML-fil och kopiera och klistra in den kod du ser nedan:
World Mental Health Day
Spara och förhandsgranska din fil i en webbläsare och du ska se den här bilden, med alla SVG-element synliga, vissa staplade på andra sidan:
Låt oss börja med en sammanfattning av varje element som ingår i SVG så att du vet vad vi jobbar med.
Först upp har vi den främre handen som kommer in från vänster sida av SVG:
Sedan har vi den bakre handen som kommer in från höger:
När de två öppna händerna har passerat i mitten av skärmen kommer vi att ersätta dem med de knäppta händerna:
Vi har då det gröna mentala medvetenhetsbandet som kommer att blekna in:
Den viktigaste "World Mental Health Day" -texten som kommer att blekna in efter det:
Och datumtexten, som kommer att bli det sista elementet att blekna in:
Allt vi behöver för animationen finns redan i SVG-koden, vi behöver bara nå in och rikta in de element som den innehåller via deras ID.
Det första vi behöver göra är att dölja alla element så att vi senare kan visa var och en vid rätt tidpunkt. Lägg till följande kod mellan taggar som redan finns i HTML-filen du just skapat.
#fronthand, #rearhand, #claspedhands, #ribbon, #wmhd, #date opacity: 0;
Vi ska använda @keyframes animeringar för varje del av vår sekvens. Den första animationen vi skapar är en som kan göra ett element flytt från en position utanför SVG: s vänstra kant till dess ursprungliga position i mitten.
Lägg till följande kod till din CSS.
@keyframes infromleft från transform: translate (-100%); opacitet: 1; till transformera: translate (0%); opacitet: 1;
Låt oss gå igenom vad vi gör med den här koden.
Vi behöver bara flytta vårt element från ett ställe till ett annat, istället för att ha det zigzag genom interimistiska positioner. Därför kan vi bara använda från och till snarare än att behöva ange procentbaserade nyckelramar.
I från keyframe vi kommer att använda omvandla egendom till Översätt, d.v.s. omplacering, elementet hela vägen till vänster, en position som uttrycks som -100%. I till keyframe vi specificerar elementets ursprungliga position med 0%. Keyframe-animationen hanterar automatiskt elementet mellan från och till stater.
Du märker också opacitet är satt till 1 i båda nyckelramarna. Det betyder att elementet kommer att visas i början av animationen, håll dig synlig hela vägen till slutet och återgå sedan till standardvärdet opacitet av 0 vi sätter tidigare och försvinner en gång till. Vi behöver detta för att hända för att skapa plats för det knäppta händerelementet som kommer att dyka upp efteråt.
Nu kan vi ange animationen till fronthandelementet i vårt SVG, som använder ID #fronthand. Lägg till följande CSS i din kod.
#fronthand animation-name: infromleft; animeringstid: 1,5s; animering-timing-funktion: lätthet;
Här specificerar vi animeringsnamnet, dvs. infromleft, vilket kommer att utlösa animationen vi just skapat. I den andra raden berättar vi att animationen ska springa över en period på 1,5 sekunder. Och i den tredje raden säger vi att den ska användas lindra-out animeringstidsfunktion, vilket gör att rörelsen börjar snabbt och sedan sakta ner mot slutet.
När du sparar och uppdaterar din sida nu ska du se fronthanden komma in från sidan och stanna i mitten, som bilden nedan, för ett kort ögonblick innan du försvinner:
Vi skapar nu en annan nästan identisk animering till den första, med skillnaden att elementet kommer att flyttas in från höger i stället för vänster. Lägg till denna CSS i din stil:
@keyframes infromright från transform: translate (100%); opacitet: 1; till transformera: translate (0%); opacitet: 1;
Det kommer du att se i från keyframe, vi översätter av 100% istället för -100%, som skjuter startpunkten för animationen ut över den högra kanten. Allt annat i den här koden är samma som den sista animationen.
Vi applicerar denna animering till bakre handenheten i SVG genom att lägga till den här koden:
#rearhand animation-name: infromright; animeringstid: 1,5s; animering-timing-funktion: lätthet;
Nu ska du se att de två händerna kommer ihop tills de passerar i mitten innan de försvinna igen.
Vi har redan de två öppna händerna försvinner när de är färdiga. Därefter måste vi göra att det spända händerelementet direkt visas när exakta händer försvinner.
För att detta ska ske kommer vi att skapa en annan keyframe-animering som heter instantappear. Allt detta animation kommer att göra är att ställa in opacitet till 1 under hela animeringen. Lägg till den här CSS i din fil:
@keyframes instantappear från opacity: 1; till opacitet: 1;
Applicera animationen till #claspedhands element med denna kod:
#claspedhands animation-name: instantappear; animeringstid: 1s; animationsfördröjning: 1,5s; animations-fyll-läge: framåt;
Här kallas vi i de två första raderna instantappear animering och ställa in dess varaktighet till 1 sekund.
I den tredje raden berättar vi animationen till fördröjning med 1,5 sekunder, vilket motsvarar varaktigheten för våra första två animationer. Så snart de är färdiga börjar denna animering.
Sedan sätter vi i fjärde raden animation-fill-mode egendom till framåt. Vad det här gör är att animationen stannar på sin sista bild och stanna där. Detta kommer att hålla elementet vid opacitet av 1 Ange i slutet keyframe, istället för att gå tillbaka till standard opacitet av 0 som våra främre och bakre händer gjorde.
Förhandsgranska din animering och när det är klart bör du se detta:
Vi behöver bara en animation för de tre återstående elementen, en som kommer att blekna i allt som det är applicerat på. Vi kan använda det på varje element med olika inställningar för att slutföra vår sekvens.
Skapa en ny animering som heter FadeIn och ställ den till övergång från opacitet 0 till opacitet 1 såhär:
@keyframes fadein från opacity: 0; till opacitet: 1;
Det gröna bandet är nästa element vi vill se, så använd vår nya FadeIn animering till den med följande CSS:
#ribbon animation-name: fadein; Animation-duration: 0.75s; animationsfördröjning: 1,75s; animations-fyll-läge: framåt;
Här har vi försvann senast i tre fjärdedelar av en sekund, och vi ställer in den på 1.75 sekunder efter att de föregående animationerna är färdiga. Återigen använder vi animations-fyll-läge: framåt; för att säkerställa elementets opacitet stannar vid 1 snarare än att återställa till 0.
När din sekvens slutför bör du nu se detta:
Nu gör vi också huvudtexten. Vi har redan en #wmhd stil i dokumentet, så uppdatera det till följande:
#wmhd font-weight: bold; typsnittstorlek: 72px; fyll: # 282828; animationsnamn: fadein; Animation-duration: 0.75s; animationsfördröjning: 2,25 s; animations-fyll-läge: framåt;
Vi använder samma kod som vi gjorde på #band element, bara skjuter ut fördröjningen till 2,25 sekunder så vi stagger utseendet på objekten.
Din animering bör nu slutföras i detta tillstånd:
Slutligen måste vi göra datumet, så uppdatera det existerande #datum stil till:
#date font-size: 48px; fyll: # 278927; animationsnamn: fadein; Animation-duration: 0.75s; animationsfördröjning: 2,75s; animations-fyll-läge: framåt;
Återigen trycker den enda förändringen på animeringens starttid.
Med det sista stycket kod är din animering nu klar och när den är klar körs den så här:
För mer information om World Mental Health Day besök WHOs webbplats.
Accentsconagua