Pynt dit websted op ved hjælp af disse animationstip og tricks.
Animationer og overgange er en vigtig del af webdesign. Tilføjelse af subtile animationer til din webside vil gøre den mere engagerende. Simple animationer som animerede ikoner, kinetisk typografi og animerede logoer kan hjælpe med at forbedre brugeroplevelsen. Lær fem fantastiske animationstricks, der kan hjælpe dig med at oplive dit websted.
1. Transformering af et element ved svævning
En almindelig designpraksis er at have et element, der skaleres op, når det interagerer med det. For eksempel vil du måske gerne oversætte knapper en lille smule opad, når nogen svæver med musen på den. Du kan opnå dette ved at bruge CSS transformere ejendom.
Forudsat at du har en knap:
<knap>
Klik på mig
knap>
Du har stylet både dokumentets brødtekst og knappen:
/* Justerer knappen til midten af siden */
legeme {
Skærm: bøje;
højde: 100vh;
align-elementer: centrum;
retfærdiggøre-indhold: centrum;
baggrundsfarve: sort;
}/* Styler knappen */
: 1em 2em;
knap {
polstring
baggrund: blå;
grænse: 0;
farve: hvid;
grænse-radius: 0.25rem;
cursoren: pointer;
skriftstørrelse: 2rem;
overgang: transformere 500Frk;
}
/* Svævetilstand */
knap:hover,
knap:fokus {
transformere: oversætY(0.75rem) 500Frk;
}
Med den sidste blok indstiller du svæve- og fokustilstande på knappen. I begge tilstande oversætter du knappen langs Y-aksen med 0,75rem. Knappen ville se sådan ud:
Når du holder musen på knappen, svirper den i opadgående retning. Overgangen tager et halvt sekund (500ms) at fuldføre. Dette er et mønster, som du ikke kun kan implementere på dine knapper, men også på andre elementer (f.eks. billeder).
2. Erklæring af flere keyframes med én erklæring
Et andet almindeligt mønster i CSS-animationer er at gentage den samme værdi flere gange. Dette kan være en bestemt farve, størrelse eller orientering. Du kan opnå dette ved at bruge CSS keyframe animationer ved at deklarere flere keyframes med én erklæring.
Overvej den knap, du oprettede i det forrige afsnit. Måske vil du gentage flere baggrundsfarver, når du klikker på knappen. Men du vil også gå over den samme farve på forskellige stadier af animationen. Lad os se, hvordan man opnår det i kode.
Først vil du kun animere knappen, når du klikker på den. Så du ville oprette en script.js fil, i hvilken du får adgang til knappen og skifter en klasse på knappen, når der klikkes på den:
konst knap = dokument.querySelector("knap")
button.addEventListener("klik", (e) => {
button.classList.toggle('fest tid')
})
Vi brugte querySelector til at få adgang til knappen fra websiden. For at lære mere om DOM-traversal, læs vores indlæg om hvordan man krydser DOM ved hjælp af JavaScript.
Det fest tid klasse aktiverer en animation med titlen parti:
.fest tid {
animation: parti 2000Frkuendelig;
}
For animationen skal du starte med rød og gå over til gul ved 25%. Så ville du vende tilbage til rød ved 50 %, før du skiftede tilbage til gul ved 75 %. Til sidst, ved 100 %, vil du nøjes med en mørkeblå farve:
@keyframes fest {
0%, 50% {
baggrundsfarve: rød;
}
25%, 75% {
baggrundsfarve: gul;
}
100% {
baggrundsfarve: hsl(200, 72%, 35%);
}
}
Denne tilgang er ret nyttig til at veksle mellem farver på en farvebaseret baggrund. Fordi du kan gentage flere keyframes i én variabel, bliver det super nemt at bruge den samme egenskab på forskellige stadier af din animation.
3. Brug af @property til at animere brugerdefinerede egenskaber
Som du måske allerede ved, er ikke alle egenskaber i CSS animerbare. Den officielle Mozilla dokumentation holder en opdateret registrering af alle animerbare CSS-egenskaber. Hvis du ønsker at animere en ikke-animerbar ejendom, så ville din bedste løsning være at bruge @ejendom direktiv.
Start med at ændre baggrundsfarven på din knap til en lineær gradient:
knap {
// AndetCSS
baggrund: lineær gradient(90deg, blå, grøn);
// AndetCSS
}
Her er outputtet:
Ofte vil du gerne animere farvegradienten på knappen. Selvom der er tricks, du kan bruge til at flytte rundt på din gradient, kan du faktisk ikke animere den. Dette er fordi baggrund (såvel som baggrundsbillede) er ikke en animerbar ejendom. Det er her @ejendom kommer i.
Det @ejendom direktiv giver dig mulighed for at registrere brugerdefinerede egenskaber. Når du bruger @ejendom, skal du give den tre værdier, nemlig syntaks, arver, og startværdi:
@ejendom --farve-1 {
syntaks: "<farve>";
arver: rigtigt;
startværdi: rød;
}
@ejendom --farve-2 {
syntaks: "<farve>";
arver: rigtigt;
startværdi: blå;
}
Den første er startegenskaben, mens den anden er destinationsegenskaben. Nu, i stedet for at overføre et baggrundsbillede (som du ikke kan skifte), ville du gå fra --farve-1 til --farve-2 (dine tilpassede egenskaber) på et sekund:
knap {
overgang: --farve-1 1000Frk, --farve-2 1000Frk;
}
Denne teknik er nyttig, fordi du også kan tilføje andre tilpasninger. For eksempel tilføjer du en forsinkelse for at give det en mere jævn oplevelse. Mulighederne er uendelige.
4. Brug af negative animationsforsinkelser
Animationsforsinkelser er afgørende for at skabe jævne animationer. Lad os se et eksempel på det i aktion. I denne del tilføjes en div element med 15 prikker oven på knappen:
<divklasse="prikker">
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
<divklasse="prik">div>
div>
Her er nogle grundlæggende styling til at forvandle hvert barn div ind i en prik:
.prikker {
Skærm: bøje;
hul: .5rem;
margin-bund: 20px;
}
.dot {
bredde: 10px;
aspekt-forhold: 1;
baggrundsfarve: rød;
grænse-radius: 50%;
}
Her bruger vi Flexbox til at placere prikkerne i en vandret linje. For at dykke dybt ned i Flexbox, kan du tjekke vores CSS Flexbox tutorial.
Inde script.js, tilføj koden, der udløser animationen af prikkerne. Du skifter til dans klasse på prikkerne:
button.addEventListener("klik", (e) => {
button.classList.toggle('fest tid')
// Ny kode
prikker.forHver((prik) => {
dot.classList.toggle('dans')
})
})
Danseklassen aktiverer en animation med titlen stige:
.dot.dans {
animation: stige 2000Frkuendeligskifte;
}Hvad angår animationen, skal du blot oversætte prikkerne -100px langs Y-aksen:
@keyframes stige {
100% {
transformere: oversætY(-100 px)
}
}Nu er det tid til at gøre noget interessant. I stedet for at prikkerne rejser sig på samme tid, ønsker du at animere prikkerne til at flyde som en bølge. For at opnå dette, skal du tilføje animationsforsinkelse til prikkerne, og forøg hver prik med 100 ms:
.dot:nth-child (1) {
animationsforsinkelse: 100Frk;
}
.dot:nth-child (2) {
animationsforsinkelse: 200Frk;
}
.dot:nth-child (3) {
animationsforsinkelse: 300Frk;
}
.dot:nth-child (4) {
animationsforsinkelse: 400Frk;
}
/* Bliv ved med at gøre indtil du når den 15. prik */
Dette skaber en slank animation, hvor prikkerne bevæger sig op og ned i en bølget form. Følgende billede fanger prikkerne i midten af animationen:
Husk på, at dette kan være problematisk, hvilket bringer os til det femte tip.
5. Brug prefers-reduced-motion til at aktivere præferencer
Husk altid, at mange mennesker ikke kan lide bevægelsesbaserede animationer. Faktisk har de fleste brugere præferencer i browseren, der kan slå bevægelsen fra. Bevægelse kan distrahere sanserne og i alvorlige tilfælde føre til kvalme.
Heldigvis kan du nemt tage dig af dette ved at pakke din animation ind i en ingen præference medieforespørgsel som sådan:
@medier(prefers-reduced-motion: no-preference) {
.dot.dans {
animation: stige 2000Frkuendeligskifte;
}
}Hvis du nu skulle aktivere foretrækker-reduceret-bevægelse i din browser, så ville animationen ikke køre.
Lær flere CSS-tip og -tricks
CSS er fuld af fantastiske hacks, der går ud over animationer og overgange. For eksempel er der tips og tricks til at gøre hele dit layout slankt og responsivt. Denne praksis kan hjælpe dig med at gøre dit websted mere engagerende, tilgængeligt og behageligt at gennemse. Hvis du vil være en CSS-udvikler i top én procent, så hjælper det meget at have et par tricks i ærmet.
