12 Essential Scroll-To-View-animaatiotrendit
Animoitujen sivun elementit ovat yleisiä aloitussivuilla ja käynnistyssivustoilla. Mutta niitä ei aina puhuta designpiireissä, koska ajatus "animaatiosta näkymästä" ei ole paljon.
Käytän lausetta scroll-to-view, koska se tuntuu tarkalta kuvaukselta. Pohjimmiltaan kun vierität sivua alas, uudet animoitavat elementit tulevat näkyviin.
Se ei ole tekniikka, joka toimii kaikilla verkkosivuilla, mutta se lisää mukavaa kosketusta tiettyihin asetteluihin. Ja olen kurittanut joitain suosikkeihini täältä esittelemään, miten nämä scroll-to-view animaatiot toimivat ja miksi voit yrittää käyttää niitä itse.
1. Huomenna Unta
On Huomenna unta verkkosivustossa huomaat muutaman melko hyvänlaatuisen animoitun vaikutuksen. Nämä haalistivat eri tekstikappaleet ja CTA: t nähtynä koko asettelun ympärille.
Mielenkiintoista on se, kuinka useimmat kuvat ja tausta-alueet ovat täysin näkyvissä myös ensimmäisessä vierittämässä. Monet sivustot käyttävät haalistuvasta animaatiosta kuvia ja kuvakaappauksia, pitäen tekstin näkyvissä.
Tämä vähäinen ero auttaa kiinnittämään huomiota tekstiin, kun se heikkenee. Erinomainen tapa kiinnittää huomiota vierailijoilta.
2. Twist
Toinen tekniikka, jonka näen usein, kohdistaa suurimman osan sivun sisällöstä vierekkäin tehtäviin animaatioihin.
Esimerkiksi Twist-sovelluksen kotisivu sisältää vaihtelevia sivusegmenttejä ja tekstilohkoja, jotka animoivat ja poistuvat käytöstä vierittämällä. Näillä on erittäin pehmeä haalistumisvaikutus, joten ne ovat havaittavissa mutta eivät kovin kovia.
Jotkut kävijät saattavat ärsyttää viivästystä, mutta en usko, että se on liian pitkä. Lisäksi se vain animaa kerran, joten jos osut sivun alaosaan, kaikki animaatiot tehdään.
3. Lanka app
Jos haluat paljon monimutkaisempia animaatioita, tutustu Lanka App Lander. Tässä on useita osia animaatioita ja jopa elementtejä, jotka tulevat näkyviin eri näkökulmista.
Jotkut kuvakaappauksen demo -kuvista animoivat ylöspäin, kun mukana olevat teksti / BG-kuviot animoivat alas näkymään. Tämä vuorotteleva tyyli on melko ainutlaatuinen eikä se, mitä näen usein.
Aloitussivu on kuitenkin myös uskomattoman yksinkertainen, eikä siellä ole paljon muuta täten kiinnittää huomiota. Tässä tapauksessa erilaiset animaatiot toimivat hienosti.
4. DashFlow
Kaikista näistä esimerkeistä ajattelen DashFlow käyttää yleisimpiä animaatiotekniikoita.
Tämä lander animaa kuvia ja tekstiä yhdeksi istunnoksi. Se on todellinen yksinkertainen ja käyttää yhden sarakkeen ulkoasua, joten kaikki sisältö virtaa suoraan lineaarisesti.
Mikään ei ole luonnostaan erikoinen tästä mallista, aivan selkeän menetelmän ansiosta. Suuri tyyli, jos sinulla on samanlainen verkkosivusto ja haluat pitää animaatiot yksinkertaisina.
5. Quuu edistäminen
Quuu Edistää pitää animaatiot mahdollisimman vähän ja käyttää niitä vain CTA-alueilla.
En voi sanoa, jos tämä lisää tuloksia, mutta se näyttää olevan tavoite. Kun lataat sivun ensimmäisen kerran, ylhäältä ylätunniste animoidaan näkymään CTA: n kallistamalla animaation avulla.
Kun vierität alas, huomaat, että loput sivut ovat melko staattisia. Mutta alareunassa on yksi lopullinen CTA alatunnistimen yläpuolella, joka myös animoi ja käyttää samaa kaltevaa animaatiota.
Näyttää, että voit käyttää vierekkäisiä animaatioefeksejä, joita ei näytetä koko sivun kautta.
6. Qonto
Kotisivu Qonto on mielenkiintoinen vieraskuvia-animaatio. Se käyttää samaa animaatiota koko verkkosivustolla ja animaa yksittäisiä kohteita näkymään sivulta.
Suurin osa sivusta sisältää kuvakeosat, joilla on pieni grafiikka tietyn sisällön yläpuolella, joka selittää sovelluksen ominaisuuksia. Ei liian hienovarainen, ei kuitenkaan liian ylikyvää.
Lisäksi voit löytää muutamia muita animaatiotyylejä otsakkeessa sekä joitain BG-kuvia, jotka haalistuvat näkymään. Tämä sivu on vain upea esimerkki siitä web-animaatio onnistuu.
7. Hike
Esimerkki hienoista animaatioista tarkistaa Vaellus .
Heidän sivunsa vaihtelee animoitujen elementtien ja kiinteiden elementtien välillä. Animaation vaikutukset ovat kuitenkin nopeita, joten et ärsyytä odottamassa näkyvää sisältöä.
Tämä on minun mielestäni vieritys-animaatiovaikutus. Se on aina kaunis tekniikka, mutta ajoituksen on oltava nopea ja täsmällinen. Kukaan ei halua odottaa sisällön saapumista ja Hike ymmärtää tämän selvästi.
8. Project Fi
Jos on joku, joka tuntee UX: n, se on Google. Kaikilla tuotteillaan on paljon aloitussivuja, Project Fi yksi esimerkki eräiden fantastisten animaatioiden kanssa.
Nämä koskevat vain kuvakkeita, eivätkä ne haalistu näkyviin, vaan pikemminkin ponnahdusikkunat alhaalta sivulta. Kun vierität, löydät kuvakkeet, jotka liukuvat näkyviin jokaiselle pienelle osalle.
Se on melko hieno vaikutus, mutta se lisää elämää muotoiluun. Ja se perustuu pelkästään katsojan sijaintiin sivulla, joten jos siirryt yläosaan ja siirrät takaisin alas, samoja animaatioefektejä tervehtii sinua.
9. Base
Base CRM homepage Base CRM: n etusivulle on erinomainen esimerkki yksinkertaisesta animaatiosta työssä. Tämä sivusto käyttää mukautettuja animaatioefektejä, jotta kuvat siirretään katsojan silmien viereen.
Lähtökohtien määrän perusteella näen päivittäin, mikä on hyvin tyypillistä odotukseni kannalta. Se ei todellakaan ole monimutkainen animaatio, joka luo uudelleen, eikä se myöskään vaikuta liian paljon kokemukseen.
Yksi asia, jonka haluan, on, että animaatiot latautuvat hieman nopeammin. Mutta pidemmällekin, mielestäni tämä on erinomainen esimerkki viihdyttämästä kuvista, joilla on erittäin puhdas asettelu käynnistykseen.
10. AnyList
Kaikilla parhailla mobiilisovelluksilla on omat verkkosivustot edistämiseen. Ja parhaimmillaan on yleensä melko upeita animaatiotyylejä.
AnyList sekoittaa muutamia erilaisia tekniikoita yhdellä sivulla. Heidän otsikkokuvansa animoivat leikkausalueen alapuolelta, mutta se on ainoa "liikkuva" animaatio sivulla.
Kaikki muu vain häipyy näkymään ja se käyttää melko nopeaa latausaikaa animaatiolle. Näitä tekniikoita käytetään muualla sivustolla, mikä antaa sille yhtenäisemmän tunnelman.
11. Ernest
Sivutyyliä varten Ernest on hieman erilainen kuin muut aloitussivut, jotka olen käsitellyt.
Se käyttää parallaksia vierittämällä animaatioita luoda liikkeen yhdellä sivun asettelulla eri osioilla.
Nämä vaihtelevat sen mukaan, mihin suuntaan olet vierittynyt, siirrytkö ylös tai alas ja kuinka nopeasti. Ne vaihtelevat myös intensiteetillä sivun eri osien perusteella.
Voit navigoida sivupistevaluettelovalikosta ja tämä nopeasti hyppää sivun ympäri eri alueille. Se on yksi harvoista tekniikoista, joita näet usein parallaksisivuilla, ja se auttaa Ernestin erottua joukosta.
12. TaxiNet
Tutustu vääriin koko sivun animaatioihin katsomalla TaxiNet verkkosivusto.
Se on vierityspohjaisten animaatioefektien smorgasbord, joka on liitetty kuvakkeisiin, tekstiin, kuviin ja jopa taustatyyppeihin. Yksittäisten sivujen taustavärit animoivat käyttäjän kanssa, ei todellakaan ole tyypillinen tekniikka, mutta varmasti mielenkiintoinen.
Jos pidät tästä tyylistä, voit ehdottomasti soveltaa samanlaista lähestymistapaa omalle aloitussivullesi. Varmista, että pidät animaatiot nopeasti ja nopeasti, koska kukaan ei halua odottaa, että siistit animaatiot latautuvat.
Mutta jos teet ne oikein, nämä vieritystekstielementit lisäävät mukavasti minkä tahansa aloitussivun.
