Úvod
V tomto článku budeme implementovat efekt animace typu reagovat pomocí knihovny typu reagovat. Chtěli jste někdy přidat animaci psaní nebo efekt podobný psacímu stroji na svůj web respond js nebo aplikaci reagovat js? Tento tutoriál je pro vás.
Implementace
Předpokládám, že již máte projekt reakce js.
V adresáři projektu otevřete cmd a spusťte následující příkaz k instalaci závislosti
npm i react-typed
Po instalaci přejděte ke komponentě, u které chcete implementovat tento efekt psaní, a importujte knihovnu, jak je znázorněno níže;
....
import Typed from "react-typed"
....
//call this within your jsx
<Typed
strings={[
"I'm a Full Stack Developer",
"I Love Software Development",
"I Love All My Subscribers",
]}
typeSpeed={150}
backSpeed={100}
loop
/>
Výše uvedený kód je samovysvětlující.
- řetězce props používá řadu příkazů k použití efektu animace psaní
- typeSpeed určuje dobu trvání animace v milisekundách
- backSpeed určuje dobu v milionech pro přesun zpět.
- smyčka je logická hodnota udávající, zda se má řetězec opakovat
Existuje mnoho dalších rekvizit nebo konfigurace a více se můžete dozvědět zde npm reagovat-typed
Až to uděláte, uložte soubory a zkontrolujte prohlížeč.
Poznámka: Zadaný komponenta vykreslí každý příkaz v span
tag a můžete si jej přizpůsobit tak, jak chcete.
Pokud chcete kód do tohoto tutoriálu, který je implementován ve videu níže; Zde najdete kód k této ukázce
Kredit obrázku na pozadí @ FreeVector.com
https://www.freevector.com/fluid-gradient-background-30355
Shrnutí
Implementovali jsme jednoduchý efekt animace psaní v projektu reagovat js a vše vypadá skvěle. Doufám, že to můžete zahrnout do svého příštího projektu js.
Pokud vám tento návod pomohl, sledujte mě zde a přihlaste se k odběru mého kanálu YouTube níže. Předem děkuji.
Video tutoriál
Pokud se chcete podívat na krátký návod, jak implementovat efekt animace při psaní reagovat js jako na psacím stroji, klikněte na video níže.
Nezapomeňte prosím lajkovat, komentovat, odebírat můj kanál YouTube a sdílet video se svými přáteli.