Jeśli szukasz sposobu na tworzenie płynnych animacji z wbudowanymi efektami przewijania Divi, pokochasz ten samouczek. Pokażemy Ci, jak połączyć przyciąganie przewijania z wbudowanymi efektami ruchu Divi, aby utworzyć sekcje o pełnej wysokości, które można przewijać za jednym razem.
Zaczniemy od utworzenia pierwszej sekcji. Dlatego będziemy ponownie wykorzystywać tę sekcję podczas projektowania naszej strony. Aby włączyć przyciąganie przewijania, użyjemy właściwości przyciągania przewijania CSS, które przypiszemy do sekcji, kodu HTML, nagłówka i stopki naszej strony.
Możliwy wynik
Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.
1. Utwórz nową stronę i rozpocznij projektowanie pierwszej sekcji
Dodaj nową stronę i przejdź do Visual Builder
Zacznij od dodania nowej strony. Wprowadź tytuł strony, opublikuj stronę i przejdź do programu Visual Builder.
Ustawienia sekcji
zaklejania
Po wejściu na nową stronę otwórz sekcję, która już tam jest i zmień ustawienia rozmiaru.
- Min. Wysokość: 100vh
Główny element
Do sekcji dodajemy również dwie linie kodu CSS. Te wiersze kodu CSS pomogą nam zamienić sekcję w punkt przyciągania do przyciągania przewijania.
scroll-snap-align: start; scroll-snap-stop: normal;
widoczność
Aby upewnić się, że nic nie znajduje się poza kontenerem sekcji, ukryjemy przepełnienia sekcji.
- Przelew poziomy: ukryty
- Przelew pionowy: ukryty
Dodaj wiersz nr 1
Struktura kolumny
Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj rozmiar w następujący sposób:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
Rozstaw
Usuwamy również domyślne wypełnienie górnej i dolnej sekcji.
- Najlepsze wypełnienie: 0px
- Wyściółka u dołu: 0 pikseli
Pozycja
I odpowiednio zmienimy położenie wiersza:
- Pozycja: absolutna
- Lokalizacja: dolne centrum
Dodaj moduł tekstowy do kolumny
Pozostaw pole zawartości puste
Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy. Upewnij się, że pole zawartości modułu jest puste.
Kolor tła
Następnie zmień kolor tła.
- Kolor tła: # ffee00
Ustawienia tekstu
Usuniemy również wysokość linii tekstu modułu.
- Wysokość linii tekstu: 1 em
Dobór
Następnie przejdziemy do ustawień rozmiaru i zmienimy szerokość.
- Szerokość: 30%
Rozstaw
Zamienimy moduł w kwadrat, dodając również górne wypełnienie.
- Górne wypełnienie: 30%
Dodaj wiersz nr 2
Struktura kolumny
W następnej linii. Użyj następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru na karcie projektu:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Szerokość: 60vw
- Maksymalna szerokość: 100%
rozstaw
Następnie dodaj niestandardowy górny margines na różnych rozmiarach ekranu.
- Górny margines: 20vh (komputer stacjonarny), 5vw (tablet i telefon)
Odstępy w kolumnie 2
Następnie otworzymy ustawienia w kolumnie 2 i dodamy niestandardowe wartości wypełnienia.
- Górna wyściółka: 2vh (tablet i telefon)
- Lewa wyściółka: 2 vw
- Prawa wyściółka: 2 vw
Dodaj moduł obrazu do kolumny 1
Załaduj obrazek
Czas dodać mody, dodać mod obrazu do kolumny 1 i przesłać wybrany obraz.
zaklejania
Następnie wymuszymy pełną szerokość modułu.
- Wymuś pełną szerokość: Tak
Dodaj moduł tekstowy # 1 do kolumny 2
Dodaj zawartość H2
W drugiej kolumnie pierwszym modułem, którego potrzebujemy, jest moduł tekstowy treść H2.
Ustawienia tekstu H2
Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:
- Nagłówek 2 Czcionka: Anton
- Pozycja 2 Rozmiar tekstu: 5vw (komputer stacjonarny), 7vw (tablet), 9vw (telefon)
Dodaj moduł tekstowy # 2 do kolumny 2
Dodaj treść
Dodaj kolejny moduł tekstowy tuż poniżej, tuż pod poprzednim i wstaw plik treść z wybranego przez Ciebie opisu.
Ustawienia tekstu
Zmień ustawienia tekstowe modułu w następujący sposób:
- Czcionka tekstu: Open Sans
- Rozmiar tekstu: 0.8vw (komputer stacjonarny), 2vw (tablet), 2.5vw (telefon)
- Wysokość linii tekstu: 1,8 em
rozstaw
I dodaj niestandardowy górny i dolny margines do ustawień odstępów.
- Górny margines: 2vw
- Dolny margines: 2vw
Dodaj moduł przycisku do kolumny 2
Dodaj kopię
Kolejnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł przycisków. Dodaj wybraną kopię.
Ustawienia przycisków
Odpowiednio stylizuj przycisk:
- Użyj niestandardowych stylów przycisku: Tak
- Rozmiar tekstu przycisku: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Kolor tekstu przycisku: # 333333
- Kolor obramowania przycisku: # 333333
- Promień przycisku: 1px
- Przycisk czcionki: Anton
- Styl czcionki przycisku: wielkie litery
rozstaw
Uzupełnij ustawienia modułu, dodając niestandardową wartość na podstawie rozmiarów ekranu.
- Wysoki margines wewnętrzny: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Niski margines wewnętrzny: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Lewy margines wewnętrzny: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)
- Prawy margines internetowy: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)
2. Dodaj efekty przewijania do różnych elementów
Moduł tekstowy w linii nr 1
Animacja pionowa
Po umieszczeniu wszystkich elementów nadszedł czas na dodanie efektów przewijania. Otwórz moduł tekstowy w pierwszym rzędzie i użyj ruchu pionowego.
- Włącz ruch pionowy: Tak
- Początkowe przesunięcie: 4
- Średnie przesunięcie: 0
- Końcowe przesunięcie: -4
- Wyzwalacz efektu ruchu: środek elementu
Linia 2
Kolumna 1
Animacja pozioma
Następnie otwórz pierwszą kolumnę drugiego rzędu i dodaj ruch poziomy.
- Aktywuj ruch poziomy: Tak
- Rozpocznij przesunięcie: -3
- Średnie przesunięcie: 0 (od 40% do 60%)
- Przesunięcie końcowe: -3
- Efekt ruchu wyzwalania: środek elementu
Zanikaj i znikaj
Do tej samej kolumny stosujemy również efekt pojawiania się i zanikania.
- Aktywuj pojawianie się i zanikanie: Tak
- Początkowe krycie: 0%
- Średnie krycie: 100%
- Koniec krycia: 100%
- Efekt ruchu wyzwalania: środek elementu
Kolumna 2
Ruch poziomy
Następnie otworzymy parametry drugiej kolumny i zastosujemy następujące parametry ruchu poziomego:
- Aktywuj ruch poziomy: Tak
- Rozpocznij przesunięcie: 3
- Średnie przesunięcie: 0 (od 40% do 60%)
- Przesunięcie końcowe: 3
- Efekt ruchu wyzwalania: środek elementu
Zanikaj i znikaj
Z przychodzącym i wychodzącym efektem zanikania.
- Aktywuj pojawianie się i zanikanie: Tak
- Początkowe krycie: 0%
- Średnie krycie: 100%
- Koniec krycia: 100%
- Efekt ruchu wyzwalania: środek elementu
4. Ponownie użyj pierwszej sekcji
Sklonuj sekcję cztery razy
Po ukończeniu pierwszej sekcji i jej efektów przewijania możesz ją sklonować dowolną liczbę razy.
Zmień kolory tła wszystkich innych sekcji
Zmienimy kolor tła wszystkich pozostałych sekcji.
- Kolor tła: # 111111
5. Dodaj kod CSS, aby włączyć przewijanie przechwytywania na stronie HTML
Dodaj moduł kodu do ostatniej sekcji strony
Teraz, aby włączyć przechwytywanie przewijania w kodzie HTML naszej strony, dodamy moduł kodu w dowolnym miejscu ostatniej sekcji naszej strony.
Wstaw kod HTML CSS
Poniższe wiersze kodu CSS pomogą nam zastosować wyrównanie przewijania do kodu HTML naszej strony:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Dodaj początek przyciągania przewijania do nagłówka i stopki
Dopilnujemy, aby nasz nagłówek i stopka były również punktami przechwytywania przewijania (podobnie jak nasze sekcje), dodając również następujące wiersze kodu CSS:
nagłówek, stopka {scroll-snap-align: start;}
Aby zakończyć
W tym artykule pokazaliśmy, jak tworzyć płynne animacje, łącząc przewijanie z wbudowanymi efektami ruchu Divi. To świetny sposób na aktywowanie efektów przewijania jednym przewijaniem.
Przechwytywanie przewijania pomaga odwiedzający aby bez wysiłku przeglądać różne części Twojego Witryna internetowa. Połączyliśmy to z projektem sekcji o pełnej wysokości. Udało Ci się również bezpłatnie pobrać plik JSON! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
