Advertisement
  1. Web Design
  2. SVG

Paano Bibigyan ng Buhay ang SVG Ribbon ng World Mental Health Day

by
Read Time:15 minsLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Narito na ang "World Mental Health Day ng World Health" Organization, ika-10 ng Oktubre 2018, upang makatulong sa pagpapalawak ng kaalaman tungkol sa mga isyu ng kalusugang pangkaisipan. Ngayong taong ito, ang pokus ay ang paghihikayat sa ating lahat na sumuporta, at lumahok sa lahat ng mga programa at serbisyo na makaaabot sa mga kabataan, upang mabigyang lunas ang mga isyu nang maaga.

Sa pagsisimula ng araw, gagamit tayo ng CSS upang bigyang buhay ang SVG na nakasentro sa berdeng ribbon na sinusuot ng karamihan na sumisimbolo sa kaalaman tungkol sa kalusugang pangkaisipan.

Gagamit tayo ng dalawang kamay na magsasama mula sa kaliwa at kanang bahagi ng entablado upang pagsamahin, na naglalarawan sa suporta na maibibigay ng mga tao sa isa’t-isa, at pagkatapos nito makikita ang berdeng ribbon na may kasamang mga salitang naglalarawan.

Kapag natapos mo na ito, ikaw ay magkakaroon ng animation na ito (pindutin ang RERUN kung kinakailangan):

1. Kunin ang Starter Code

Inihanda ko para sa iyo ang SVG at HTML code nang maaga upang ikaw ay makapagpokus sa paggamit ng CSS upang bigyan ng buhay ang iba’t-ibang elemento na bumubuo sa ilustrasyon.

Sa pagsisimula, gumawa ng walang laman na HTML file, pagkatapos kopyahin at i-paste ang code na nakikita mo sa ibaba:

I-save at i-preview ang file sa isang browser at dapat makita mo ang larawang ito, kasama ang lahat na makikitang elemento ng SVG, ang iba ay nasa ibabaw ng iba pa:

World Mental Health Day 2018 first imageWorld Mental Health Day 2018 first imageWorld Mental Health Day 2018 first image

SImulan natin ang breakdown ng bawat elemento na kasama sa SVG upang malaman mo ang ating ginagawa.

Una dito, tayo ay may kamay sa harap na manggagaling mula sa kaliwang bahagi ng SVG:

World Mental Health Day 2018 the handWorld Mental Health Day 2018 the handWorld Mental Health Day 2018 the hand

At mayroon din tayong kamay sa likod na manggagaling mula sa kanan:

World Mental Health Day 2018 right handWorld Mental Health Day 2018 right handWorld Mental Health Day 2018 right hand

Pagkatapos na magkasalubong ang dalawang bukas na kamay sa gitna ng screen, papalitan natin ang mga ito ng magkahawak na mga kamay:

World Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped hands

Pagkatapos ay magkakaroon na tayo ng berdeng ribbon ng kaalaman tungkol sa kalusugang pangkaisipan na maglalaho:

World Mental Health Day 2018 green ribbonWorld Mental Health Day 2018 green ribbonWorld Mental Health Day 2018 green ribbon

Ang pangunahing “World Mental Health Day” teksto ay maglalaho pagkatapos nito:

World Mental Health Day 2018 text labelWorld Mental Health Day 2018 text labelWorld Mental Health Day 2018 text label

At ang date text, na magiging huling elemento na maglalaho:

World Mental Health Day 2018 subtitleWorld Mental Health Day 2018 subtitleWorld Mental Health Day 2018 subtitle

2. Magsimulang Maglagay ng CSS

Ang lahat ng kakailanganin natin para sa ating animasyon ay nasa SVG code na, kailangan lang nating gamitin ito at tukuyin ang mga elementong nilalaman nito sa pamamagitan ng kanilang mga IDs.

Ang unang bagay na kailangan nating gawin ay itago ang lahat ng elemento upang maipakita natin sa susunod ang bawat isa sa tamang panahon. Ilagay ang mga sumusunod na code sa pagitan ng <style></style> mga tag na makikita na sa HTML file na iyong ginawa.

3. Gawin ang Front Hand na Pumasok Mula sa Kaliwa

Gagamit tayo ng @keyframes animations sa bawat bahagi ng ating sequence. Ang unang animation na gagawin natin ay ang makakagalaw ng elemento mula sa posisyon sa labas ng kaliwang dulo ng SVG sa orihinal na posisyon nito sa gitna.

Ilagay ang mga sumusunod na code sa iyong CSS.

Talakayin natin kung ano ang gagawin natin sa code na ito.

Kailangan natin ilipat ang ating elemento mula sa isang posisyon papunta sa iba, sa halip na gamitin ang zigzag sa pamamagitan ng interim na posisyon. Sa dahilang ito magagamit natin ang from at to kaysa sa pagtukoy ng percentage based keyframes.

Sa from keyframe, gagamit tayo ng transform property sa translate, i.e. reposition, ang elemento hanggang sa kaliwa, isang posisyon na pinapahayag bilang -100% Sa to keyframe tutukuyin natin ang orihinal na posisyon ng elemento sa 0%. Ang keyframe animation ang awtomatikong maglilipat ng elemento sa pagitan ng from at to na estado.

Mapapansin mo rin na ang opacity ay nakatakda sa 1 sa parehas na keyframes. Ito ay nangangahulugan na ang elemento ay lalabas sa simula ng animation, at makikita hanggang sa dulo, pagkatapos ibalik sa default opacity na 0 na itinakda natin kanina at mawawala muli. Kailangan nating gawin ito upang magbigay ng daan para sa clasped hands element na makikita sa susunod.

Ngayon maaari na nating lagyan ng animation sa front hand na elemento ng SVG, na gumagamit ng ID #fronthand. Ilagay ang mga sumusunod na CSS sa iyong code.

Dito tinutukoy namin ang pangalan ng animation, i.e. infromleft, na magsisimula ng animation na ginawa natin. Sa ikalawang linya, sinasabi namin na ang animation ay kikilos sa loob ng 1.5 segundo. Sa ikatlong linya sinasabi natin na gumamit ng ease-out animation timing function, na magpapabilis sa galaw at magpapabagal sa dulo.

Kung isa-save mo at ire-refresh ang iyong page ngayon dapat mong makita ang front hand na papasok mula sa gilid at titigil sa gitna, tulad ng makikita sa ibaba, ilang sandali bago ito mawala:

World Mental Health Day 2018 handWorld Mental Health Day 2018 handWorld Mental Health Day 2018 hand

4. Gawin ang Rear Hand na Pumasok mula sa Kanan

Ngayon gagawa na tayo ng isa pang animation na kaparehas ng nauna, na naiiba lamang ang pagpasok ng elemento mula kanan sa halip na kaliwa. Ilagay ang CSS na ito iyong estilo:

Makikita mo na sa from keyframe, pinakita namin na 100% sa halip na -100%, na magtutulak sa animation starting point sa kanang dulo. Ang lahat ng iba pa sa code na ito ay kaparehas ng huling animation.

Ilalagay natin ang animation na ito sa rear hand na elemento ng SVG sa pamamagitan ng paglagay ng code na ito:

Ngayon dapat makita mo ang dalawang kamay na magkasama hanggang sa ang mga ito ay magsalubong bago mawalang muli.

World Mental Health Day 2018 hands crossing overWorld Mental Health Day 2018 hands crossing overWorld Mental Health Day 2018 hands crossing over

5. Gawing Magkadikit ang mga Kamay

Mayroon na tayong dalawang kamay na bukas na mawawala pagkatapos nitong gumalaw. Susunod, kinakailangan natin ang magkadikit na kamay na elemento na lumabas sa eksaktong panahon na nawala ang mga bukas na kamay.

Upang ito ay magawa, gagawa tayong muli ng isa pang keyframe animation na tinatawag na instantappear. Ang gagawin lamang ng animation na ito ay magtakda ng opacity sa 1 sa buong animation. Ilagay ang CSS na ito sa iyong file:

Ilagay ang animation sa #claspedhands na element na may code na ito:

Dito, sa unang dalawang linya sinasabi natin na may instantappear animation at magtakda nito duration sa 1 segundo.

Dito, sa unang dalawang linya sinasabi natin na may delay ng 1.5 segundo, na tumutugma sa durasyon ng unang dalawang animation. Sa ganitong paraan pagkatapos nito, magsisimula na ang animation.

Pagkatapos sa ikaapat na linya tayo ay magtatakda ng animation-fill-mode sa forwards. Ano ang gagawin nito upang sabihin sa animation na tumigil sa huling frame at manatili dito. Mapapanatili nito ang elemento sa opacity ng 1 na itinakda sa end keyframe, sa halip na bumalik sa default opacity na 0 tulad ng ginawa ng harap at likod na mga kamay.

I-preview ang iyong animation at kung ito ay tapos na ito dapat ang iyong makita:

World Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped hands

6. Alisin ang Natitirang Elemento Gamit ang Reusables Keyframes

Kailangan lang natin ng isa pang animasyon para sa tatlong natitirang elemento, ito ang naglalaho sa anumang bagay na pinaglalagyan nito. Maaari nating gamitin ito sa bawat elemento na may iba’t-ibang setting upang mabuo ang ating sequence.

Gumawa ng bagong pangalan ng animation na may pangalan na fadein at itakda ito sa transisyon mula opacity 0 hanggang opacity 1 tulad ng:

Ang berdeng ribbon ang susunod na elemento na nais nating lumabas, kaya ilagay ang bagong fadein animation dito kasama ng mga sumusunod na CSS:

Dito magkakaroon tayo ng fade in effect na magtatagal ng tatlong kapat ng isang segundo, at itinakda namin ito upang magsimula sa 1.7 segundo, matapos na makumpleto ang naunang animation. Muli, gagamitin natin ang animation-fill-mode: forwards; upang tiyakin ang elemento ng opacity na mananatili sa 1 sa halip na bumalik sa 0.

Kung mabuo ang iyong sequence dapat makita mo na ito ngayon:

World Mental Health Day 2018 final animationWorld Mental Health Day 2018 final animationWorld Mental Health Day 2018 final animation

Ngayon gagawin na rin natin main text na maglaho din. Tayo ay may #wmhd na estilo sa dokumento, kaya i-update ito sa mga sumusunod:

Gagamit din tayo ng parehong code tulad ng ginawa natin sa #ribbon element, na maaantala ng 2.25 segundo kaya paunti-unti ang paglabas ng bawat gamit.

Ang iyong animation ay dapat matapos sa ganitong estado:

World Mental Health Day 2018 finish stateWorld Mental Health Day 2018 finish stateWorld Mental Health Day 2018 finish state

Sa huli, kailangan nating ipakita ang petsa, kaya baguhin ang umiiral na #date style sa:

Muli, ang pagbabago lamang ay ang paglabas ng oras ng panimula ng animation.

Pagtatapos

Sa huling piraso ng code, ang iyong animation ay kumpleto na at kung ito ay tapos nang kumilos dapat ganito ang kanyang anyo:

World Mental Health Day 2018 complete clasping hands animationWorld Mental Health Day 2018 complete clasping hands animationWorld Mental Health Day 2018 complete clasping hands animation

Para sa iba pang impormasyon tungkol sa World Mental Health Day bisitahin ang WHO website.

Pag-aralan ang Lahat tungkol sa CSS Animation:

Alamin ang iba pa tungkol sa SVG Animation:


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.