Jak używać efektów ruchu do animowania obrazów (obracanie, skalowanie, przewijanie i przezroczystość)

Opublikowany: 2019-05-06

W związku z ogromną pozytywną reakcją, jaką otrzymaliśmy po naszych samouczkach dotyczących efektów ruchu, postanowiliśmy zebrać je w jeden artykuł, który pomoże Ci w bardzo łatwym tworzeniu bardziej interaktywnych stron internetowych.

Omówimy:

Obróć, poziomo i skaluj efekty
Efekt przezroczystości obrazu
Obracaj i skaluj obrazy
DODATKOWA SZTUKA: Efekt nakładania się animowanego tekstu

Więc chodźmy…

Animacja obrazu: obracanie, przewijanie w poziomie, przewijanie w pionie i skalowanie

W tym filmie dowiesz się, jak dodawać efekty przewijania do projektów Elementora, dzięki którym obrazy wyglądają tak, jakby się kołysały, przesuwały, unosiły się w powietrzu lub przesuwały, gdy użytkownik przewija stronę w dół.

1. Obracanie obrazu: wykonywanie huśtawek

Aby zmienić obraz, kliknij kartę Zaawansowane, otwórz sekcję Efekty ruchu i włącz Efekty przewijania .

Następnie kliknij opcję Obróć i wybierz kierunek obracania obrazu.

Aby animacja była płynna, ustaw również suwak Szybkość na 1 .

Na koniec możesz pozostawić Viewport ustawiony na wartości domyślne – 0% i 100%:

how-to-add-scrolling-effects-to-your-website

Na koniec ustaw Punkt zakotwiczenia Y na Top, aby obraz „rozkołysał się” od góry.

2. Przewijanie obrazu w poziomie: jak zrobić przesuwanie obrazu

Aby zrobić slajd obrazu, włącz Efekty przewijania, tak jak w poprzedniej sekcji. Następnie włącz Przewijanie w poziomie i:

Wybierz kierunek, w którym ma się przesuwać obraz
Ustaw prędkość na 10

how-to-add-scrolling-effects-to-your-website-2

I to wszystko! Twój obraz będzie się przesuwał, gdy odwiedzający przewinie stronę w dół.

3. Przewijanie obrazu w pionie: jak sprawić, by obrazy były unoszone?

Aby obraz się unosił, włącz Efekty przewijania . Następnie włącz przewijanie w pionie i ustaw kierunek równy Dół

how-to-add-scrolling-effects-to-your-website-3

I to wszystko! Pozostałe ustawienia można pozostawić jako domyślne.

4. Skala obrazu: jak utworzyć powiększenie obrazu

W przypadku tego ostatniego będzie wyglądać tak, jakby obraz poruszał się w kierunku odwiedzającego, gdy gość przewinie się w dół. Innym sposobem myślenia o tym jest „tonięcie” obrazu.

Aby rozpocząć, włącz Efekty przewijania . Następnie włącz przewijanie w pionie i:

Ustaw kierunek na dół
Ustaw widoczny obszar między 0% a 40%

how-to-add-scrolling-effects-to-your-website-4

Następnie kliknij opcję Skaluj i ustaw Prędkość równą 6 . Użyj także ustawienia Rzutnia , aby ustawić dolne 20% i górne 80%.

I to wszystko.

Teraz, gdy już wiesz, jak korzystać z efektów przewijania, eksperymentuj z własnymi projektami, aby stworzyć coś niesamowitego!

Przezroczystość obrazu: spraw, aby obrazy i tła znikały podczas przewijania

W tym filmie dowiesz się, jak używać ustawień Viewport do tworzenia ciekawych efektów ruchu, gdy użytkownicy poruszają się po Twojej witrynie. Efekty ruchu można stosować zarówno do tła, jak i sekcji, a także do poszczególnych widżetów, co zapewnia dużą elastyczność w zakresie typów tworzonych efektów. Zaczynać:

Wybierz obraz
Przejdź do zakładki Zaawansowane
Znajdź sekcję Efekty ruchu
Włącz efekty przewijania

Następnie włącz przewijanie w poziomie, aby obraz przesuwał się od lewej do prawej, gdy użytkownicy przewijają stronę w dół. Możesz także dostosować ustawienie Szybkość , aby ruch był szybszy lub wolniejszy:

how-to-use-motion-effects-viewport-settings-1

Następnie przyjrzyjmy się opcji Viewport i zobaczmy, jak to działa.

Po pierwsze, ważne jest zdefiniowanie terminu – obszar wyświetlania odwiedzającego to widoczny rozmiar ekranu urządzenia użytkownika .

Opcje widocznego obszaru pozwalają wybrać, kiedy rozpocząć i zatrzymać wybrany efekt przewijania w oparciu o widoczny obszar odwiedzającego:

Na przykład, jeśli ustawisz dolną część widocznego obszaru na 0%, a górną na 100%, obraz zacznie się poruszać, gdy tylko stanie się widoczny na dole widocznego obszaru użytkownika. Co więcej, obraz osiągnie swoją „pierwotną” pozycję, gdy znajdzie się na środku widocznego obszaru użytkownika ( lub 50% ), i będzie się przesuwał, aż osiągnie szczyt (100%).

Oto cały efekt w szczegółach:

Obraz zacznie się po lewej stronie oryginalnej pozycji, gdy po raz pierwszy pojawi się w widocznym miejscu użytkownika (widoczny obszar użytkownika na poziomie 0% )
Osiągnie swoją pierwotną pozycję na środku obszaru wyświetlania użytkownika (widoczny obszar użytkownika na poziomie 50% )
Będzie nadal przesuwał się w prawo od swojej pierwotnej pozycji, gdy odwiedzający będzie przewijał ( aż osiągnie 100%)

how-to-use-motion-effects-viewport-settings-2

Z drugiej strony, jeśli ustawisz Dolną część rzutni na 50%, a Górną na 100%:

Obraz rozpocznie się w swojej pierwotnej pozycji.
Gdy obraz znajdzie się w środku widocznego obszaru użytkownika (50%), zacznie się przesuwać w prawo, aż do momentu, gdy obraz osiągnie górną część widocznego obszaru użytkownika (100%).

Spójrzmy na inny rodzaj efektu przewijania, aby pokazać, jak działa Viewport …

Przykład efektu przezroczystości

W tym przykładzie włącz opcję Przezroczystość i:

Ustaw kierunek na Fade In
Ustaw poziom na 10 ( to sprawia, że obraz jest bardzo przezroczysty na początku )

Jeśli ustawisz obszar Dolny na 0%, a Górny na 100%, obraz będzie przezroczysty, gdy po raz pierwszy pojawi się na dole obszaru roboczego użytkownika (0%). Gdy obraz przesuwa się w górę, staje się mniej przezroczysty, ostatecznie osiągając swój pierwotny wygląd, gdy osiągnie górną część widocznego obszaru użytkownika (100%). Jeśli chcesz to odwrócić, możesz wybrać Fade Out . Następnie obraz na początku będzie wyglądał normalnie i zwiększy się przezroczystość, gdy odwiedzający przewinie w dół. Na koniec inną opcją jest Zanikanie . W tym przypadku obraz zniknie, aby rozpocząć, a następnie z powrotem, gdy odwiedzający będzie przewijał. Jeśli ustawisz rzutnię Dolną na 40%, a Górną na 60% za pomocą opcji Zanikanie , wtedy:

Obraz zniknie od 0% do 40%
Pozostanie wyblakły od 40% do 60%
Gdy osiągnie 60%, zacznie ponownie zanikać między 60% a 100%

how-to-use-motion-effects-viewport-settings-3

Teraz, gdy wiesz, jak działa ustawienie rzutni , możesz poeksperymentować z różnymi ustawieniami, aby znaleźć efekt, który Ci się podoba.

Użyj punktów zakotwiczenia X i Y w efektach obracania i skalowania

W tym filmie dowiesz się o punktach kontrolnych X i Y dla efektów Obróć i Skaluj w Efektach ruchu Elementora .

Pod koniec będziesz wiedział, jak zastosować te ustawienia, aby stworzyć fajne efekty ruchu w swojej witrynie.

Aby rozpocząć, wybierz obraz, do którego chcesz dodać efekty i:

Przejdź do zakładki Zaawansowane
Znajdź ustawienia efektów ruchu
Włącz efekty przewijania

Punkty zakotwiczenia w efekcie obracania

Zacznijmy od efektu Rotate. Kliknij ikonę ołówka przy efekcie Obróć , aby go włączyć – możesz pozostawić ustawienia domyślne. Następnie poszukaj ustawień Punkt zakotwiczenia X i Punkt zakotwiczenia Y , które pojawią się poniżej. Punkty zakotwiczenia X i Y określają oś, wokół której obraca się obraz. Domyślnie oba są ustawione na Center , co oznacza, że obraz będzie się obracał, jakby na środku obrazu znajdowała się „szpilka”. Jednak zmiana punktu zakotwiczenia X i/lub Y spowoduje różne efekty obrotu. Na przykład, jeśli ustawisz punkt zakotwiczenia X po lewej stronie, a punkt zakotwiczenia Y na górze, obraz zostanie obrócony wokół lewego górnego rogu w następujący sposób:

Lub, jeśli ustawisz punkt zakotwiczenia X na środku, a punkt zakotwiczenia Y na górze, obraz będzie się obracał, jakby był obrazem zawieszonym u góry. Masz pomysł? Przyjrzyjmy się jeszcze jednemu. Jeśli zmienisz punkt zakotwiczenia X w prawo, obraz zacznie się teraz obracać, jakby był przypięty w prawym górnym rogu. Podsumujmy to. Punkt zakotwiczenia X określa pozycję na osi X, wokół której obraca się obraz:

Punkt zakotwiczenia Y robi to samo dla orientacji pionowej:

Punkty zakotwiczenia w efekcie skali

Teraz, gdy rozumiesz już podstawową koncepcję, przyjrzyjmy się, jak ten sam pomysł działa z efektem Skala .

Aby rozpocząć, wyłącz efekt Obróć, włącz efekt Skala i:

Ustaw kierunek na skalowanie w górę
Ustaw prędkość na -5

Domyślnie zarówno Punkt zakotwiczenia X , jak i Punkt zakotwiczenia Y są ustawione na Środek , co oznacza, że obraz jest skalowany w dół w kierunku środka widżetu obrazu.

Z drugiej strony, jeśli ustawisz punkty kontrolne na Left i Top , obraz będzie skalowany w dół w kierunku lewego górnego rogu.

To dokładnie ten sam pomysł, co efekt obracania.

Teraz, gdy wiesz, jak działają punkty kontrolne X i Y, śmiało pobaw się tymi ustawieniami, aby uzyskać dokładnie taki efekt, jaki chcesz.

DODATKOWA SZTUKA: Efekt nakładania się animowanego tekstu

W tym filmie dowiesz się, jak korzystać z funkcji przewijania w poziomie w efektach ruchu Elementora, aby stworzyć zgrabny animowany efekt tekstowy w swojej witrynie.

Będziesz mógł przesuwać tekst po stronie podczas przewijania przez odwiedzających. A dzięki kilku poprawkom możesz nawet zmienić kolor tekstu podczas ruchu.

W tym przykładzie omówimy tworzenie wielu animowanych nagłówków:

Prosty szary nagłówek, który przesuwa się w prawo i pozostaje w tym samym kolorze
Biało-różowy nagłówek, który przesuwa się w lewo i zmienia kolor z białego na różowy, gdy przecina różowe tło

Tworzenie pierwszego nagłówka — Just Motion

Zacznijmy od pełnego szarego nagłówka.

Wybierz nagłówek, a następnie:

Przejdź do zakładki Zaawansowane
Znajdź sekcję Efekty ruchu
Włącz efekty przewijania

Następnie kliknij ołówek obok efektu Przewijanie w poziomie , aby wprowadzić jego ustawienia:

Zmień kierunek na kierunek, w którym chcesz przewijać tekst (w naszym przykładzie „Do prawej”)
Pozostaw ustawienia prędkości i rzutni jako domyślne

I to wszystko! Twój nagłówek przesunie się w prawo, gdy odwiedzający przewinie stronę w dół.

Tworzenie drugiego nagłówka — ruch i zmiana koloru

Teraz przejdźmy trochę bardziej zaawansowani i pozwólmy, aby nagłówek zmieniał kolor podczas ruchu. Proces ten obejmuje:

Tworzenie duplikatów wewnętrznych sekcji
Korzystanie z opcji Przepełnienie: Ukryty , aby ukryć nagłówek w jednej z sekcji, gdy przekroczy on sekcję wewnętrzną

Aby rozpocząć, dodaj nowy widżet Sekcja wewnętrzna do sekcji, w której chcesz umieścić nagłówek, a następnie usuń lewą kolumnę. Następnie ustaw Minimalną wysokość równą 450 px:

Następnie przejdź do zakładki Styl i ustaw kolor tła na różowy. Na koniec przejdź do zakładki Zaawansowane i ustaw lewe dopełnienie na 33%. Następnie dodaj widżet Nagłówek i dostosuj go do własnych upodobań. Powinieneś mieć nagłówek w wewnętrznej sekcji w następujący sposób:

Teraz edytuj widżet Nagłówek i włącz Efekty przewijania na karcie Zaawansowane . Następnie włącz ustawienie Przewijanie w poziomie i pozostaw opcje jako domyślne.

Teraz twój nagłówek przesunie się w lewo, ale nie zmieni jeszcze kolorów. Widać, że nadal jest biały nawet na białym tle.

Naprawmy to…

Następnie zduplikuj sekcję wewnętrzną. Teraz będziesz mieć dwie identyczne wewnętrzne sekcje i nagłówki. Możesz użyć Nawigatora, aby zmienić nazwy sekcji, aby pomóc Ci zapamiętać, które:

Teraz przejdź do dolnej wewnętrznej sekcji ( duplikatu ) i zmień jej kolor tła na biały. Będziesz także chciał zmienić kolor nagłówka na taki sam jak kolor tła w oryginalnej wewnętrznej sekcji. Następnie dodaj ujemny górny margines 450 pikseli do dolnej wewnętrznej sekcji. Teraz dolna ( duplikat ) wewnętrzna sekcja powinna pojawić się „na górze” oryginalnej wewnętrznej sekcji. Aby rozwiązać ten problem, ustaw indeks Z dla zduplikowanej sekcji na 1 i ustaw indeks Z dla sekcji oryginalnej na 2 . Następnie musisz się upewnić, że tylko różowy nagłówek będzie widoczny, gdy wyjdzie poza szerokość sekcji wewnętrznej. Poniżej możesz zobaczyć przykład tego, czego chcemy:

Aby osiągnąć ten efekt, przejdź do ustawień oryginalnej sekcji wewnętrznej. Na karcie Układ znajdź opcję Przepełnienie i ustaw ją na Ukryty .

I to wszystko! Teraz tylko nagłówek z zduplikowanej sekcji pojawi się po przewinięciu obok wewnętrznej sekcji, co tworzy zgrabny, zmieniający kolor efekt tekstowy.