Piristä verkkosivustoasi näiden animaatiovinkkien ja temppujen avulla.
Animaatiot ja siirtymät ovat tärkeä osa web-suunnittelua. Hienovaraisten animaatioiden lisääminen verkkosivullesi tekee siitä kiinnostavamman. Yksinkertaiset animaatiot, kuten animoidut kuvakkeet, kineettinen typografia ja animoidut logot, voivat parantaa käyttökokemusta. Opi viisi mahtavaa animaatiotemppua, jotka voivat auttaa sinua elävöittämään verkkosivustoasi.
1. Elementin muuntaminen leijuessa
Yksi yleinen suunnittelukäytäntö on elementti, joka skaalautuu, kun sitä käsitellään. Saatat esimerkiksi haluta kääntää painikkeita hieman ylöspäin, kun joku pitää hiiren sen päällä. Voit saavuttaa tämän käyttämällä CSS: ää muuttaa omaisuutta.
Olettaen, että sinulla on painike:
<-painiketta>
Napsauta minua
-painiketta>
Muotoit dokumentin rungon ja painikkeen tyylin:
/* Tasaa painikkeen sivun keskelle */
kehon {
näyttö: flex;
korkeus: 100vh;
kohdista-kohteet: keskusta;
perustele-sisältö: keskusta;
taustaväri: musta;
}/* Tyylittelee painiketta */
-painiketta {
pehmuste: 1em 2em;
tausta: sininen;
rajaa: 0;
väri: valkoinen;
raja-säde: 0.25 rem;
kohdistin: osoitin;
Fonttikoko: 2rem;
siirtyminen: muuttaa 500neiti;
}
/* Hover states */
-painiketta:hover,
-painiketta: keskittyä {
muuttaa: kääntääY(0.75 rem) 500neiti;
}
Viimeisellä lohkolla asetat painikkeelle hiiri- ja tarkennustilat. Kummassakin tilassa painike käännetään Y-akselia pitkin 0,75 rem: llä. Painike näyttäisi tältä:
Kun pidät hiirtä painikkeen päällä, se liikkuu ylöspäin. Siirtyminen kestää puoli sekuntia (500 ms). Tämä on kuvio, jonka voit toteuttaa paitsi painikkeihisi, myös muihin elementteihin (esim. kuviin).
2. Useiden avainkehysten ilmoittaminen yhdellä ilmoituksella
Toinen yleinen malli CSS-animaatioissa on iteroida samaa arvoa useita kertoja. Tämä voi olla tietty väri, koko tai suunta. Voit saavuttaa tämän käyttämällä CSS-avainkehysanimaatioita ilmoittamalla useita avainkehyksiä yhdellä ilmoituksella.
Harkitse edellisessä osiossa luomaasi painiketta. Ehkä haluat toistaa useita taustavärejä, kun napsautat painiketta. Mutta haluat myös käydä läpi samaa väriä animaation eri vaiheissa. Katsotaanpa, kuinka se saavutetaan koodissa.
Ensinnäkin haluat animoida painikkeen vain, kun sitä napsautetaan. Joten luot a script.js tiedosto, jonka sisällä voit käyttää painiketta ja vaihtaa luokkaa painikkeessa, kun sitä napsautetaan:
konst painike = asiakirja.querySelector("painike")
button.addEventListener("klikkaus", (e) => {
button.classList.toggle('juhla-aika')
})
Käytimme querySelectoria päästäksemme painikkeeseen verkkosivulta. Saat lisätietoja DOM-läpikulusta lukemalla viestimme osoitteessa kuinka kulkea DOM JavaScriptin avulla.
The juhla-aika luokka aktivoi animaation nimeltä juhla:
.juhla-aika {
animaatio: juhla 2000neitiääretön;
}
Animaatiossa haluat aloittaa punaisella ja siirtyä keltaiseen 25 %:lla. Sitten palaisit punaiseen 50 %:iin ennen kuin keltaiseen 75 %:iin. Lopuksi 100 %:ssa tyytyisit tummansiniseen väriin:
@keyframes juhla {
0%, 50% {
taustaväri: punainen;
}
25%, 75% {
taustaväri: keltainen;
}
100% {
taustaväri: hsl(200, 72%, 35%);
}
}
Tämä lähestymistapa on varsin hyödyllinen värien vaihtamiseen väripohjaisella taustalla. Koska voit toistaa useita avainruutuja yhdessä muuttujassa, on erittäin helppoa käyttää samaa ominaisuutta animaation eri vaiheissa.
3. @property: n käyttö mukautettujen ominaisuuksien animointiin
Kuten ehkä jo tiedät, kaikki CSS: n ominaisuudet eivät ole animoitavia. Virallinen Mozillan dokumentaatio pitää päivitettyä kirjaa kaikista animoitavista CSS-ominaisuuksista. Jos haluat animoida ei-animoitavan omaisuuden, paras ratkaisusi olisi käyttää @omaisuus direktiivi.
Aloita vaihtamalla painikkeesi taustaväri lineaariseksi liukuväriksi:
-painiketta {
// muuCSS
tausta: lineaarinen gradientti(90deg, sininen, vihreä);
// muuCSS
}
Tässä tulos:
Usein haluat animoida painikkeen värigradientin. Vaikka on olemassa temppuja, joita voit käyttää gradientin siirtämiseen, et voi itse asiassa animoida sitä. Tämä johtuu siitä, että tausta (yhtä hyvin kuin taustakuva) ei ole animoitavissa oleva ominaisuus. Tämä on paikka @omaisuus tulee sisään.
The @omaisuus -direktiivin avulla voit rekisteröidä mukautettuja ominaisuuksia. Kun käytät @omaisuus, sinun on annettava sille kolme arvoa, nimittäin syntaksi, perii, ja alkuarvo:
@omaisuus --väri-1 {
syntaksi: "<väri>";
perii: totta;
alkuarvo: punainen;
}
@omaisuus --väri-2 {
syntaksi: "<väri>";
perii: totta;
alkuarvo: sininen;
}
Ensimmäinen on aloitusominaisuus, kun taas toinen on kohdeominaisuus. Nyt sen sijaan, että siirrät taustakuvaa (jota et voi siirtää), siirryt --väri-1 to --väri-2 (muokatut ominaisuudet) sekunnissa:
-painiketta {
siirtyminen: --väri-1 1000neiti, --väri-2 1000neiti;
}
Tämä tekniikka on hyödyllinen, koska voit myös lisätä muita mukautuksia. Voit esimerkiksi lisätä viiveen antaaksesi siitä sujuvamman käyttökokemuksen. Mahdollisuudet ovat rajattomat.
4. Negatiivisen animaation viiveiden käyttö
Animaatioviiveet ovat ratkaisevan tärkeitä sujuvan animaation luomisessa. Katsotaanpa esimerkkiä siitä toiminnassa. Lisää tähän osaan a div elementti, jossa on 15 pistettä painikkeen päällä:
<divluokkaa="pisteet">
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
<divluokkaa="piste">div>
div>
Tässä on joitain perustyyliä, joka muuttaa jokaisen lapsen div pisteeksi:
.dots {
näyttö: flex;
aukko: .5 rem;
marginaali-ala: 20px;
}
.piste {
leveys: 10px;
kuvasuhde: 1;
taustaväri: punainen;
raja-säde: 50%;
}
Tässä käytämme Flexboxia pisteiden sijoittamiseen vaakasuoraan viivaan. Sukeltaaksesi syvälle Flexboxiin, voit tarkistaa meidän CSS Flexbox opetusohjelma.
Sisällä script.js, lisää koodi, joka käynnistää pisteiden animaation. Olet vaihtamassa tanssi luokka pisteillä:
button.addEventListener("klikkaus", (e) => {
button.classList.toggle('juhla-aika')
// Uusi koodi
dots.forEach((piste) => {
dot.classList.toggle('tanssi')
})
})
Tanssitunnilla aktivoidaan animaatio nimeltä nousta:
.piste.tanssi {
animaatio: nousta 2000neitiääretönvaihtoehtoinen;
}Mitä tulee animaatioon, käännä pisteet -100px pitkin Y-akselia:
@keyframes nousta {
100% {
muuttaa: kääntääY(-100 pikseliä)
}
}Nyt on aika tehdä jotain mielenkiintoista. Sen sijaan, että pisteet nousevat samaan aikaan, haluat animoida pisteet virtaamaan kuin aalto. Tämän saavuttamiseksi sinun on lisättävä animaatio-viive pisteisiin ja lisää jokaista pistettä 100 ms: lla:
.piste:nth-lapsi (1) {
animaatio-viive: 100neiti;
}
.piste:nth-lapsi (2) {
animaatio-viive: 200neiti;
}
.piste:nth-lapsi (3) {
animaatio-viive: 300neiti;
}
.piste:nth-lapsi (4) {
animaatio-viive: 400neiti;
}
/* Jatka, kunnes saavutat 15. pisteen */
Tämä luo tyylikkään animaation, jossa pisteet liikkuvat ylös ja alas aaltoilevassa muodossa. Seuraava kuva vangitsee pisteet animaation keskellä:
Muista, että tämä voi olla ongelmallista, mikä vie meidät viidenteen vihjeeseen.
5. Ota asetukset käyttöön valitsemalla prefers-redduced-motion
Muista aina, että monet ihmiset eivät pidä liikepohjaisista animaatioista. Itse asiassa useimmilla käyttäjillä on selaimessa asetukset, jotka voivat sammuttaa liikkeen. Liike voi häiritä aisteja ja vaikeissa tapauksissa johtaa pahoinvointiin.
Onneksi voit hoitaa tämän helposti käärimällä animaatiosi sisään a ei etusijaa mediakysely näin:
@media(prefers-reduced-motion: no-preference) {
.piste.tanssi {
animaatio: nousta 2000neitiääretönvaihtoehtoinen;
}
}Jos nyt ottaisit käyttöön mieluummin-vähennetty-liike selaimessasi, animaatio ei toimi.
Lue lisää CSS-vinkkejä ja temppuja
CSS on täynnä mahtavia hakkereita, jotka menevät animaatioita ja siirtymiä pidemmälle. Siellä on esimerkiksi vinkkejä ja temppuja, joiden avulla voit tehdä koko asettelustasi tyylikkään ja reagoivan. Käytännöt voivat auttaa sinua tekemään verkkosivustostasi kiinnostavamman, helppokäyttöisemmän ja miellyttävämmän selaamisen. Jos haluat olla yhden prosentin huippu CSS-kehittäjä, pari temppua hihassasi auttaa paljon.