Share
Verdens helseorganisasjons verdensmental helsedag er her 10. oktober 2018 for å bidra til å øke bevissthet om psykiske problemer. I år er det fokus på å oppmuntre oss alle til å støtte og engasjere seg i, programmer og tjenester som kan nå unge mennesker, ideelt behandle problemer så tidlig som mulig.
For å markere dagen skal vi bruke CSS til å animere en SVG sentrert på det grønne båndet som mange bruker på å symbolisere mental helse bevissthet.
Vi har to hender som kommer sammen fra venstre og høyre side av scenen til å klemme sammen, som illustrerer støtten folk kan gi hverandre, hvorpå det grønne båndet vil vises sammen med noen beskrivende tekst.
Når du er ferdig, har du denne animasjonen (trykk reprise hvis nødvendig):
Jeg har forberedt SVG og HTML-koden for deg på forhånd, slik at du bare kan fokusere på å bruke CSS for å animere ulike elementer som omfatter illustrasjonen.
For å starte, lag en tom HTML-fil, og kopier og lim inn koden du ser nedenfor:
Verdens psykiske helse dag
Lagre og forhåndsvise filen din i en nettleser, og du bør se dette bildet, med alle SVG-elementene synlige, noen stablet på toppen av andre:
La oss starte med en oversikt over hvert element som er inkludert i SVG, slik at du vet hva vi jobber med.
Først opp har vi forsiden som kommer inn fra venstre side av SVG:
Da har vi den bakre hånden som kommer inn fra høyre:
Etter at de to åpne hender har krysset over i midten av skjermen, erstatter vi dem med de knuste hendene:
Vi har da det grønne mentale helse-bevisbåndet som vil falme inn i:
Den viktigste "World Mental Health Day" -teksten som vil falme inn etter det:
Og datateksten, som vil være det endelige elementet til å falme inn i:
Alt vi trenger for animasjonen vår er allerede i SVG-koden, vi trenger bare å komme inn og målrette elementene den inneholder via deres ID.
Det første vi må gjøre er å skjule alle elementene, slik at vi senere kan vise hverandre på riktig tidspunkt. Legg til følgende kode i mellom Merker som allerede finnes i HTML-filen du nettopp har opprettet.
#fronthand, #rearhand, #claspedhands, #ribbon, #wmhd, #date opacity: 0;
Vi skal bruke @keyframes animasjoner for hver del av vår sekvens. Den første animasjonen vi skal opprette, er en som kan gjøre et element flytte fra en posisjon utenfor SVGs venstre kant til sin opprinnelige posisjon i senteret.
Legg til følgende kode i CSS.
@keyframes infromleft fra transform: translate (-100%); opasitet: 1; til transform: translate (0%); opasitet: 1;
La oss gå gjennom hva vi gjør med denne koden.
Vi trenger bare å flytte vårt element fra en posisjon til et annet, i stedet for å ha det zigzag gjennom midlertidige stillinger. Derfor kan vi bare bruke fra og til heller enn å måtte spesifisere prosentbaserte nøkkelrammer.
I fra keyframe vi vil bruke forvandle eiendom til oversette, dvs. omposisjon, elementet helt til venstre, en posisjon som uttrykkes som -100%. I til keyframe vi spesifiserer elementets opprinnelige posisjon med 0%. Keyframe animasjonen håndterer automatisk å flytte elementet mellom fra og til stater.
Du vil også legge merke til opasitet er satt til 1 i begge keyframes. Dette betyr at elementet vil vises i begynnelsen av animasjonen, være synlig hele veien til slutten, og deretter tilbake til standard opasitet av 0 vi setter tidligere og forsvinner igjen. Vi trenger dette for å skje for å få plass til det knuste hendene elementet som vil vises etterpå.
Nå kan vi bruke animasjonen til forsiden av vår SVG, som bruker IDen #fronthand. Legg til følgende CSS i koden din.
#fronthand animasjon-navn: infromleft; animasjon-varighet: 1,5s; animasjon-timing-funksjon: utløp;
Her spesifiserer vi animasjonsnavnet, dvs.. infromleft, som vil utløse animasjonen vi nettopp har opprettet. I den andre linjen forteller vi at animasjonen skal løpe over en periode på 1,5 sekunder. Og i den tredje linjen forteller vi det å bruke ease-out animasjonstidsfunksjon, som vil gjøre bevegelsen start rask og senker mot slutten.
Når du lagrer og oppdaterer siden din, bør du se at forsiden kommer inn fra siden og stopper i midten, som vist nedenfor, for et kort øyeblikk før du forsvinner:
Vi lager nå en nesten nesten identisk animasjon til den første, med forskjellen mellom at elementet vil bevege seg inn fra høyre i stedet for til venstre. Legg denne CSS til din stil:
@keyframes infromright fra transform: translate (100%); opasitet: 1; til transform: translate (0%); opasitet: 1;
Du vil se det i fra keyframe, vi oversetter ved 100% i stedet for -100%, som skyver animasjonen med utgangspunkt i forbi høyre kant. Alt annet i denne koden er det samme som den siste animasjonen.
Vi bruker denne animasjonen til bakre håndelementet i SVG ved å legge til denne koden:
#rearhand animasjon-navn: infromright; animasjon-varighet: 1,5s; animasjon-timing-funksjon: utløp;
Nå bør du se at de to hender kommer sammen til de krysser over i midten før de forsvinner igjen.
Vi har allerede de to åpne hendene forsvunnet når de er ferdig med å flytte. Neste opp, vi må gjøre det knuste hendene elementet umiddelbart vises i det øyeblikk de åpne hender forsvinner.
For å få dette til å skje, oppretter vi en annen keyframe-animasjon som heter instantappear. Alt dette animasjonen vil gjøre er å sette opasitet til 1 gjennom animasjonen. Legg til dette CSS i filen din:
@keyframes instantappear fra opacity: 1; til opacity: 1;
Bruk animasjonen til #claspedhands element med denne koden:
#claspedhands animasjon-navn: instantappear; animasjon-varighet: 1s; animasjonsforsinkelse: 1,5s; animasjons-fyll-modus: fremover;
Her, i de to første linjene vi kaller vår instantappear animasjon og sett dens varighet til 1 sekund.
I den tredje linjen forteller vi animasjonen til utsette med 1,5 sekunder, som tilsvarer varigheten av de to første animasjonene. På denne måten, så snart de er ferdig, begynner denne animasjonen.
Deretter setter vi i den fjerde linjen animasjon-fill-mode eiendom til forover. Hva dette gjør er å fortelle animasjonen å stoppe på sin siste ramme og bli der. Dette vil holde elementet på opasitet av 1 sett i slutten keyframe, i stedet for å gå tilbake til standard opasitet av 0 som våre for- og bakhender gjorde.
Forhåndsvis animasjonen din og når den er ferdig, bør du se dette:
Vi trenger bare en animasjon for de tre gjenværende elementene, en som vil forsvinne i alt det gjelder. Vi kan bruke det på hvert element med forskjellige innstillinger for å fullføre vår sekvens.
Opprett en ny animasjon som heter fadein og sett den til overgang fra opasitet 0 til opasitet 1 som så:
@keyframes fadein fra opacity: 0; til opacity: 1;
Det grønne båndet er det neste elementet vi ønsker å vises, så bruk vår nye fadein animasjon til det med følgende CSS:
#ribbon animasjon-navn: fadein; animasjon-varighet: 0.75s; animasjonsforsinkelse: 1,75s; animasjons-fyll-modus: fremover;
Her har vi fading i kraft siste tre fjerdedeler av et sekund, og vi satte den til å begynne på 1,75 sekunder etter at de foregående animasjonene er fullført. Igjen bruker vi animasjons-fyll-modus: fremover; for å sikre elementets opasitet forblir på 1 heller enn å returnere til 0.
Når sekvensen din er ferdig, bør du nå se dette:
Nå får vi også hovedteksten til å falme inn. Vi har allerede en #wmhd stil i dokumentet, så oppdater det til følgende:
#wmhd font-weight: bold; skriftstørrelse: 72px; fyll: # 282828; animasjon-navn: fadein; animasjon-varighet: 0.75s; animasjonsforsinkelse: 2.25s; animasjons-fyll-modus: fremover;
Vi bruker samme kode som vi gjorde på #bånd element, bare skyver ut forsinkelsen til 2,25 sekunder, slik at vi forskyver utseendet på elementene.
Animasjonen din bør nå fullføres i denne tilstanden:
Endelig må vi gjøre datoen vises, så oppdater eksisterende #Dato stil til:
#date font-size: 48px; fyll: # 278927; animasjon-navn: fadein; animasjon-varighet: 0.75s; animasjonsforsinkelse: 2,75s; animasjons-fyll-modus: fremover;
Igjen, den eneste endringen skyver ut starttiden for animasjonen.
Med det siste stykket kode er animasjonen nå fullført, og når den er ferdig, skal den se slik ut:
For mer informasjon om World Mental Health Day, besøk WHOs nettsted.
Accentsconagua