Faqja që flet për ju (për) është një nga faqet tuaja më të rëndësishme Site Web. Kjo i lejon njerëzit t'ju njohin më mirë dhe të vendosin nëse janë të kënaqur duke ndërmarrë hapin tjetër. Nëse po kërkoni një mënyrë të thjeshtë për të përfshirë rrëfimin në këtë faqe, do t'ju pëlqejë ky tutorial. Ne do të përdorim efektet lëvizëse të Divi për të krijuar një tranzicion të qetë të rrëfimit në rrotull. Sapo një pjesë e historisë zbehet, shfaqet një pjesë tjetër. Kjo i jep vizitorët ndjenja e të lexuarit të një historie interesante. 

Rezultati i mundshëm përfundimtar

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

Animacion Divi

1. Krijoni pjesën e parë të ekranit të plotë të faqes

Shto një seksion të ri

Ngjyrë e sfondit

Filloni duke shtuar një seksion të parë në faqen tuaj Rreth. Hapni cilësimet e seksionit dhe ndryshoni ngjyrën e sfondit në të zezë.

  • Ngjyra e sfondit: # 000000
Seksioni i sfondit Divi

sizing

Pastaj kthejeni seksionin në ekran të plotë duke shtuar një lartësi minimale në parametrat e madhësisë.

  • Lartësia e minuar: 100vh
Lartësia e seksionit Divi

2. Shtoni një linjë të animuar

Shto një rresht të ri

Struktura e kolonës

Pastaj shtoni një rresht të ri në seksionin tuaj duke përdorur strukturën e kolonës së mëposhtme:

Shtoni një vijë ndarëse

sizing

Hapni parametrat e linjës dhe lejoni që linja të zërë tërë gjerësinë e enës së seksionit duke modifikuar parametrat e dimensionimit.

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%
Konfigurimi maksimal i gjerësisë divi

ndarje

Pastaj shtoni mbushjen majtas dhe djathtas në madhësi të ndryshme të ekranit.

  • Mbushja e majtë: 20vw (tavolinë), 10vw (tablet dhe telefon)
  • Mbushja e duhur: 20vw (tavolinë) 10vw (tablet dhe telefon)
Personalizo mbushjen e divi-ve

gjallëri

Për të rritur efektin e tregimit, do të përdorim gjithashtu një animacion të zbehur për linjën.

  • Stili i animacionit: Zbehet
  • Kohëzgjatja e animacionit: 3000ms
  • Lakorja e shpejtësisë së animacionit: lehtësi-marrje
  • Përsëritja e animacionit: një herë
Animacion i seksionit Divi

pozitë

Në fund, ne do të sigurohemi që linja të pozicionohet në qendër të enës së seksionit duke modifikuar opsionet e pozicionit.

  • Pozicioni: absolut
  • Vendndodhja: Qendra
Pozicioni i hequr divi

3. Vendosni një titull me efekte lëvizëse

Shtoni modulin e tekstit # 1 në kolonë

Shto përmbajtje H1

Moduli i vetëm që na nevojitet në këtë rresht është një modul teksti me të përmbajtje H1

Dizajni i titrave të ndara

Titulli 1 Cilësimet e tekstit

Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit H1 si më poshtë:

  • Shkronja e titullit: Nunito
  • Pesha e shkronjave të titullit: Gjysmë e theksuar
  • Ngjyra e tekstit të kokës: #ffffff
  • Madhësia e tekstit të kokës: 7vw (desktop), 9vw (tabletë), 11vw (telefon)
Konfigurimi i shkronjave Divi

Lëvizja vertikale

Ne gjithashtu do të shtojmë një animacion delikate vertikale.

  • Aktivizoni lëvizjen vertikale: Po
  • Fillimi i kompensimit: 0 (me 50%)
  • Kompensimi mesatar: 10 (me 100%)
  • Kompensimi përfundimtar: 10
Animacion teksti Divi

Efektet lëvizëse hyrëse dhe dalëse

Me një efekt venitje dhe hyrëse.

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 100%
  • Opaciteti mesatar: 100% (me 55%)
  • Hapësia e mbarimit: 0% (në 62%)
Përzgjedhja e animacionit të errësirës

Shkallëzimi i efektit të lëvizjes lart e poshtë

E fundit, por jo më pak e rëndësishmja, ne gjithashtu do të përdorim një efekt lëvizjeje në shkallë lart dhe poshtë.

  • Aktivizo shkallëzimin lart e poshtë: Po
  • Shkalla e fillimit: 100% (deri në 40%)
  • Shkalla mesatare: 95% (deri në 74%)
  • Shkalla e përfundimit: 90%
Teksti i animacionit Divi

4. Klononi një seksion të tërë një herë dhe përfshini tekstin e përshkrimit me efektet lëvizëse

Ndryshoni titullin dhe përmbajtjen

Pasi të keni përfunduar seksionin e parë, mund ta klononi atë plotësisht. Hapni modulin e tekstit brenda kontejnerit të seksionit kopjuar dhe përdorni një kopje H2.

Seksioni i dublikuar divi

Modifikoni parametrat e tekstit të modulit Tekst H2

Ndryshoni rregullimet e tekstit H2 në përputhje me rrethanat:

  • Titulli 2 Policia: Nunito
  • Titulli i fontit 2: gjysëm i guximshëm
  • Pika 2 Ngjyra e tekstit: #ffffff
  • Pika 2 Madhësia e tekstit: 5vw (desktop), 7vw (tabletë), 8vw (telefon)
  • Lartësia e linjës 2: 1em (zyrë), 1.2em (tablet dhe telefon)
histori në lëvizje

Shtoni modulin e tekstit # 2 në kolonë

Shto përmbajtje

Më pas, shtoni një modul tjetër teksti në kolonën me a përmbajtje përshkrimi i zgjedhjes suaj.

histori në lëvizje

Cilësimet e tekstit

Ndryshoni cilësimet e tekstit për modulin e tekstit si më poshtë:

  • Shkronja e tekstit: Open Sans
  • Ngjyra e tekstit: #ffffff
  • Madhësia e tekstit: 1vw (desktop), 2.5vw (tabletë), 3vw (telefon)
  • Lartësia e vijës së tekstit: 3.1em (tavolinë), 2.5em (tabletë dhe telefon)
histori në lëvizje

ndarje

Përdorni gjithashtu një marzh të lartë.

  • Marzhi i sipërm: 8vw
histori në lëvizje

Efektet lëvizëse hyrëse dhe dalëse

Tjetra, kaloni te efektet e lëvizjes në skedën e përparuar dhe përdorni cilësimet e mëposhtme të zbehjes dhe zbehjes:

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 100%
  • Opaciteti mesatar: 0% (me 31%)
  • Opaciteti përfundimtar: 0% (deri 35%)
Animacion lëvizës i modulit të tekstit Divi

Shkallëzimi i efektit të lëvizjes lart e poshtë

Shtoni gjithashtu një efekt shkallëzimi lart e poshtë.

  • Aktivizo shkallëzimin lart e poshtë: Po
  • Shkalla e fillimit: 100% (deri në 40%)
  • Shkalla mesatare: 95% (deri në 74%)
  • Shkalla e përfundimit: 90%
Moduli i tekstit divi i adaptimit të animacionit

Tani mund ta klononi këtë seksion të fundit sa më shumë që të jetë e mundur. Sidoqoftë, do t'ju duhet të rregulloni përmbajtje të çdo seksioni për nevojat tuaja.

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Rezultati i kampionit

Mendimet e fundit

Në këtë artikull, ne ju treguam se si të tregoni një histori në faqen tuaj rreth duke përdorur efektet e integruara të lëvizjes së Divi. Efekti që krijuam lejon që kopja e njëpasnjëshme të zbehet brenda dhe jashtë, duke i dhënë vizitorët si të lexosh një histori. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.