Tuesday.css is momenteel de populairste animatiekiosk
Je zou nu al bekend moeten zijn met Animate.css zoals de primaire animatiebibliotheek bij webontwerpers.
Maar er is een nieuw kind in het blok genaamd dinsdag, en zijn webanimatie met geweld nemen.
Deze nieuwe bibliotheek is niet heel anders qua indeling of implementatie. Maar dinsdag komt met een handjevol nieuwe CSS-animaties die jij kan nergens anders vinden.
Deze nieuwe effecten zijn veel subtieler van aard dus dat doen ze echt mooi opgaan in een pagina. Hier is een kleine lijst met effecten je kunt kiezen uit:
- Vervagen en uitbreiden
- Vervagen en krimpen
- Stempelen en stuiteren
- Gebogen schommel
- Kom binnen van links / rechts
- Squash / stretch
- Scharnier
Als je deze lijst op de demopagina doorloopt, zul je merken dat alle effecten aanwezig zijn één ding gemeen: natuurkunde.
Ze voelen allemaal heel erg realistisch voor de basis van de natuurkunde, en dat lijken ze zich houden aan de wetten van de zwaartekracht. Geen van deze animaties is over-the-top of vreemd. Zij zijn subtiel maar toch merkbaar en nog belangrijker, dat zijn ze geloofwaardig.
Ik denk dat dinsdag een van de beste moderne CSS-animatiebibliotheken is omdat het presenteert een realistisch beeld van webanimatie.
We moeten geen gekke interface-effecten ontwerpen die eruit springen als een pijnlijke duim. Subtiliteit is altijd de naam van het spel omdat het creëert een gevoel van interactiviteit vanaf elke gebruikersinvoer of het een klik of een scroll is.
Het probleem was altijd om deze animaties helemaal opnieuw te schrijven en ervoor te zorgen dat ze er goed uitzagen. Maar nu met dinsdag kunnen je zorgen de deur uit.
Net download een kopie van GitHub en voeg het toe .css bestand naar uw pagina. Je kunt het eigenlijk gebruik de CDN-versie rechtstreeks van GitHub als u niets lokaal wilt downloaden.
Zodra dit is toegevoegd aan uw webpagina, gewoon voeg het toe .bezielen klasse samen met een van de propriëtaire klassen vermeld in de GitHub-repo. Uw code kan er ongeveer zo uitzien:
Het is dinsdag.
Kijk eens naar de volledige documentatie zien een lijst met alle in / uit animatieklassen.
Als u met JavaScript werkt, kunt u ook voeg deze klassen dynamisch toe bij klik- / zweefgebeurtenissen. Op deze manier kunt u de animatieklasse alleen toevoegen wanneer een gebruiker op een knop klikt, die bij klikken lijkt te animeren.
Er is zoveel dat je kunt doen met dinsdag, en het is echt de nieuwe Animate.css voor pragmatische UI-animaties.
Neem een kijkje op de demopagina om het live in actie te zien, en je kunt meer leren door hun te lezen “in de maak” post die vertelt hoe het Shakr-team dinsdag creëerde.
