Jak automatycznie przewijać w poziomie podczas przewijania w pionie za pomocą Divi i GSAP

Im więcej przeglądasz witryny w sieci, tym częściej napotykasz naprawdę spersonalizowane doświadczenia na stronie. Być może zastanawiałeś się, jak osiągnąć pewną zaawansowaną funkcjonalność, a odpowiedź często brzmi: za pomocą biblioteki JavaScript do animacji. Popularną biblioteką animacji jest obecnie GSAP. Ale tylko dlatego, że chcesz użyć biblioteki JavaScript do czegoś, nie oznacza to, że musisz ręcznie przechodzić również przez część HTML i CSS. Divi może przejąć większą część procesu projektowania stron internetowych; budowanie i projektowanie, co daje więcej czasu na skupienie się na niestandardowej funkcjonalności i animacji. Na przykład w dzisiejszym samouczku pokażemy, jak przewijać w poziomie, podczas przewijania w pionie za pomocą Divi i GSAP. Daje to zaawansowany efekt animacji, który możesz dowolnie dostosowywać. 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ć ręce na darmowym układzie, najpierw musisz je 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!

Przegląd podejścia

Czego używamy

• Divi
• Biblioteka JavaScript GSAP
• Wtyczka ScrollTrigger dla GSAP
• Wersja demonstracyjna ScrollTrigger

Co tworzymy

• Fałszywe przewijanie w poziomie podczas przewijania w pionie
• Efekt pinezki
• Sprawienie, by efekt działał na kilku wybranych przez nas sekcjach (niekoniecznie na całej stronie)
• Bezproblemowe korzystanie z poziomego ekranu we wszystkich rozmiarach ekranu

1. Dodaj sekcje zastępcze

Dodaj sekcję #1

Zacznij od dodania pierwszej sekcji do strony, nad którą pracujesz. Ta sekcja będzie służyć jako symbol zastępczy, dzięki czemu będziemy mogli obserwować, jak efekt się układa.

Rozmiary

Otwórz ustawienia przekroju i przypisz wysokość do ustawień rozmiaru.

• Wysokość: 60vh

Klonuj sekcję #1

Następnie sklonuj raz sekcję zastępczą. Pomoże nam to wygenerować trochę miejsca na górze i na dole naszej strony, nie będąc częścią przewijania w poziomie (patrz podgląd).

1. Projekt sekcji budowy

Dodaj nową sekcję między sekcjami

Teraz, gdy mamy już dwie sekcje zastępcze, nadszedł czas, aby utworzyć pierwszą sekcję, której użyjemy wewnątrz naszego przewijania w poziomie. Dodaj tę sekcję bezpośrednio między dwiema sekcjami zastępczymi.

Rozmiary

Otwórz ustawienia przekroju i przypisz maksymalną wysokość w ustawieniach rozmiaru.

• Maksymalna wysokość: 100vh

Przepełnienia

Ustawiamy też przepełnienie pionowe na auto. To, w połączeniu z maksymalną wysokością z poprzedniego kroku, pomoże nam automatycznie wygenerować pasek przewijania na niektórych rozmiarach ekranu, w których elementy sekcji przekraczają wysokość widocznego obszaru.

• Przepełnienie pionowe: Auto

Dodaj nowy wiersz

Struktura kolumny

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

Zdjęcie w tle

Bez dodawania modułów otwórz ustawienia wiersza i użyj obrazu tła.

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

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru wiersza.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość:
  • Komputer stacjonarny: 70%
  • Tablet i telefon: 80%

Rozstaw

Wraz z ustawieniami odstępów.

• Górna wyściółka:
  • Komputer stacjonarny: 30vh
  • Tablet i telefon: 20vh
• Dolna wyściółka: 0px

Ustawienia kolumny

Następnie otwórz ustawienia kolumny.

Kolor tła

Użyj białego koloru tła dla kolumny.

• Kolor tła: #ffffff

Rozstaw

Przejdź do karty projektu kolumny i zastosuj niestandardowe wartości dopełnienia.

• Górna wyściółka: 5%
• Dolna wyściółka: 5%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Granica

Użyj też obramowania.

• Szerokość obramowania: 1px
• Kolor obramowania: #000000

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H4

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego zawierającego trochę treści H4.

Ustawienia tekstu H4

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H4 w następujący sposób:

• Czcionka nagłówka 4: Kod źródłowy Pro
• Kolor tekstu nagłówka 4: #000000
• Rozmiar tekstu nagłówka 4:
  • Komputer stacjonarny: 1.2vw
  • Tablet: 2,5vw
  • Telefon: 3.5vw
• Nagłówek 4 Odstępy między literami: 1px

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj zawartość H3

Dodaj kolejny moduł tekstowy tuż pod poprzednim i użyj zawartości H3 w polu zawartości.

Ustawienia tekstu H3

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

• Czcionka nagłówka 3: Alata
• Rozmiar tekstu nagłówka 3:
  • Komputer stacjonarny: 2,5vw
  • Tablet: 4vw
  • Telefon: 7vw

Dodaj moduł tekstowy nr 3 do kolumny

Dodaj zawartość

Dodaj ostatni moduł tekstowy do kolumny z wybraną zawartością opisu.

Ustawienia tekstu

Zmień odpowiednio ustawienia tekstowe modułu:

• Czcionka tekstu: kod źródłowy Pro
• Rozmiar czcionki:
  • Komputer stacjonarny: 0,8vw
  • Tablet: 2vw
  • Telefon: 3vw
• Wysokość linii tekstu: 1,5 em

Rozmiary

Następnie zmień ustawienia rozmiaru.

• Szerokość:
  • Komputer stacjonarny: 67%
  • Tablet i telefon: 100%

Rozstaw

I uzupełnij ustawienia modułu, stosując kilka responsywnych wartości dopełnienia do ustawień odstępów.

• Górna wyściółka:
  • Komputer stacjonarny: 3vh
  • Tablet i telefon: 5vh
• Dolna wyściółka:
  • Komputer stacjonarny: 3vh
  • Tablet i telefon: 5vh

Dodaj moduł przycisku do kolumny

Dodaj kopię

Ostatnim modułem potrzebnym do ukończenia projektu wiersza jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia przycisków:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku:
  • Komputer stacjonarny: 0,8vw
  • Tablet: 2vw
  • Telefon: 3vw
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: kod źródłowy Pro
• Styl czcionki przycisku: wielkie litery

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 15px
• Dolna wyściółka: 15px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Pozycja

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

• Pozycja: bezwzględna
• Lokalizacja: dolny lewy róg
• Przesunięcie w pionie: -5%
• Przesunięcie w poziomie: 5%

2. Sekcja ponownego wykorzystania

Klonuj sekcję dwukrotnie

Po ukończeniu pierwszej sekcji możesz ją sklonować dwukrotnie.

Zmień obraz i kopiuj i łącz

Upewnij się, że zmieniłeś obraz, kopię i link w każdej zduplikowanej sekcji.

2. Dodaj funkcjonalność

Dodaj klasę CSS do każdej sekcji, którą chcesz uwzględnić w przewijaniu poziomym

Teraz, gdy mamy już wszystkie elementy, możemy zacząć skupiać się na funkcjonalności tego wszystkiego. Pierwszym krokiem do osiągnięcia wyniku jest przypisanie niestandardowej klasy CSS do każdej sekcji, która ma być częścią przewijania w poziomie. W tym przypadku oznacza to trzy sekcje między sekcjami symboli zastępczych.

• Klasa CSS: przekrój poziomy

Dodaj nowy moduł kodu gdzieś wewnątrz strony

Następnie dodaj moduł kodu do strony. To może być gdziekolwiek chcesz.

Dodaj najpierw biblioteki GSAP i ScrollTrigger

Skopiuj i wklej biblioteki GSAP i ScrollTrigger w module kodu. Użyj do tego tagów skryptu z następującymi źródłami:

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

Dodaj nowe tagi skryptu dla niestandardowego kodu

Tuż pod tagami skryptu biblioteki dodamy kilka nowych tagów skryptu.

Dodaj kod JS

Przygotuj się do użycia JQuery

Wewnątrz tych tagów skryptu zaczniemy od załadowania JQuery.

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

Zarejestruj wtyczkę ScrollTrigger

Następnie zarejestrujemy wtyczkę ScrollTrigger.

gsap.registerPlugin(ScrollTrigger);

Zawiń wszystkie istotne sekcje w nowy element Div

Umieszczamy również każdą z odpowiednich sekcji wewnątrz nowego elementu div, używając następujących linii kodu:

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

Utwórz nową animację GSAP za pomocą ScrollTrigger

Aby fałszywe przewijanie w poziomie działało, użyjemy nowej animacji z wyzwalaczem przewijania. Kod, który to umożliwia, jest następujący:

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

Dodaj znaczniki stylu dla niestandardowego kodu CSS

Następnie dodamy kilka tagów stylu do naszego modułu kodu.

Wstaw kod CSS między tagami stylu

Dokończymy samouczek i funkcjonalność, dodając następujące wiersze kodu CSS między tagami stylu:

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

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 zrobić dodatkową milę dla swojej witryny dzięki Divi i GSAP. Mówiąc dokładniej, pokazaliśmy, jak przewijać w poziomie, gdy faktycznie przewijasz stronę w pionie. Jest to niestandardowy typ animacji, na który możesz natknąć się w pewnym momencie i zastanawiałeś się, jak możesz to zrobić za pomocą DIvi. 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.