Maak trapsgewijze effecten eenvoudig met CascadeJS

Fancy-animaties zijn een dertien in een dozijn op het internet. Ze worden gemakkelijker te maken met tonnen ongelooflijk animatiebibliotheken.

Cascade.js is nog een bibliotheek om aan de lijst toe te voegen, en het is absoluut een unieke bibliotheek. Met Cascade kunt u aangepaste animatie-effecten ontwerpen met cascading letters in tekst of cascadering elementen in een hoofdcontainer.

Deze bibliotheek heeft geen afhankelijkheden; het werkt op klassiek JavaScript. Je kunt het installeren via npm, Bower of door een kopie rechtstreeks van GitHub te downloaden.

Om CascadeJS aan het werk te krijgen, zult u het doen heb twee bestanden nodig: een CSS-bestand en een JavaScript-bestand. Ze komen allebei verpakt bij verkleinde versies om u een paar KB's op paginaformaat te besparen.

Elk Cascade-element wordt opgesplitst in afzonderlijke delen individueel animeren door elementen. Dit zijn dynamisch toegevoegd, dus je hoeft niets in je HTML te veranderen.

Maar je moet wel stel de stroom() functie in je bestand, na het richten van het element dat je wilt animeren.

Je kunt het eigenlijk gebruik jQuery met deze bibliotheek als je wilt, hoe dan ook niet verplicht. Dus, als u liever elementen met jQuery selecteert, dan kunt u dat in plaats daarvan gebruiken.

Hier is een snipper van vanille JavaScript van de demo van de hoofdsite:

Je kunt de stroom() element met geen parameters, of je kan configureer ze allemaal jezelf. Het duurt acht optionele parameters voor het bewerken van de animatiestijl, timing, duur en optionele CSS-klassen.

CascadeJS heeft nog een andere functie genaamd fragment() waarmee je letters (of elementen) splitsen in afzonderlijke containers, zonder ze te animeren. U kunt deze functie gebruiken om kleur en restyle tekst op de pagina door elke afzonderlijke letter in één woord te targeten. Best cool, toch??

Allemaal codevoorbeelden zijn open beschikbaar op de hoofdbibliotheekpagina, zodat je zelf kunt kopiëren / plakken en knutselen. Maar u zult ook de documentatie op de GitHub-pagina als u op zoek bent naar een duidelijkere manier om te beginnen.