Fleur je website op met deze animatietips en -trucs.
Animaties en overgangen zijn een belangrijk onderdeel van webdesign. Door subtiele animaties aan uw webpagina toe te voegen, wordt deze aantrekkelijker. Eenvoudige animaties zoals geanimeerde pictogrammen, kinetische typografie en geanimeerde logo's kunnen de gebruikerservaring helpen verbeteren. Leer vijf geweldige animatietrucs die u kunnen helpen uw website te verlevendigen.
1. Een element transformeren terwijl u er met de muis over beweegt
Een veel voorkomende ontwerppraktijk is om een element te hebben dat opschaalt wanneer er interactie mee is. U wilt bijvoorbeeld knoppen een klein beetje naar boven vertalen wanneer iemand er met de muis over beweegt. U kunt dit bereiken met behulp van de CSS transformeren eigendom.
Ervan uitgaande dat je een knop hebt:
<knop>
Klik hier
knop>
Je hebt zowel de hoofdtekst van het document als de knop gestyled:
/* Lijnt de knop uit op het midden van de pagina */
lichaam {
weergave: buigen;
hoogte: 100vh;
uitlijnen-items: centrum;
rechtvaardigen-inhoud: centrum;
Achtergrond kleur: zwart;
}/* Stijlt de knop */
knop {
opvulling: 1em 2em;
achtergrond: blauw;
grens: 0;
kleur: wit;
grensradius: 0.25rem;
cursor: wijzer;
lettertypegrootte: 2rem;
overgang: transformeren 500Mevr;
}
/* Hoverstaten */
knop:zweven,
knop:focus {
transformeren: vertalenY(0.75rem) 500Mevr;
}
Met het laatste blok stel je de hover- en focusstatussen in op de knop. In beide toestanden vertaalt u de knop langs de Y-as met 0,75rem. De knop zou er als volgt uitzien:
Wanneer u met uw muis over de knop beweegt, beweegt deze in opwaartse richting. De overgang duurt een halve seconde (500 ms) om te voltooien. Dit is een patroon dat u niet alleen op uw knoppen kunt toepassen, maar ook op andere elementen (bijvoorbeeld afbeeldingen).
2. Meerdere keyframes declareren met één declaratie
Een ander veelvoorkomend patroon in CSS-animaties is het meerdere keren herhalen van dezelfde waarde. Dit kan een specifieke kleur, maat of oriëntatie zijn. U kunt dit bereiken door te gebruiken CSS-keyframe-animaties door meerdere keyframes te declareren met één declaratie.
Overweeg de knop die u in de vorige sectie hebt gemaakt. Misschien wilt u verschillende achtergrondkleuren doorlopen wanneer u op de knop klikt. Maar je wilt ook dezelfde kleur in verschillende stadia van de animatie laten zien. Laten we eens kijken hoe we dat in code kunnen bereiken.
Ten eerste wilt u de knop alleen animeren wanneer erop wordt geklikt. Dus je zou een script.js bestand, waarin u toegang krijgt tot de knop en een klasse op de knop schakelt wanneer erop wordt geklikt:
const knop = document.querySelector("knop")
knop.addEventListener("Klik", (e) => {
knop.classList.toggle('tijd voor een feestje')
})
We gebruikten querySelector om toegang te krijgen tot de knop vanaf de webpagina. Lees ons bericht op voor meer informatie over DOM-traversal hoe de DOM te doorkruisen met behulp van JavaScript.
De tijd voor een feestje class activeert een animatie met de titel feest:
.tijd voor een feestje {
animatie: feest 2000Mevroneindig;
}
Voor de animatie wil je beginnen met rood en overgaan naar geel met 25%. Dan zou je met 50% terugkeren naar rood voordat je terugkeert naar geel met 75%. Uiteindelijk zou je bij 100% genoegen nemen met een donkerblauwe kleur:
@sleutelframes feest {
0%, 50% {
Achtergrond kleur: rood;
}
25%, 75% {
Achtergrond kleur: geel;
}
100% {
Achtergrond kleur: hsl(200, 72%, 35%);
}
}
Deze aanpak is erg handig voor het afwisselen tussen kleuren op een op kleuren gebaseerde achtergrond. Omdat u meerdere keyframes in één variabele kunt herhalen, wordt het supergemakkelijk om dezelfde eigenschap in verschillende stadia van uw animatie te gebruiken.
3. @property gebruiken om aangepaste eigenschappen te animeren
Zoals u wellicht al weet, zijn niet alle eigenschappen in CSS animeerbaar. De officiële Mozilla-documentatie houdt een bijgewerkt record bij van alle animeerbare CSS-eigenschappen. Als u een niet-animeerbare eigenschap wilt animeren, dan is uw beste oplossing om de @eigendom richtlijn.
Begin met het wijzigen van de achtergrondkleur van uw knop in een lineair verloop:
knop {
// anderCSS
achtergrond: lineair verloop(90graden, blauw, groente);
// anderCSS
}
Dit is de uitvoer:
Vaak wilt u het kleurverloop op de knop animeren. Hoewel er trucs zijn die je kunt gebruiken om je verloop te verplaatsen, kun je het niet echt animeren. Dit is zo omdat achtergrond (net zoals achtergrond afbeelding) is geen animeerbare eigenschap. Dit is waar @eigendom komt binnen.
De @eigendom richtlijn kunt u aangepaste eigenschappen registreren. Wanneer je gebruikt @eigendom, moet u deze voorzien van drie waarden, namelijk syntaxis, erft, En beginwaarde:
@eigendom --kleur-1 {
syntaxis: "<kleur>";
erft: WAAR;
beginwaarde: rood;
}
@eigendom --kleur-2 {
syntaxis: "<kleur>";
erft: WAAR;
beginwaarde: blauw;
}
De eerste is de starteigenschap, terwijl de tweede de bestemmingseigenschap is. Nu, in plaats van een achtergrondafbeelding over te zetten (die u niet kunt overzetten), zou u overstappen van --kleur-1 naar --kleur-2 (uw aangepaste eigenschappen) in één seconde:
knop {
overgang: --kleur-1 1000Mevr, --kleur-2 1000Mevr;
}
Deze techniek is handig omdat u ook andere aanpassingen kunt toevoegen. Je voegt bijvoorbeeld een delay toe om het een vlottere ervaring te geven. De mogelijkheden zijn eindeloos.
4. Negatieve animatievertragingen gebruiken
Animatievertragingen zijn cruciaal voor het maken van vloeiende animaties. Laten we een voorbeeld daarvan in actie zien. Voeg in dit deel een toe div element met 15 stippen bovenop de knop:
<divklas="stippen">
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
<divklas="punt">div>
div>
Hier is wat basisstijl om elk kind te transformeren div in een punt:
.stippen {
weergave: buigen;
gat: .5rem;
marge-bodem: 20px;
}
.punt {
breedte: 10px;
beeldverhouding: 1;
Achtergrond kleur: rood;
grensradius: 50%;
}
Hier gebruiken we Flexbox om de stippen in een horizontale lijn te plaatsen. Om diep in Flexbox te duiken, kun je onze CSS Flexbox-zelfstudie.
Binnen script.js, voeg de code toe die de animatie van de stippen activeert. Je schakelt de dans klasse op de puntjes:
knop.addEventListener("Klik", (e) => {
knop.classList.toggle('tijd voor een feestje')
// Nieuwe code
stippen.voorElk((punt) => {
punt.classList.toggle('dans')
})
})
De dansles activeert een animatie met de titel opstaan:
.punt.dans {
animatie: opstaan 2000Mevroneindigafwisselend;
}Wat betreft de animatie, vertaal gewoon de punten -100px langs de Y-as:
@sleutelframes opstaan {
100% {
transformeren: vertalenY(-100px)
}
}Nu is het tijd om iets interessants te doen. In plaats van dat de stippen tegelijkertijd omhoog gaan, wil je de stippen laten bewegen als een golf. Om dit te bereiken, moet je toevoegen animatie-vertraging tot de punten, en verhoog elke punt met 100 ms:
.punt:negende kind (1) {
animatie-vertraging: 100Mevr;
}
.punt:negende kind (2) {
animatie-vertraging: 200Mevr;
}
.punt:negende kind (3) {
animatie-vertraging: 300Mevr;
}
.punt:negende kind (4) {
animatie-vertraging: 400Mevr;
}
/* Blijf doorgaan tot je de 15e punt bereikt */
Dit zorgt voor een strakke animatie waarbij de stippen in een golvende vorm op en neer bewegen. De volgende afbeelding legt de stippen in het midden van de animatie vast:
Houd er rekening mee dat dit problematisch kan zijn, wat ons bij de vijfde tip brengt.
5. Gebruik prefers-reduced-motion om voorkeuren in te schakelen
Houd er altijd rekening mee dat veel mensen niet van op beweging gebaseerde animaties houden. In feite hebben de meeste gebruikers voorkeuren in de browser die de beweging kunnen uitschakelen. Beweging kan de zintuigen afleiden en in ernstige gevallen leiden tot misselijkheid.
Gelukkig kun je dit eenvoudig oplossen door je animatie in een geen voorkeur mediaquery als volgt:
@media(geeft de voorkeur aan verminderde beweging: geen voorkeur) {
.punt.dans {
animatie: opstaan 2000Mevroneindigafwisselend;
}
}Als je nu zou inschakelen geeft de voorkeur aan verminderde beweging in uw browser, dan zou de animatie niet worden uitgevoerd.
Meer informatie over CSS-tips en -trucs
CSS zit vol met geweldige hacks die verder gaan dan animaties en overgangen. Zo zijn er tips en tricks om je hele layout strak en responsive te maken. De praktijken kunnen u helpen uw website aantrekkelijker, toegankelijker en aangenamer te maken om door te bladeren. Als je een top één procent CSS-ontwikkelaar wilt zijn, dan helpt het veel om een paar trucjes achter de hand te hebben.