Maak volledig geanimeerde widgets met Shift.css
Web-animatie biedt een manier om de aandacht van mensen trekken en trek ze verder naar een website. Er zijn veel tools beschikbaar maak gratis animaties maar Shift.css is een van de nieuwste in het stel.
Het is een gratis open source framework gemaakt voor het maken dynamische animaties binnen elke container. En deze animaties zijn niet opgesloten in één reeks. U kunt eigenlijk aangepaste animaties maken voor elk element in het blok en pas deze toe in een bepaalde volgorde.
De Shift demopagina kan je veel beter laten zien dan ik in woorden kan uitleggen.
Een ding dat je zal opvallen, is dat elk element in de container zit een apart HTML-element. Of het nu een SVG is of een afbeelding of wat dan ook, je kunt alles afzonderlijk animeren maak je eigen aangepaste animatie-effect.
De bibliotheek wordt geleverd met twee bestanden, een .css en .js bibliotheek, en beide moeten zijn toegevoegd aan uw documentkop.
Ik kan geen GitHub repo vinden voor dit project, dus je zult het moeten doen download de bestanden rechtstreeks van de Shift.css-website.
De volgende stap is om definieer een containerelement met wat inhoud. Klassenamen zijn belangrijk, dus elk bewegingselement moet dat ook heb de klas .shift-element toegepast.
Samen met deze klassen, kunt u ook voeg HTML5-gegevenskenmerken toe om te definiëren hoe de animatie werkt. Op dit moment zijn er slechts drie, maar ze zouden voldoende moeten zijn om een volledig animatie-effect aan te passen.
- data-animatie: Naam van de animatie
- data-delay: Totale vertraging (in seconden) voordat de animatie start
- data-duur: Totale lengte (in seconden) van de animatie
De naam van de animatie moet een zijn voorgedefinieerde animatie gemaakt voor de Shift-bibliotheek. Op dit moment zijn er 15 animatienamen om uit te kiezen. Je kunt ze onder aan de startpagina van Shift.css zien staan.
Net kopiëren plakken wat je wilt naar de instelling voor de animatienaam en je zou goed moeten zijn om te gaan! Als ik bijvoorbeeld de exit fade-animatie wil gebruiken die ik zou toevoegen data-animation = "shift_exitFade" als een data-attribuut voor welk element dan ook. Makkelijk.
Ik zou willen dat deze bibliotheek met meer opties in JavaScript kwam, omdat het ontwikkelaars zoveel meer controle over de plaatsing en functies zou geven. Maar voor een eenvoudig (en gratis) animatieframework kan ik niet klagen.
Shift.css is perfect voor nieuwere ontwikkelaars die willen creëren meer complexe animatiestijlen zonder compleet nieuwe code te schrijven.
