Jak ponownie uruchomić animację za każdym razem, gdy przewijasz obok elementu za pomocą Divi i GSAP

Jeśli chodzi o animowanie elementów na stronie, najprawdopodobniej będziesz chciał aktywować animację elementu, gdy wejdzie on w obszar wyświetlania. Dzięki wbudowanym ustawieniom animacji Divi, gdy tylko ten element pojawi się i zostanie animowany, pozostanie statyczny do momentu ponownego załadowania całej strony. W niektórych przypadkach możesz poszukać bardziej spójnego podejścia, w którym animacja jest uruchamiana ponownie z każdym wpisem rzutni. Pomoże Ci to usprawnić wrażenia, jakie odwiedzający mają w Twojej witrynie. W tym samouczku pokażemy dokładnie, jak to zrobić za pomocą Divi, GSAP i ScrollTrigger dla GSAP. Gdy uzyskasz podejście, będziesz mógł zastosować je do dowolnego elementu na swojej stronie. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ za DARMO

Aby położyć swoje ręce na darmowym układzie, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Utwórz projekt przekroju

Dodaj sekcję zastępczą

Zanim zaczniemy tworzyć projekt, dodamy dwie sekcje zastępcze do strony, nad którą pracujemy. W ten sposób możemy zobaczyć przewijanie po zakończeniu projektu. Alternatywnie możesz użyć projektu wewnątrz strony, którą już skonfigurowałeś. Dodaj nową zwykłą sekcję.

Rozmiary

Zmodyfikuj wysokość przekroju w następujący sposób:

• Wysokość: 100vh

Sekcja zastępcza klonu

Następnie sklonuj sekcję raz.

Dodaj nową sekcję między sekcjami zastępczymi

Aby stworzyć projekt, który można było zobaczyć w podglądzie tego posta, dodamy nową zwykłą sekcję pomiędzy sekcjami zastępczymi.

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza, przejdź do zakładki projekt i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Szerokość: 90%
• Maksymalna szerokość: 2080 pikseli

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość

Następnie dodaj pierwszy moduł tekstowy do kolumny i dołącz wybraną przez siebie treść.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ciężka
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #f9f9f9
• Rozmiar czcionki:
  • Pulpit: 150px
  • Tablet i telefon: 11vw
• Wysokość linii tekstu: 1,1 em
• Wyrównanie tekstu: do środka

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość H2

Dodaj kolejny moduł tekstowy poniżej poprzedniego i dodaj trochę treści H2.

Ustawienia tekstu H2

Stylizuj tekst H2 w następujący sposób:

• Czcionka nagłówka 2: Montserrat
• Nagłówek 2 Wyrównanie tekstu: do środka
• Rozmiar tekstu nagłówka 2:
  • Pulpit: 80px
  • Tablet i telefon: 10vw

Rozmiary

Dodaj również szerokość 100%.

• Szerokość: 100%

Pozycja

I zmień położenie całego modułu w zakładce Zaawansowane.

• Pozycja: bezwzględna
• Lokalizacja: Centrum

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz poniżej poprzedniego, używając następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i dostosuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Szerokość: 90%
• Maksymalna szerokość: 2080 pikseli

Ustawienia kolumny 1

Następnie otwórz ustawienia kolumny 1.

Zdjęcie w tle

Prześlij wybrany obraz tła.

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek

Rozstaw

Następnie zmodyfikuj ustawienia odstępów kolumn.

• Górna wyściółka: 100px
• Dolna wyściółka:
  • Pulpit: 400px
  • Tablet i telefon: 200px
• Lewa wyściółka: 5,5%
• Prawa wyściółka: 5,5%

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H4

Następnie dodaj moduł tekstowy do kolumny 1 z zawartością H4.

Ustawienia tekstu H4

Stylizuj odpowiednio tekst H4:

• Czcionka nagłówka 4: Lato
• Grubość czcionki nagłówka 4: Ciężka
• Styl czcionki nagłówka 4: Wielkie litery
• Rozmiar tekstu nagłówka 4: 13px
• Nagłówek 4 Odstępy między literami: 2px

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość H3

Dodaj kolejny moduł tekstowy poniżej poprzedniego, korzystając z zawartości H3.

Ustawienia tekstu H3

Zmień odpowiednio ustawienia tekstu H3:

• Czcionka nagłówka 3: Montserrat
• Rozmiar tekstu nagłówka 3: 36px
• Nagłówek 3 Odstępy między literami: 1px
• Nagłówek 3 Wysokość linii: 1,2 em

Dodaj moduł tekstowy nr 3 do kolumny 1

Dodaj treść opisu

Dodaj ostatni moduł tekstowy zawierający wybraną treść opisu.

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

• Czcionka tekstu: Lato
• Kolor tekstu: #4c4c4c
• Odstępy między literami tekstu: 0.5px
• Wysokość linii tekstu: 2em

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Nadaj styl przyciskowi na karcie projektu.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 14px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 0px

• Czcionka przycisku: Lato
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery

Ponowne użycie kolumny 1

Usuń kolumnę 2 i 3

Po wypełnieniu kolumny 1 i wszystkich modułów znajdujących się w niej możesz usunąć dwie pozostałe kolumny wiersza.

Klonuj kolumnę 1 dwa razy

I ponownie użyj kolumny 1, klonując ją dwukrotnie.

Zmień zduplikowane obrazy tła kolumny

Upewnij się, że zmieniłeś obraz tła każdej zduplikowanej kolumny.

Zmień zawartość w zduplikowanych kolumnach

Wraz z zawartością modułu.

Dodaj przekształcenie Przetłumacz do ustawień kolumny 2

Następnie otwórz ustawienia kolumny 2 i przejdź do karty projektu. Gdy już tam będziesz, dodaj trochę wartości translacji transformacji na różnych rozmiarach ekranu, aby ukończyć projekt.

• Lewo:
  • Pulpit: 50px
  • Tablet i telefon: 0px

2. Zastosuj technikę ponownego uruchamiania animacji do projektowania

Dodaj klasę CSS do wiersza nr 2

Teraz, gdy nasz projekt jest gotowy, możemy skupić się na technice animacji restartu. W tym celu zamierzamy celować w wiele modułów naraz. Najpierw otwórz ustawienia drugiego wiersza i zastosuj następującą klasę CSS:

• Klasa CSS: trigger-animation-row

Dodaj moduł kodu do wiersza nr 1

Klasa CSS, którą dodaliśmy w poprzednim kroku tego samouczka, pomoże nam jednocześnie kierować wszystkie moduły w tym wierszu. Aby utworzyć animację restartu, używamy kodu JQuery, biblioteki JavaScript GSAP i biblioteki ScrollTrigger dla GSAP. Aby dodać ten kod, wstawimy nowy moduł kodu poniżej drugiego modułu tekstowego w wierszu nr 1.

Dodaj biblioteki GSAP i ScrollTrigger

Pamiętaj, by dodać biblioteki GSAP i ScrollTrigger do nowych tagów skryptu.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Dodaj nowe tagi skryptu

Następnie dodaj nowe tagi skryptu poniżej tagów skryptu biblioteki.

Dodaj funkcję GSAP + ScrollTrigger

Wewnątrz nowych tagów skryptu skopiujemy i wkleimy następujące wiersze kodu JQuery:

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Ten kod będzie jednocześnie kierował wszystkie moduły wierszy i ponownie uruchomi animację, gdy tylko użytkownik ponownie wejdzie do widocznego obszaru. Animacja w tym przypadku jest dość prosta i minimalna. Jednak dzięki GSAP i ScrollTrigger możesz stworzyć dowolny rodzaj animacji, więc zdecydowanie warto się temu przyjrzeć!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak ponownie uruchomić animację, gdy tylko element wejdzie do widoku. Takie podejście pomaga stworzyć spójne środowisko, niezależnie od tego, jak przewijają się Twoi użytkownicy. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.