5 SVG-animaatiota piristääksesi verkkosuunnitteluasi

Animaatiot voivat tehdä verkkosivustosta sujuvan ja sujuvan, mutta kuinka voit sisällyttää tämän ominaisuuden omaan työhön? Liity joukkoomme ja opi elävöittämään web-suunnitteluasi näiden luovien SVG-animaatioesimerkkien avulla.

Työskentely skaalautuvan vektorigrafiikan kanssa

SVG on tiedostomuoto, joka käyttää viivoja pikseleiden sijaan kuvien tallentamiseen ja näyttämiseen. Kuten niiden nimestä voi päätellä, skaalautuva vektorigrafiikka voi skaalata laatua heikentämättä.

Sen lisäksi, että se sopii erinomaisesti koon muuttamiseen, voit myös käyttää SVG-koodia HTML: ssä, ja se toimii kuten mikä tahansa muu elementti. Tämä tarkoittaa, että voit käyttää CSS-säännöt, JavaScript-koodi, ja mikä tärkeintä, animaatiot verkkosivustosi SVG-tiedostoilla.

Voit luoda SVG-tiedostoja käyttämällä ohjelmistoja, kuten Adobe Illustrator, ja verkkosivustoja, kuten SVGator, mutta voit myös luoda ne käsin. SVG-muoto on pelkkä teksti XML-kieli ja näyttää vähän HTML: ltä.

Tässä esimerkissä on neljä painiketta, joissa on omat kuvakkeet ja lohkovärinen tausta. Kun valitset painikkeen, se muuttuu ympyrästä pyöristetyksi suorakulmioksi ja vaihtaa samalla sivun taustavärin painikkeen mukaiseksi.

JS: n ja CSS: n sekoitus tuottaa nämä tulokset, ja kaikki alkaa silmukasta lisää tapahtumakuuntelijoita jokaiseen painikkeeseen.

varten (var minä = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('klikkaus', painikettaNapsauta);
}

Kun painiketta napsautetaan, buttonClick()-niminen toiminto suorittaa useita toimintoja. Se alkaa vaihtamalla sivun taustaväriä:

asiakirja.body.style.backgroundColor = `#${Tämä.getAttribute('data-background')}`;

Tämän jälkeen se lisää CSS-luokan painikkeeseen, jota painettiin, käynnistäen animaation ja muuttaen painikkeen taustaväriä.

menuItemActive.classList.remove('menu__item -- aktiivinen');
this.classList.add('menu__item -- aktiivinen');
menuItemActive.classList.add('menu__item--animoi');
this.classList.add('menu__item--animoi');
menuItemActive = Tämä;

Vaikka tämä SVG-animaatioesimerkki on yksinkertainen, se tarjoaa ainutlaatuisen tavan tehdä verkkosivustostasi kiinnostavampi. Tämäntyyppinen suunnitteluominaisuus on täydellinen mobiilisivustoille ja HTML-pohjaisille sovelluksille.

Voit lisätä niin monta solmua kuin haluat SVG-polulle, mikä tekee niistä ihanteellisia tekstin luomiseen. Tämä yksinkertainen vetoanimaatio esittelee tekniikan täydellisesti, ja teksti näkyy vasemmalta oikealle ikään kuin sitä kirjoitettaisiin.

Animaatiossa ei ole avainkehyksiä, se yksinkertaisesti käyttää uutta viivan leveyttä CSS-siirtymäominaisuuden rinnalla. Tämä saa jokaisen viivan piirtämään itsensä näytön poikki ilman monimutkaista animaatiota.

.polku-1 {
 stroke-dasharray: 1850 2000;
 veto-viiva: 1851;
 siirtymä: 5s lineaarinen;
}

JS-funktio lisää ainutlaatuisen CSS-luokan jokaiseen tekstiosaan käyttämällä yhtä CSS-yläluokkaa koodin tiheyden vähentämiseksi entisestään.

$(toiminto() {
toimintoanimaatioKäynnistä() {
 $('#kontti').addClass('fin');
 }
setTimeout (animationStart, 250);
});

Vain CSS-esimerkkinä tämä SVG-animaatio sopii kaikille, jotka eivät halua upottaa varpaitaan JavaScript-koodiin. Idea on yksinkertainen: painike alkaa alleviivauksella, joka muuttuu täydelliseksi reunukseksi, kun viet hiiren sen päälle.

CSS-avainkehykset luovat painikkeelle kaksi tilaa. Ensimmäisessä tilassa on paksumpi viiva ja se kattaa vain SVG-muotopainikkeen alaosan, alkaen 0 %:sta. Toinen tila on täydellinen painike 100 % ohuemmalla vedolla.

@keyframes piirtää {
 0% {
 aivohalvaus-dasharray: 140 540;
 isku-viivaero: -474;
 viivan leveys: 8px;
 }
100% {
 aivohalvaus-dasharray: 760;
 isku-viivaero: 0;
 viivan leveys: 2px;
 }
}

Näitä avainkehyksiä käytetään vain SVG-muotopainikkeen ääriviivoissa, kun käyttäjä siirtää kohdistimen painikkeen päälle. Se käyttää :hover CSS pseudoluokka tämän saavuttamiseksi käynnistämällä säännön, joka lisää animaation avainkehykset painikkeeseen.

.svg-kääre:hover.muoto {
-webkit-animaatio: 0.5spiirtäälineaarineneteenpäin;
animaatio: 0.5spiirtäälineaarineneteenpäin;
}

Tämä osoittaa, kuinka voit luoda kauniita animaatioita ilman monimutkaista koodia. Voit käyttää näitä perusteita ja luovuuttasi luodaksesi entistä kehittyneempiä interaktiivisia elementtejä omalle verkkosivustollesi.

Koska konepellin alla on niin monia mielenkiintoisia tekniikoita, on vaikea päättää, mistä keskustella, kun tarkastellaan tätä SVG-kelloesimerkkiä.

Aluksi se käyttää Date()-funktiota nykyisen päivämäärän ja kellonajan keräämiseen. Käyttämällä tätä arvoa funktiot getHours(), getMinutes() ja getSeconds() jakavat tiedot asiaankuuluviin osiin. Koodi laskee sitten jokaisen osoittimen sijainnin kellossa.

var päivämäärä = UusiPäivämäärä();
var hoursAngle = 360 * date.getHours() / 12 + päivämäärä.getMinutes() / 2;
var minuuttikulma = 360 * päivämäärä.getMinutes() / 60;
var secAngle = 360 * päivämäärä.getSeconds() / 60;

Tallentamalla jokainen käsi taulukkoon, niiden paikat voidaan asettaa erittäin helposti joka kerta, kun koodi suoritetaan.

hands[0].setAttribute('alkaen', vaihtaja (secAngle));
hands[0].setAttribute('kohtaan', vaihtaja (secAngle + 360));
hands[1].setAttribute('alkaen', vaihtaja (minuteAngle));
hands[1].setAttribute('kohtaan', vaihtaja (minuuttikulma + 360));
hands[2].setAttribute('alkaen', vaihtaja (hoursAngle));
hands[2].setAttribute('kohtaan', vaihtaja (tunnitAngle + 360));

Ajalla on rajalliset sovellukset web-suunnittelun alalla, mutta se on hyödyllinen ajastimien, kellojen ja aikaleimojen tallentamiseen. Tämä esimerkki tarjoaa myös käsityksen muuttujia sisältävien dynaamisten SVG-animaatioiden luomisesta.

Tämä CSS-ohjattu SVG-animaatio tarjoaa siistin tavan saada mikä tahansa muoto näyttämään uskomattomalta.

Kun mitään ei ole valittu, lomakkeen jokaisen kentän alla on harmaita viivoja. Kun kenttä valitaan, näkyviin tulee viiva, joka liukuu sisään vasemmalta pehmeällä animaatiolla. Jos käyttäjä valitsee toisen kentän, viiva liukuu tasaisella liikkeellä uuteen paikkaansa.

Lopuksi, kun käyttäjä painaa Kirjaudu sisään -painiketta, viiva muuttuu ympyräksi, joka sykkii sivun latautuessa.

Tämä SVG-esimerkki on erityisen vaikuttava, koska se luottaa vain CSS: ään tuottaakseen niin monimutkaisen tuloksen. Se käyttää CSS-muuttujia tietojen tallentamiseen, mikä helpottaa elementtien, kuten pääsovelluksen, hallintaa.

$app-täyte: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#sovellus {
 leveys: $app-width;
 korkeus: $app-height;
 täyte: $app-padding;
 tausta: valkoinen;
 laatikko varjo: 002rem rgba(musta, 0.1);
}

Voit käyttää tätä esimerkkiä melkein missä tahansa verkkolomakkeessa ja aktivoida käyttäjiäsi enemmän kuin koskaan ennen.

Omien SVG-animaatioiden luominen HTML: llä, JS: llä ja CSS: llä

SVG-animaatioiden luominen tyhjästä voi olla vaikea prosessi, kun aloitat. Nämä esimerkit antavat sinulle etumatkan rakentaessasi SVG-animaatioita, jotka saavat sivustosi loistamaan.

9 Advanced Media Query CSS-temppua, jotka sinun pitäisi tietää

Lue Seuraava

Kirjailijasta