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


Animate.css - CSS3-bibliotheek Eenvoudig animaties maken

CSS is verbeterd met veel functies die webontwikkeling veel interessanter en uitdagender maken. Een van deze functies is CSS3-animatie-effecten . Vóór CSS3, om een ​​animatie te maken, kunt u alleen met Javascript werken. Maar nu kun je het gemakkelijk maken met CSS3.

We hebben je uitgebreid leren kennen met een goede tutorial over het maken van Bounce Effect met CSS3, en in dit artikel zal ik je een geweldige bibliotheek voorstellen die het maken van animaties met CSS3 nog eenvoudiger zal maken: Animate.css .

Animate.css is een kant-en-klare bibliotheekverzameling van CSS3-animatie-effecten . Deze bibliotheek biedt u meer dan 50 verschillende animatie-effecten die consistent op de meeste browsers werken met CSS3-ondersteuning.

U kunt de animatie vervolgens toepassen op uw tekst, afbeelding, formulier enzovoort. Er zijn ook veel geweldige sites die deze bibliotheek gebruiken; Tridiv - de beste CSS 3D-editor op het web - is daar een van.

Ermee beginnen

Met Animate.css hoeft u alleen maar de juiste klassen met uw elementen op te nemen . Om te beginnen, neemt u eerst het bestand animate.css op in de kop . U kunt de volledige bibliotheek downloaden van de Github-repositorypagina.

Animate.css wordt standaard slechts één keer geactiveerd bij het laden van de eerste pagina . Het blijft dan statisch. Om de animatie te kunnen bedienen, hebben we een beetje Javascript nodig. In dit geval zullen we een jQuery in het project opnemen, zoals zo.

 ...  ... 

HTML-markup

Om de animatie toe te passen, moet u .animated class toevoegen aan het element dat u wilt animeren, samen met de animatienaam zoals dit.

Deze tekst zal animeren.

Dat is het! De animatie wordt alleen geïmplementeerd bij het laden van de pagina, dus u moet mogelijk ook Javascript gebruiken om de animatie toe te passen bij een gebeurtenistrigger. De .option kan ook worden aangepast aan uw behoeften.

Aanvullende CSS-opties

De animatie die we eerder hebben gedefinieerd, wordt slechts eenmaal herhaald en ook op een vooraf gedefinieerde duur en vertragingstijd. Als u meer loops of een andere duur of vertragingstijd nodig heeft, kunt u dit als volgt aanpassen.

Als u de animatie meerdere keren of zelfs oneindig wilt laten lussen, kunt u het attribuut animation-iteration-count . Zorg ervoor dat u ook de toepasselijke voorvoegsels van leveranciers opneemt, zoals webkit, moz, enzovoort. Om het oneindig te maken, voegt u infinite als waarde.

Als je het nodig hebt om maar een paar keer te herhalen, voer je de waarde in met het aantal gewenste lussen.

 -verkoper-animatie-iteratie-telling: oneindig |  ; 

Om de duur aan te passen, is het geschikte attribuut om te gebruiken de duur van de animation-duration ; en zijn animation-delay voor vertragingscontrole. Het volgende is een voorbeeldoptiecode.

 .optie {-webkit-animatie-duur: 3s; -webkit-animatie-vertraging: 2s; -webkit-animatie-iteratie-telling: 5; } 

Javascript-besturing

Voor meer controle over de animatiestatus hebben we een beetje hulp nodig van Javascript. Stel dat we een tekstlink willen om een ​​animatie met een klik te activeren. Allereerst moeten we een verwijzing toevoegen aan de link, zoals zo.

Deze tekst zal animeren.

Als u de click wilt gebruiken, neemt u de linkreferentie erin op.

Met Javascript kunt u de naam van de animatie definiëren. We zullen een benadering gebruiken door een animate te maken en de animatie een naam te geven samen met de elementklasse (in de bovenstaande code hebben we het demo kenmerk toegevoegd).

En de Javascript-code zal het volgende leuk vinden.

Animatie-effect is inderdaad een van de beste manieren om uw site aantrekkelijker te maken, maar vergeet niet om het niet te overdrijven.

Freebie Release: 28 Werkbalkpictogrammen (inclusief PSD)

Freebie Release: 28 Werkbalkpictogrammen (inclusief PSD)

Om onze dank en dank aan onze lezers en de gemeenschap in het algemeen voort te zetten, zijn we blij om nog een gratis icoonpakket met gratis kwaliteit uit te geven: 28 werkbalkpictogrammen . Deze pictogrammen zijn beschikbaar in PNG-indeling in 2 verschillende formaten 32 × 32 en 16 × 16 pixels, samen met het gelaagde Photoshop PSD-bestand van de pictogrammen.D

(Technische en ontwerptips)

Hoe u uw productiviteit kunt verhogen met de Mailbox-app

Hoe u uw productiviteit kunt verhogen met de Mailbox-app

De mailbox was begin 2013 in bèta en bereikte bijna van de ene op de andere dag enorm veel succes. De wachtlijst had honderdduizenden mensen, kijkend naar de afteltimer die je leuk vond! De marketing- en productstrategie was zo succesvol dat Dropbox ze slechts anderhalve maand na de eerste bètaversie had overgenomen.H

(Technische en ontwerptips)