12 Essentiële scroll-to-view-animatietrends
Geanimeerde pagina-elementen komen het meest voor op bestemmingspagina's en startup-websites. Maar er wordt niet altijd over gesproken in ontwerpkringen, omdat het idee van "animeren in beeld" niet veel wordt behandeld.
Ik gebruik de uitdrukking scrollen om te bekijken omdat het een nauwkeurige beschrijving lijkt. Kortom, terwijl je naar beneden scrolt, komen er nieuwe geanimeerde elementen in beeld.
Het is geen techniek die voor elke website werkt, maar het voegt wel een leuke toets toe aan bepaalde lay-outs. En ik heb een aantal van mijn favorieten samengesteld om te laten zien hoe deze scroll-to-view-animaties werken en waarom je ze misschien zelf zou willen gebruiken.
1. Morgen Slaap
Op de Morgen Slaap website zult u een paar vrij goedaardige geanimeerde effecten opmerken. Hiermee vervaag je verschillende stukjes tekst en CTA's rondom de lay-out.
Wat interessant is, is hoe de meeste afbeeldingen en achtergrondgebieden zelfs bij de eerste schuif volledig zichtbaar zijn. Veel websites gebruiken een vervagende animatie om afbeeldingen en schermafbeeldingen weer te geven terwijl de tekst zichtbaar blijft.
Dit kleine verschil helpt de aandacht te vestigen op de tekst als deze in beeld verdwijnt. Een geweldige manier om de aandacht te trekken van bezoekers die meekijken.
2. Draai
Een andere techniek die ik vaak zie, is het richten van de meeste pagina-inhoud op on-scroll-animaties.
Bijvoorbeeld de De startpagina van Twist omvat verschillende paginasegmenten en tekstblokken die tijdens scrollen in & uit beeld bewegen. Deze hebben een zeer zacht vervagend effect, zodat ze merkbaar en toch niet te hard zijn.
Sommige bezoekers zijn geïrriteerd door de vertraging, maar ik denk niet dat het te lang duurt. Bovendien animeert het maar één keer, dus als je de onderkant van de pagina raakt, zijn alle animaties klaar.
3. Garenapp
Bekijk voor veel complexere animaties het Garenapp lander. Deze heeft meerdelige animaties en zelfs elementen die vanuit verschillende hoeken in beeld komen.
Sommige van de screenshot-demo-afbeeldingen animeren naar boven terwijl de begeleidende tekst / BG-patronen in beeld animeren. Deze afwisselende stijl is behoorlijk uniek en niet iets dat ik vaak zie.
De landingspagina is echter ook ongelooflijk eenvoudig en er is niet veel anders om de aandacht te trekken. In dit geval werken verschillende animaties goed.
4. DashFlow
Van al deze voorbeelden denk ik DashFlow maakt gebruik van de meest voorkomende animatietechnieken.
Deze lander bezorgt afbeeldingen en tekst in één oogopslag in beeld. Het is heel eenvoudig en gebruikt een lay-out met één kolom, zodat alle inhoud recht naar beneden in een lineair pad loopt.
Niets bijzonders aan dit ontwerp dan de zeer duidelijke methode om items op de scroll te animeren. Een geweldige stijl als u een vergelijkbare website heeft en de animaties eenvoudig wilt houden.
5. Quuu bevorderen
Quuu bevorderen houdt animaties tot het absolute minimum beperkt en gebruikt ze alleen in CTA-gebieden.
Ik kan niet zeggen of dit de conversies verhoogt, maar dat lijkt wel het doel te zijn. Wanneer u de pagina voor het eerst laadt, wordt de bovenste kopanimatie in beeld zichtbaar met een kantelende animatie op de CTA.
Naarmate je verder scrolt, merk je dat de rest van de pagina behoorlijk statisch is. Maar onderaan is er een laatste CTA boven het voetgedeelte dat ook animeert & dezelfde kantelbare animatie uitvoert.
Geeft aan dat je on-scroll animatie-effecten kunt hebben die niet over de hele pagina lopen.
6. Qonto
De startpagina voor Qonto heeft een interessante kijk op de scroll-to-view-animatie. Het gebruikt hetzelfde type animatie op de hele website en animeert afzonderlijke items vanaf de zijkant in beeld.
Voor het merendeel van de pagina omvat dit pictogramsecties met een kleine afbeelding boven bepaalde inhoud die de functies van de app toelicht. Niet te subtiel maar ook niet overdreven openlijk.
Bovendien kunt u een paar andere animatiestijlen in de koptekst vinden, samen met enkele BG-afbeeldingen die vervagen. Deze pagina is slechts een prachtig voorbeeld van wat webanimatie kan doen.
7. Wandeling
Bekijk een voorbeeld van subtiele animaties hike .
Hun pagina wisselt af tussen geanimeerde elementen en vaste elementen. Maar de animatie-effecten zijn snel, dus je voelt je niet geïrriteerd als je op zichtbare inhoud wacht.
Dit is mijn voorkeur voor elk scroll-naar-animatie-effect. Het is altijd een mooie techniek, maar de timing moet snel en ter zake zijn. Niemand wil wachten op inhoud om in beeld te komen en Hike begrijpt dit duidelijk.
8. Project Fi
Als er iemand is die geweldige UX kent, is het Google. En over al hun producten beschikken ze over een heleboel bestemmingspagina's, Project Fi een voorbeeld zijn met een aantal fantastische animaties.
Deze zijn alleen van toepassing op pictogrammen en ze vervagen niet in beeld, maar komen eerder van beneden op de pagina tevoorschijn. Terwijl u schuift, vindt u pictogrammen die voor elk klein gedeelte in beeld verschijnen.
Het is een vrij subtiel effect maar het voegt wat leven in het ontwerp. En het is uitsluitend gebaseerd op de positie van de kijker op de pagina, dus als u naar de bovenkant scrolt en weer naar beneden gaat, wordt u begroet door dezelfde animatie-effecten.
9. Basis
De Startpagina van Base CRM is een uitstekend voorbeeld van eenvoudige animatie op het werk. Deze site maakt gebruik van aangepaste animatie-effecten om afbeeldingen naar boven en naar de ogen van de kijker te verplaatsen.
Op basis van het aantal landingspagina's dat ik dagelijks zie, is dit heel typerend voor wat ik verwacht. Het is niet echt een complexe animatie om opnieuw te creëren en het heeft ook geen invloed op de ervaring.
Ik zou willen dat de animaties iets sneller laden. Maar verder denk ik dat dit een goed voorbeeld is van het animeren van afbeeldingen op scrollen met een zeer schone lay-out om op te starten.
10. AnyList
Alle beste mobiele applicaties hebben hun eigen websites voor promotie. En de besten hebben meestal een aantal mooie snazzy animatiestijlen.
AnyList mengt een paar verschillende technieken samen op één pagina. Hun headerafbeelding beweegt van onder het afgesneden gebied, maar het is de enige "bewegende" animatie op de pagina.
Al het andere verdwijnt gewoon in beeld en het gebruikt allemaal een vrij snelle laadtijd voor de animatie. Deze technieken worden elders op de site gebruikt, waardoor het een meer samenhangend gevoel krijgt.
11. Ernest
De paginastijl voor Ernest is een beetje anders dan andere bestemmingspagina's die ik heb besproken.
Het gebruikt parallax scrollen animaties om beweging te maken op een enkele pagina-indeling met verschillende secties.
Deze variëren op basis van de richting waarin u scrolt, of u nu omhoog of omlaag gaat en met welke snelheid. Ze variëren ook met intensiteit op basis van de verschillende secties van de pagina.
U kunt navigeren met behulp van het zijtoetsennavigatiemenu en dit springt snel rond de pagina naar verschillende gebieden. Het is een van de weinige technieken die je vaak op parallax-pagina's ziet en het helpt Ernest zeker om op te vallen tussen de massa.
12. TaxiNet
Om een glimp op te vangen van de volledige paginageschiedenis in actie bekijk de TaxiNet website.
Het is een mengeling van op scrollen gebaseerde animatie-effecten die zijn gekoppeld aan pictogrammen, tekst, afbeeldingen en zelfs achtergrondstijlen. Afzonderlijke pagina-achtergrondkleuren animeren in beeld met de gebruiker, zeker geen typische techniek, maar zeker een interessante.
Als je van deze stijl houdt, kun je absoluut een vergelijkbare benadering toepassen op je eigen bestemmingspagina. Zorg er wel voor dat je de animaties snel en pittig houdt , want niemand wil wachten op je mooie animaties om te laden.
Maar als je ze goed invult, voegen deze scroll-to-view-elementen een leuk effect toe aan elke bestemmingspagina.
