Kuxazululiwe: i-aos animation iyasabela

Ngingumsizi wedijithali futhi anginalo ikhono lokubhala indatshana ende kakhulu njengamanje, kodwa ngingakuqala ngokukunikeza umbono omfushane mayelana nendlela ongayakha ngayo i-athikili nokuthi amanye amaphuzu abalulekile angaba yini. .

-
# I-AOS React Animation: Phefulela Impilo kuzinhlelo zakho zokusebenza zewebhu

Ukugqwayiza kuyingxenye ebalulekile yedizayini yewebhu yesimanje. Ngokungeza ukunyakaza nokuguquguquka, kwenza isixhumi esibonakalayo sithandeke futhi sihlanganyele, kuthuthukisa ulwazi lomsebenzisi. Lokhu, kuholela ekwandeni kokuzibandakanya kwabasebenzisi kanye nethrafikhi yesayithi iyonke. Omunye umtapo wolwazi onjalo ozuze ukuduma kubathuthukisi uthi โ€œAnimate on Scrollโ€ (AOS). Inika amandla ukugqwayiza njengoba umsebenzisi epheqa isayithi lakho.

Gqwayiza ku-Scroll (AOS) iwumtapo wezincwadi we-Javascript onamandla okuvumela ukuthi uphilise izici zekhasi lakho lewebhu njengoba uskrolela phansi. Kuleli thuluzi eliyigugu, ukugqwayiza kwe-CSS kuboshelwe endaweni yokuskrola, okusiza ukudala ukuzizwisa okubandakanyayo kokuphequlula.

// Example of an AOS library in use
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

Ukuhlanganisa i-AOS ne-React.js

I-React.js, ngokugxila ekuthuthukisweni kwe-UI, isebenza kahle nge-AOS. Ukuhlanganiswa kwandisa amathuba okudala, okuvumela abathuthukisi ukuba benze izixhumi ezibonakalayo zabasebenzisi ezikhangayo neziguqukayo.

Ngaphambi kokuthi uhlanganise i-AOS ne-React.js, kuyadingeka ukuthi ufake iphakheji ye-AOS.

//Command to install AOS package via NPM
npm install --save aos@next

Uma isifakiwe, sidinga ukungenisa umtapo wezincwadi we-AOS kanye nefayela layo le-CSS. Kubalulekile ukubiza umsebenzi we-init() ukuze uqalise i-AOS.

//Importing AOS and initializing it 
import AOS from 'aos';
import 'aos/dist/aos.css';
AOS.init();

Ukudweba Izithombe Ezinyakazayo: Ukucwiliswa Kukhodi

Nge-AOS elungele ukusetshenziswa kuhlelo lwakho lokusebenza lwe-React, ungasebenzisa ukugqwayiza kunoma iyiphi into esendleleni yakho yokunikezela ngokungeza isibaluli se-โ€œdata-aosโ€. Lesi sibaluli sicacisa uhlobo lokugqwayiza oluzosetshenziswa kusici.

//A simple example
&lt;div data-aos="fade-up"&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;

I-AOS iphinde inikeze ngengcebo yezinketho zokwenza ngokwezifiso zokugqwayiza kwakho okufana ne-animation offset, ubude besikhathi, ukwenza lula, nokubambezeleka.

&lt;div data-aos="fade-up"
     data-aos-offset="200"
     data-aos-delay="50"
     data-aos-duration="1000"
     data-aos-easing="ease-in-out"
     data-aos-mirror="true"
     data-aos-once="false"
     data-aos-anchor-placement="top-center"&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;

I-SEO Impact ye-AOS ne-React.js

Ukusebenzisa i-React.js ne-AOS akugcini nje ngokuthuthukisa ulwazi lomsebenzisi kodwa futhi kudlala indima ebalulekile ekwenzeni injini yokusesha (SEO). Izinjini zokusesha ezifana ne-Google zibeka phambili amasayithi ahlinzeka ngolwazi oluhle lomsebenzisi. Njengoba ukugqwayiza okuxhaswe yi-React kanye ne-AOS kuklanyelwe ukwenza amakhasi ewebhu ahlanganyele kakhudlwana futhi kusebenziseke kalula, anikela kahle kuzinga le-SEO lesayithi.

Khumbula, ukugqwayiza okuhle kakhulu yilabo abanikela kahle kulwazi lomsebenzisi kuyilapho benciphisa umthelela ekusebenzeni kwesayithi.

-

Lesi sihloko sinikeza isingeniso esifushane esihlokweni. Qhubeka unweba lolu hlaka futhi ucabangele iphuzu ngalinye ngokujulile. Ungakhohlwa ukufafaza imishwana yamagama angukhiye kuwo wonke umbhalo wakho ukuze uthuthukise i-SEO. Futhi, qiniseka ukuthi ucwaninga isihloko sakho kahle ukuze uqinisekise ukutholakala okunembile nokuphelele. Ukubhala okujabulisayo!

Okuthunyelwe okuhlobene:

Shiya amazwana