nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Maak trapsgewijze effecten eenvoudig met CascadeJS

Fancy-animaties zijn een dozijn dozijn op het internet. Ze worden eenvoudiger te maken met tonnen ongelooflijke animatiebibliotheken .

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

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

Om CascadeJS te laten werken, hebt u twee bestanden nodig : een CSS-bestand en een JavaScript-bestand. Ze zijn allebei verpakt met verkleinde versies om u een paar kB op paginaformaat te besparen.

Elk Cascade-element wordt opgesplitst in afzonderlijke delen die afzonderlijk elementen animeren . Deze worden dynamisch toegevoegd, zodat u niets in uw HTML hoeft te wijzigen.

Maar u moet de flow() -functie in uw bestand instellen, na het richten van het element dat u wilt animeren.

Je kunt jQuery daadwerkelijk met deze bibliotheek gebruiken als je wilt, maar het is niet verplicht . Dus als u liever elementen met jQuery selecteert, kunt u dat in plaats daarvan gebruiken.

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

U kunt het flow() -element zonder parameters doorgeven, of u kunt ze allemaal zelf configureren . Er zijn acht optionele parameters nodig om de animatiestijl, timing, duur en optionele CSS-klassen te bewerken.

CascadeJS heeft een andere functie, fragment(), waarmee je letters (of elementen) kunt opsplitsen in afzonderlijke containers, zonder ze te animeren. U kunt deze functie gebruiken om tekst op de pagina in te kleuren en opnieuw vorm te geven door elke afzonderlijke letter in een woord te richten. Best cool, toch?

Alle codevoorbeelden zijn openlijk beschikbaar op de hoofdbibliotheekpagina, zodat u deze zelf kunt kopiëren / plakken en sleutelen. Maar je vindt ook de documentatie op de GitHub-pagina als je op zoek bent naar een duidelijkere manier om te beginnen.

Hoe word je een Design Thought Leader?

Hoe word je een Design Thought Leader?

Wat is er nodig om een ​​thought leader in de ontwerpgemeenschap te worden? Met 'thought leader' bedoel ik iemand die een statement kan maken over design of ontwerpers en waar naar geluisterd, geblogd, geretweet en betwist kan worden door duizenden professionele ontwerpers en anderen in gerelateerde industrieën.We g

(Technische en ontwerptips)

7 manieren om uw productiviteit aanzienlijk te vergroten

7 manieren om uw productiviteit aanzienlijk te vergroten

In 1915 presenteerde Albert Einstein zijn briljante en revolutionaire relativiteitstheorie. In de drie jaar voorafgaand daaraan had hij zich volledig toegewijd aan zijn schepping, zonder te worden afgeleid door iets anders. We suggereren niet dat je drie jaar aan een bepaald project werkt (tenzij je dat echt wilt), maar deze benadering om volledig op één stuk werk te focussen is een levendige illustratie van de nieuwe werktrend ' Doing Less'.Z

(Technische en ontwerptips)