Jak korzystać z animacji podczas przewijania w projektowaniu stron internetowych

Animacja przy przewijaniu to podstawowy efekt ładowania i przewijania stron internetowych. Możesz go dodać, wybierając element, a następnie przechodząc do panelu właściwości. Kliknij link On Scroll i zaznacz pole wyboru Animacja. Wybierz ustawienie wstępne i w razie potrzeby dostosuj efekt przewijania. Podgląd, aby zobaczyć animację w efekcie przewijania.

Pobierz dla systemu Windows Pobierz na komputer Mac

Przeglądaj według kategorii funkcji

Elementy strony internetowej

Obsługiwane systemy

Wizualny edytor stron

Właściwości witryny i strony

Widżety WordPress

Animacja w pętli

Obecnie wiele stron internetowych ma animowane elementy służące do przyciągnięcia uwagi poprzez zwiększenie odwiedzin, poprawę brandingu i dodanie wyjątkowości stronom. Nicepage umożliwia projektantom stron internetowych, profesjonalistom i nowicjuszom budowanie bogatych w animacje bloków bez kodowania. Możesz włączyć właściwość Loop Animation w panelu właściwości, aby dodać animację i interakcję do swojej witryny, wprowadzając możliwości JavaScript i CSS do wizualnego edytora witryny.

Dostosowywanie animacji

Załóżmy, że standardowe efekty animacji to za mało dla Twojego pomysłu na stronę internetową i musisz wymieszać kilka efektów animacji, aby osiągnąć pożądany efekt. Możesz w pełni kontrolować właściwości dostępne dla konfigurowalnych ustawień wstępnych animacji. Wybieraj tylko wstępnie zaprojektowane ustawienia animacji z biblioteki z minimalnym dostrojeniem. Możesz przejść do panelu właściwości i dostosować wszystkie właściwości efektów zanikania, przesuwania, powiększania, obracania, obracania i spirali.

Predefiniowane ustawienia animacji

Możesz użyć ustawień wstępnych Animacja przy przewijaniu. Istnieją dwa ich rodzaje: konfigurowalne ustawienia wstępne animacji, których właściwości można w pełni edytować, wstępnie zaprojektowane ustawienia wstępne animacji, które można wybierać tylko z Biblioteki i które wymagają minimalnego dostrojenia.

Efekt animacji zanikania

Efekt Zanikanie to stylistyczne przejście, w którym element, taki jak obraz, tekst lub tło, stopniowo znika i pojawia się z powrotem na stronie internetowej. Efekt zanikania można ustawić, wybierając element i wybierając opcję Animacja przy przewijaniu w panelu właściwości.

Efekt animacji slajdów

Dodaj efekt, jeśli chcesz, aby Twój element przesuwał się stopniowo z jednego punktu do drugiego w określonym kierunku podczas ładowania lub przewijania strony. Określ efekt slajdu, dodając, wybierając element, a następnie klikając ustawienie wstępne slajdu w sekcji Animacja podczas przewijania panelu właściwości.

Efekt animacji powiększenia

Efekt powiększenia to przejście stopniowego wyglądu podczas zmiany rozmiaru elementu. Pozwala zamknąć element podczas ładowania lub przewijania strony internetowej.

Odwróć efekt animacji

Zastosuj efekt Odwróć, aby zaimplementować półobrót elementu, dzięki czemu możesz zobaczyć zarówno przednią, jak i tylną stronę bieżącego elementu. Możesz wybrać drążek do przerzucania według osi X lub Y. Możesz wybrać element, a następnie ustawienie wstępne odwracania animacji podczas przewijania w panelu właściwości.

Efekt animacji odbicia

Użyj efektu Animacja odbicia, aby element przesuwał się w dół, w górę i szybko w dół podczas przewijania strony. Animację odbicia podczas przewijania można włączyć, klikając odpowiednie ustawienie wstępne w sekcji Animacja podczas przewijania panelu właściwości.

Obróć efekt animacji

Efekt obracania definiuje przekształcenie, które obraca element wokół stałego punktu na stronie bez deformacji. Ten efekt jest również dostępny jako ustawienie wstępne, które można znaleźć w sekcji Animacja podczas przewijania panelu właściwości.

Efekt animacji w pudełku

Pudełko, czyli Jack In The Box, tworzy efekt przejścia imitujący ruch popularnej zabawki-żartu. Zaczyna się od centralnego zanikania i kontynuuje drżeniem z jednej strony na drugą.

Efekt animacji Flash

Animacja Flash, również kojarzona z mruganiem, jest również popularna w celu przyciągnięcia uwagi odwiedzających. Wygląda jak seria przejść pojawiających się i zanikających z akcentem na nieprzezroczystość animowanego obiektu lub tekstu.

Efekt animacji zawiasów

Dzięki efektowi zawiasu element obraca się lub powoduje obrócenie z nagłym, szybkim ruchem zatrzymując się w miejscu możliwego do wyobrażenia zawiasu. To naturalne przejście może zaskoczyć interakcję podczas projektowania stron internetowych.