Efekt animace při psaní

Ú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.