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.

HTML-klassen op aanvraag toevoegen en verwijderen met jQuery

HTML-klassen op aanvraag toevoegen en verwijderen met jQuery

Het toevoegen van nieuwe HTML-klassen is een goed idee; open gewoon het HTML-document, zoek wat u wilt toevoegen, voeg de naam in en geef de naam een ​​naam. Maar als het gaat om het bouwen van een interactieve website waarmee uw bezoekers zich ermee kunnen bezighouden, moet u op verzoek mogelijk de HTML-klassen aanpassen, invoegen en verwijderen.Je

(Technische en ontwerptips)

Voeg donkere thema's toe aan Visual Studio Code & Atom met dit gebruikersinterface

Voeg donkere thema's toe aan Visual Studio Code & Atom met dit gebruikersinterface

Met de beste IDE's kun je de interface aanpassen . Ik vind meestal dat donkere thema's het beste werken voor codering, omdat ze gemakkelijker zijn voor de ogen.Sommige programma's zoals Sublime Text worden geleverd met tientallen gratis thema's. Maar niet alle programma's zijn zo en daarom is City Lights zo'n cool project

(Technische en ontwerptips)