Skapa helt animerade widgets med Shift.css

Webanimering erbjuder ett sätt att ta tag i människors uppmärksamhet och rita dem vidare till en webbplats. Det finns massor av verktyg där ute skapa gratis animeringar men Shift.css är en av de nyaste i gänget.

Det är en fri öppen källkod gjord för att skapa dynamiska animeringar inom alla behållare. Och dessa animationer är inte låsta i en sekvens. Du kan faktiskt bygga anpassade animeringar för varje element i blocket och tillämpa dessa i en viss ordning.

De Skift demo sida kan visa dig mycket bättre än jag kan förklara i ord.

En sak du märker är att varje element inuti behållaren är ett separat HTML-element. Oavsett om det är en SVG eller en bild eller vad som helst, kan du animera allt separat till skapa din egen anpassade animationseffekt.

Biblioteket kommer med två filer, a .css och .js bibliotek, och båda måste vara läggs till i dokumenthuvudet.

Jag kan inte hitta någon GitHub repo för det här projektet, så du behöver ladda ner filerna direkt från Shift.css webbplats.

Nästa steg är att definiera ett behållarelement med något innehåll. Klassnamn är viktiga, så varje animeringselement behöver ha klassen .shift-elementet applicerad.

Tillsammans med dessa klasser kan du också lägg till HTML5-dataattribut för att definiera hur animationen fungerar. Just nu finns det bara tre men de borde räcka för att anpassa en full animeringseffekt.

1. data animering: Namnet på animationen
2. datafördröjning: Totalt fördröjning (i sekunder) innan animeringen startar
3. data varaktighet: Total längd (i sekunder) av animationen

Animationsnamnet måste vara a fördefinierad animering skapad för Shift-biblioteket. Just nu finns det 15 animationsnamn att välja mellan. Du kan se dem listade längst ned på Shift.css hemsida.

Bara kopiera klistra in vad du än vill in i animationsnamnsinställningen och du borde vara bra att gå! Till exempel, om jag ville använda avfasningsfilen, skulle jag lägga till data animation = "shift_exitFade" som en dataattribut till vad som helst element ska animera på det sättet. Lätt som en plätt.

Jag önskar att det här biblioteket kom med fler alternativ i JavaScript eftersom det skulle låta utvecklare ha så mycket mer kontroll över placeringen och funktionerna. Men för en enkel (och fri) animationsram kan jag inte klaga.

Shift.css är perfekt för nyare utvecklare som vill skapa mer komplexa animationsstilar utan att skriva verbal kod från början.