Hoe Microinteracties snel aan uw website toe te voegen

In de snelle tip van vandaag laat ik u zien hoe u microinteracties aan uw website kunt toevoegen met behulp van een JavaScript-bibliotheek met de naam micron.js. Met micron.js kunt u subtiele animaties toevoegen aan de elementen van uw webpagina zonder de stijlen zelf te hoeven schrijven - alles wordt gedaan met behulp van gegevenskenmerken in uw markup. Laten we kijken!

Bekijk de Micron.js Screencast

1. Download micron.js

Ga naar de startpagina van micron.js en je vindt, samen met enkele demo's, een link naar de repo. Om aan de slag te gaan, hebt u het CSS-bestand en het JavaScript-bestand nodig, waarvan de CDN-koppelingen er als volgt uitzien:

Voeg deze toe aan uw pagina terwijl u ze ziet, of als u een CodePen-pen gebruikt, voegt u de koppelingen naar de CSS- en JavaScript-tabbladen toe in de peninstellingen.

2. Voeg een Microinteractie toe

Laten we als voorbeeld een ankerelement gebruiken. Neem het volgende:

Standaard

Door op zo'n anker te klikken, gebeurt er helemaal niets. Door een gegevenskenmerk toe te voegen met de naam van data-micron, we kunnen wat flair toevoegen aan ons anker.

Standaard

Hier ziet u dat we de waarde hebben toegevoegd schudden naar ons attribuut. Dit zou een van een aantal waarden kunnen zijn, die ons allemaal een andere interactie geven:

• schudden
• vervagen
• gelei
• stuiteren
• tada
• groef
• schommel
• knijpen
• flikkeren
• ruk
• knipperen
• knal

Wanneer u nu op het anker klikt, ziet u visuele feedback in de vorm van onze micro-interactie.

3. Pas animatieduur aan

Als u een ander kenmerk toevoegt, kunnen we de duur van de animatie wijzigen:

data-micron-duration = "1"

De opgegeven waarde is in seconden, dus het bovenstaande attribuut zou de standaardanimatie een seconde langzamer maken.

4. Pas Verlichtingsfunctie aan

Je begint dit nu onder de knie te krijgen, toch? Laten we nog een attribuut toevoegen om de versnellingsfunctie van de animatie aan te passen.

data-micron-timing = "lineaire"

Nogmaals, een aantal bekende waarden worden hier ondersteund:

• lineair
• gemak-in
• gemak-out
• gemak-in-out

5. Bind aan een ander element

We kunnen micron.js gebruiken om andere elementen te targeten dan waarop wordt geklikt, dit keer met twee gegevenskenmerken:

data-micron-bind = "true" data-micron-id = "target"

In dit geval zeggen we dat binding is waar, en dat we willen dat de animatie effect heeft op een element met de ID van doelwit. 

Bekijk de onderstaande demo voor een verzameling van al deze voorbeelden, inclusief de binding (klik op de gebonden knop en zie de rode div animatie):

Conclusie

Micron.js doet zelfs meer voor micro-interacties dan we in deze tutorial hebben aangetoond, bezoek de website, ga spelen en ontdek het zelf!

Kom meer te weten