Hoe het Zoom-effect op scrollen toe te passen op een website-element

The Box, of Jack In The Box, Creëert een overgangseffect dat een populaire grap speelgoedbeweging imiteert. Het begint met de centrale fade-in en gaat verder met schudden van de ene naar de andere kant.

Flash-animatie, ook geassocieerd met knipperen, is ook populair om de aandacht van bezoekers te trekken. Het lijkt op een reeks fade-in en fade-out overgangen met het accent op de ondoorzichtige staat van het geanimeerde object of de tekst.

Tegenwoordig hebben veel websites geanimeerde elementen die worden gebruikt om de aandacht te trekken door het aantal bezoeken te verhogen, de branding te verbeteren en het unieke karakter van websites toe te voegen. Nicepage stelt webdesigners, pro's en beginners, in staat om animatierijke blokken te bouwen zonder codering. U kunt de eigenschap Loop Animation in het eigenschappenvenster inschakelen om animatie en interactie aan uw website toe te voegen, waardoor de kracht van JavaScript en CSS in de visuele website-editor komt.

U kunt de Animation On Scroll-presets gebruiken. En er zijn twee soorten: aanpasbare animatiepresets, waarvan je de eigenschappen volledig kunt bewerken, de vooraf ontworpen animatiepresets, die je alleen uit de bibliotheek kunt kiezen en die minimale fijnafstemming hebben.

Pas het effect Flip toe om de semi-rotatie van een element te implementeren, waarbij u zowel de voor- als achterkant van het huidige element kunt zien. U kunt de flip-paal kiezen via de X-as of de Y-as. U kunt een element selecteren en vervolgens de voorinstelling spiegelen voor de animatie bij scrollen in het eigenschappenvenster.

Met het scharniereffect draait een element om of laat het kantelen met een plotselinge snelle beweging die stopt op het punt van een denkbaar scharnier. Deze natuurlijke overgang kan verrassing toevoegen aan de interactie in uw webdesign.

Voeg het effect toe als u wilt dat uw element bij het laden of scrollen van de pagina geleidelijk van het ene punt naar het andere in een bepaalde richting gaat. Specificeer het dia-effect door een element toe te voegen, een element te kiezen en vervolgens op de diavoorinstelling te klikken in het gedeelte Animatie bij scrollen van het eigenschappenvenster.

Het effect Fade is een stilistische overgang waarin een element, zoals een afbeelding, tekst of achtergrond, geleidelijk verdwijnt en weer op de webpagina verschijnt. U kunt het vervagingseffect instellen door een element te selecteren en de animatie bij scrollen in het eigenschappenpaneel te kiezen.

Gebruik het effect Bounce-animatie om het element naar beneden, naar boven en snel weer naar beneden te laten bewegen bij het scrollen op de pagina. U kunt de On-Scroll Bounce Animation inschakelen door op de corresponderende Preset te klikken in het gedeelte Animation On Scroll van het Eigenschappenpaneel.

Stel dat standaard animatie-effecten te weinig zijn voor uw website-idee en dat u verschillende animatie-effecten moet mixen om het gewenste resultaat te bereiken. U kunt de eigenschappen die beschikbaar zijn voor de aanpasbare animatievoorinstellingen volledig beheren. En kies alleen de vooraf ontworpen animatievoorinstellingen uit de bibliotheek met minimale fijnafstemming. U kunt naar het eigenschappenpaneel gaan en alle eigenschappen van de effecten vervagen, verplaatsen, zoomen, rollen, roteren en spiraal aanpassen.

Het Rotate-effect definieert een transformatie die een element rond een vast punt op de pagina roteert zonder de vervorming. Dit effect is ook beschikbaar als een voorinstelling, die u kunt vinden in het gedeelte Animatie bij scrollen van het eigenschappenpaneel.