Hur man använder animationen på scroll i webbdesign

Animation On Scroll är den grundläggande effekten av att ladda och rulla webbsidor. Du kan lägga till det genom att välja ett element och sedan gå till egenskapspanelen. Klicka på länken On Scroll och markera kryssrutan Animation. Välj en förinställning och anpassa On Scroll-effekten om det behövs. Förhandsgranska för att se Animation on Scroll-effekten.

Ladda ner för Windows Ladda ner för Mac

Browse By Feature Categories

Applikationsfunktioner

Egenskaper för webbplats och sida

WordPress-widgets

Slinganimering

Idag har många webbplatser animerade element som används för att locka uppmärksamhet genom att öka besöken, förbättra varumärket och lägga till webbplatsernas unika karaktär. Nicepage ger webbdesigners, proffs och nybörjare möjlighet att bygga animationsrika block utan kodning. Du kan aktivera egenskapen Loop Animation i egenskapspanelen för att lägga till animering och interaktion på din webbplats, vilket ger JavaScript och CSS kraft till den visuella webbplatsredigeraren.

Anpassning av animering

Antag att vanliga animationseffekter är för lite för din webbplatsidé, och du måste blanda flera animationseffekter för att uppnå önskat resultat. Du kan helt kontrollera egenskaperna som är tillgängliga för de anpassningsbara animeringsförinställningarna. Och välj bara de fördesignade animeringsförinställningarna från biblioteket med minimal finjustering. Du kan gå till egenskapspanelen och anpassa alla egenskaper för tona, flytta, zooma, rulla, rotera och spiraleffekterna.

Animationsförinställningar

Du kan använda förinställningarna Animation On Scroll. Och det finns två typer av dem: Anpassningsbara animeringsförinställningar, vilka egenskaper du kan redigera helt, de förutformade animeringsförinställningarna, som du bara kan välja från biblioteket och har minimal finjustering.

Tona animationseffekt

Tona effekten är en stilistisk övergång där ett element, som en bild, text eller bakgrund, gradvis försvinner och dyker upp på webbsidan. Du kan ställa in toningseffekten genom att välja ett element och välja Animation on Scroll i egenskapspanelen.

Bildanimeringseffekt

Lägg till effekten om du vill att ditt element ska flyttas gradvis från en punkt till en annan i en viss riktning när sidan laddas eller rullas. Ange Slide Effect genom att lägga till, välja ett element och sedan klicka på Slide Preset i avsnittet Animation On Scroll i egenskapspanelen.

Zoomanimeringseffekt

Zoomeffekten är övergången av gradvis utseende samtidigt som du ändrar storleken på ett element. Det gör det möjligt att stänga ett element när webbsidan laddas eller rullas.

Vänd animationseffekt

Använd Flip-effekten för att implementera halvrotationen av ett element, varvid du kan se både fram- och baksidan av det aktuella elementet. Du kan välja vändstången antingen med X-axeln eller Y-axeln. Du kan välja ett element och sedan Vänd-förinställningen för animeringen vid rullning i egenskapspanelen.

Bounce Animation Effect

Använd Bounce Animation-effekten för att få elementet att röra sig nedåt, uppåt och snabbt nedåt igen vid sidrullning. Du kan aktivera On-Scroll Bounce Animation genom att klicka på motsvarande förinställning i avsnittet Animation On Scroll i egenskapspanelen.

Rotera animationseffekt

Rotationseffekten definierar en transformation som roterar ett element runt en fast punkt på sidan utan deformation. Denna effekt är också tillgänglig som en förinställning, som du kan hitta i avsnittet Animation On Scroll i egenskapspanelen.

Box Animation Effekt

The Box, eller Jack In The Box, skapar en övergångseffekt som imiterar en populär skämtleksaksrörelse. Det börjar med att centralen tonar in och fortsätter med skakning från en sida till en annan.

Flash-animationseffekt

Flash Animation, som också förknippas med blinkning, är också populärt för att locka besökares uppmärksamhet. Det ser ut som serier av in- och uttoningsövergångar med tonvikten på det animerade objektets eller textens ogenomskinliga tillståndet.

Gångjärnsanimationseffekt

Med gångjärnseffekten vänder ett element eller får det att vända med en plötslig snabb rörelse som stannar vid punkten för ett tänkbart gångjärn. Denna naturliga övergång kan lägga till överraskning till interaktionen i din webbdesign.