Share
Organizația Mondială a Sănătății "Ziua Mondială a Sănătății Mintale" este aici, 10 octombrie 2018, pentru a contribui la creșterea gradului de conștientizare în ceea ce privește problemele de sănătate mintală. În acest an, accentul este pus pe încurajarea tuturor de a susține și de a ne implica în programe și servicii care pot ajunge la tineri, tratând în mod ideal problemele cât mai curând posibil.
Pentru a marca ziua, vom folosi CSS pentru a anima un SVG centrat pe panglica verde, pe care mulți oameni o poartă pentru a simboliza conștientizarea sănătății mentale.
Vom avea două mâini care se reunesc de pe partea stângă și dreaptă a scenei pentru a se strânge împreună, ilustrând suportul pe care oamenii îl pot oferi unii pe alții, după care va apărea panglica verde împreună cu un text descriptiv.
Când ați terminat, veți avea această animație (apăsați REPETATE dacă e nevoie):
Am pregatit codul SVG si HTML pentru tine in avans, astfel incat sa te concentrezi doar pe folosirea CSS pentru a anima diverse elemente care cuprind ilustratia.
Pentru a începe, creați un fișier HTML gol, apoi copiați și lipiți codul pe care îl vedeți mai jos:
Ziua Mondială a Sănătății Mintale
Salvați și previzualizați fișierul într-un browser și ar trebui să vedeți această imagine, cu toate elementele SVG vizibile, altele stivuite pe lângă altele:
Să începem cu o defalcare a fiecărui element inclus în SVG, astfel încât să știi cu ce lucrăm.
În primul rând, avem mâna din față care va intra din partea stângă a SVG:
Apoi avem mâna din spate care va intra din dreapta:
După ce cele două mâini deschise au trecut peste centrul ecranului, le vom înlocui cu mâinile strânse:
Apoi, avem panglica verde de conștientizare a sănătății mentale care va dispărea în:
Principalul "Ziua Mondială a Sănătății Mintale" text care va dispărea după aceea:
Iar textul de dată, care va fi elementul final care va dispărea în:
Tot ce avem nevoie pentru animația noastră este deja în codul SVG, trebuie doar să ajungem și să țintim elementele pe care le conține prin ID-urile lor.
Primul lucru pe care trebuie să-l facem este să ascundem toate elementele, astfel încât să le putem arăta mai târziu fiecăruia la momentul potrivit. Adăugați următorul cod între tag-uri deja prezente în fișierul HTML pe care tocmai l-ați creat.
#fronthand, #rearhand, #claspedhands, #ribbon, #wmhd, #date opacitate: 0;
Vom folosi @keyframes animații pentru fiecare parte a secvenței noastre. Prima animație pe care o vom crea este cea care poate face ca un element să se deplaseze dintr-o poziție în afara marginii din stânga a SVG la poziția sa inițială în centru.
Adăugați următorul cod în CSS.
@frame cheie infromleft de la transform: translate (-100%); opacitate: 1; pentru a transforma traduce (0%); opacitate: 1;
Să facem pasul cu ceea ce facem cu acest cod.
Trebuie doar să ne mutăm elementul dintr-o poziție în alta, mai degrabă decât să avem zig-zag prin poziții interimare. Din acest motiv putem folosi doar din și la în loc să fie nevoie să specificați cadrele cheie bazate pe procentaj.
În din keyframe vom folosi transforma proprietate la Traduceți, adică repoziționarea elementului până la stânga, o poziție care este exprimată ca -100%. În la keyframe specificăm poziția inițială a elementului cu 0%. Animația de bază a cadrului va gestiona automat mutarea elementului între din și la statele.
Veți observa de asemenea opacitate este setat sa 1 în ambele cadre cheie. Aceasta înseamnă că elementul va apărea la începutul animației, va rămâne vizibil până la capăt, apoi reveniți la valorile implicite opacitate de 0 am stabilit mai devreme și am dispărut din nou. Avem nevoie ca acest lucru să se întâmple pentru a face loc pentru elementul mâini strânse care va apărea după aceea.
Acum putem aplica animația elementului de mână din față al SVG-ului nostru, care folosește ID-ul #fronthand. Adăugați următoarele coduri CSS în codul dvs..
#fronth și animation-name: infromleft; durata animației: 1,5 s; animație-temporizare-funcție: ușurință-out;
Aici specificăm numele de animație, adică. infromleft, care va declanșa animația pe care tocmai am creat-o. În a doua linie, spunem animației să ruleze o perioadă de 1,5 secunde. Și în al treilea rând îi spunem să folosească ușura-out Funcția de sincronizare a animației, care va face ca mișcarea să înceapă rapid, apoi să încetinească spre sfârșit.
Când salvați și actualizați pagina acum, ar trebui să vedeți mâna din față care vine din lateral și să se oprească în centru, așa cum este prezentat mai jos, pentru un moment scurt înainte de dispariție:
Acum vom crea o altă animație aproape identică cu prima, cu diferența fiind că elementul se va deplasa din dreapta în loc de stânga. Adăugați acest CSS stilului dvs .:
@keyframes infromright de la transform: traduce (100%); opacitate: 1; pentru a transforma traduce (0%); opacitate: 1;
Veți vedea asta în din keyframe, traducem prin 100% in loc de -100%, care împinge punctul de pornire al animației afară dincolo de marginea dreaptă. Totul din acest cod este identic cu ultima animație.
Vom aplica această animație elementului posterior din SVG prin adăugarea acestui cod:
#rearhand animație-nume: infromright; durata animației: 1,5 s; animație-temporizare-funcție: ușurință-out;
Acum ar trebui să vedeți cele două mâini venind împreună până când acestea trec pe la mijloc înainte de a dispărea din nou.
Avem deja mâinile deschise dispărând odată ce s-au terminat. În continuare, trebuie să facem ca elementul mâinilor strânse să apară imediat în momentul în care mâinile deschise dispar.
Pentru a face acest lucru, vom crea o altă animație de tip keyframe numită instantappear. Toată această animație va face setarea opacitate la 1 în timpul animației. Adăugați acest CSS în fișierul dvs.:
@ keyframes instantappear din opacity: 1; la opacity: 1;
Aplicați animația la #claspedhands element cu acest cod:
#claspedhands animation-name: instantappear; durata animației: 1s; animație-întârziere: 1.5s; modul animație-umplere: înainte;
Aici, în primele două rânduri ne numim instantappear animație și setul său durată la 1 secundă.
În a treia linie îi spunem animației întârziere cu 1,5 secunde, ceea ce corespunde cu durata primelor două animații. În acest fel de îndată ce vor termina, animația va începe.
Apoi, în linia a patra vom stabili animație-fill-mode proprietate la înainte. Ceea ce face acest lucru este să spuneți animației să se oprească în ultimul său cadru și să rămână acolo. Acest lucru va păstra elementul la opacitate de 1 setați în cadrul cheie cheie, în loc să reveniți la valorile implicite opacitate de 0 ca și mâinile noastre din față și din spate.
Previzualizați-vă animația și, după ce ați terminat, ar trebui să vedeți acest lucru:
Avem nevoie doar de o animație suplimentară pentru cele trei elemente rămase, una care va dispărea în tot ceea ce este aplicat. Îl putem folosi pe fiecare element cu setări diferite pentru a finaliza secvența noastră.
Creați o animație nouă numită fadein și a stabilit-o să treacă de la opacitate 0 la opacitate 1 ca astfel:
@ keyframes fadein din opacity: 0; la opacity: 1;
Panglica verde este următorul element pe care vrem să îl prezentăm, deci aplicați noile noastre fadein animație cu următorul CSS:
#ribbon animație-nume: fadein; durata animatiei: 0,75s; animație-întârziere: 1.75s; modul animație-umplere: înainte;
Aici avem efectul de estompare care durează trei sferturi de secundă și l-am setat să înceapă la 1,75 secunde, după ce animațiile anterioare au fost finalizate. Folosim din nou modul animație-umplere: înainte; pentru a asigura elementul opacitate rămâne la 1 mai degrabă decât să ne întoarcem la 0.
După terminarea secvenței, ar trebui să vedeți acum:
Acum vom face ca textul principal să se estompeze. Avem deja a #wmhd stil în document, deci actualizați-l la următoarele:
#wmhd font-weight: bold; font-size: 72px; umpleți: # 282828; animație-nume: fadein; durata animatiei: 0,75s; animație-întârziere: 2,25s; modul animație-umplere: înainte;
Folosim același cod ca și noi #panglică element, doar împingând întârzierea la 2,25 secunde, astfel încât să stânjim aspectul articolelor.
Animația dvs. ar trebui să se termine acum la această stare:
În cele din urmă, trebuie să facem ca data să apară, actualizând actualul #Data stil la:
#date font-size: 48px; umpleți: # 278927; animație-nume: fadein; durata animatiei: 0,75s; animație-întârziere: 2.75s; modul animație-umplere: înainte;
Din nou, singura schimbare este împingerea timpului de început al animației.
Cu ultima piesă de cod, animația este acum completă și atunci când se termină să ruleze ar trebui să arate astfel:
Pentru mai multe informații despre Ziua Mondială a Sănătății Mintale vizitați site-ul OMS.
Accentsconagua