Scroll door FX

Blocs wordt geleverd met verschillende animatiefuncties, maar Scroll FX is waarschijnlijk de meest boeiende omdat ze je in staat stellen om objecten op het scherm te animeren en die animaties te synchroniseren met het scrollen van een pagina. Deze stijl van animatie-effect wordt gewoonlijk parallax genoemd.

Scroll FX toepassen

Het toepassen van parallax-scrolleffecten is ongelooflijk eenvoudig Blocs​ Wanneer een element is geselecteerd op het ontwerpcanvas, zijn er verschillende, gebruiksvriendelijke bedieningselementen waarmee u belangrijke animatiewaarden voor het geselecteerde element kunt instellen, beschikbaar in de zijbalkinspecteur.

In en uit evenementen

Scroll FX zijn onderverdeeld in twee hoofdoptiesets, Scroll naar binnen en Scroll naar buiten. De Scroll naar binnen opties bepalen hoe een element wordt geanimeerd terwijl de pagina naar beneden wordt gescrolld en het element komt in visie. De Scroll naar buiten opties bepalen hoe een element wordt geanimeerd terwijl de pagina omhoog wordt geschoven en het element gaat uit van het zicht.

Doorlopende animatie

Door de continu-optie in te schakelen, wordt de kleine animatiepauze voorkomen die optreedt wanneer het element zijn oorspronkelijke positie op het scherm bereikt. Hierdoor kunnen gebruikers vloeiende, continue parallax-animaties maken. Om de continue optie in te schakelen, moet het geselecteerde object zowel scroll in als out events hebben toegepast.

Bladervertraging

Met het vertragingsinvoerveld kunt u een vertragingswaarde aanpassen en instellen op een element waarop een scroll FX-animatie is toegepast. De vertragingswaarde wordt gemeten in pixels. Een hogere waarde zorgt voor een langere vertraging.

Scroll weerstand

Met het weerstandsinvoerveld kunt u bepalen hoe gevoelig een scroll-animatie is voor het scrollen van de gebruiker. De standaardwaarde is 10 en de laagst ondersteunde waarde is 1. Nul- en negatieve waarden worden standaard ingesteld op 10. Hoe lager de waarde, hoe sneller de animatie.

Tip voor beginners

Onthoud dat scroll-in scroll FX zelden te zien zal zijn wanneer ze worden toegepast op inhoud boven de vouw (bovenaan een site), aangezien er zelden naar binnen wordt gescrolld en over het algemeen alleen maar uit beeld.

Bijgewerkt op 28 november 2022

Was dit artikel behulpzaam?

Gerelateerde artikelen