Przejdź do głównej treści

Jak utworzyć animację przewijania na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Strona o Tobie (około) jest jedną z najważniejszych stron w Twojej witrynie. Dzięki temu ludzie mogą cię lepiej poznać i zdecydować, czy są w stanie podjąć kolejny krok. Jeśli szukasz prostego sposobu na umieszczenie opowiadania na tej stronie, pokochasz ten samouczek. Użyjemy efektów przewijania Divi, aby stworzyć płynne przejście narracji na zwoju. Gdy tylko część historii znika, pojawia się kolejna część. Daje odwiedzającym poczucie czytania ciekawej historii.

Możliwy wynik końcowy

Przed zanurzeniem się w samouczku, spójrzmy na wynik na różnych rozmiarach ekranu.

1. Utwórz pierwszą sekcję pełnego ekranu strony

Dodaj nową sekcję

Kolor tła

Zacznij od dodania pierwszej sekcji do swojej strony Informacje. Otwórz ustawienia sekcji i zmień kolor tła na czarny.

  • Kolor tła: # 000000

zaklejania

Następnie przełącz sekcję na pełny ekran, dodając minimalną wysokość w parametrach rozmiaru.

  • Min. Wysokość: 100vh

2. Dodaj animowaną linię

Dodaj nową linię

Struktura kolumny

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

zaklejania

Otwórz parametry linii i pozwól linii zajmować całą szerokość kontenera przekroju, modyfikując parametry wymiarowania.

  • Szerokość: 100%
  • Maksymalna szerokość: 100%

rozstaw

Następnie dodaj lewe i prawe wypełnienie dla różnych rozmiarów ekranu.

  • Lewa wyściółka: 20vw (biurko), 10vw (tablet i telefon)
  • Prawa wyściółka: 20vw (biurko) 10vw (tablet i telefon)

Animacja

Aby zwiększyć efekt narracji, zastosujemy również animację zanikania linii.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • Styl animacji: Zanikanie
  • Czas trwania animacji: 3000ms
  • Krzywa prędkości animacji: łatwość wprowadzania
  • Powtarzanie animacji: raz

Pozycja

Na koniec upewnimy się, że linia jest ustawiona na środku kontenera przekroju poprzez zmianę opcji położenia.

  • Pozycja: absolutna
  • Lokalizacja: centrum

3. Wstaw tytuł z efektami przewijania

Dodaj moduł tekstowy # 1 do kolumny

Dodaj zawartość H1

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy z zawartością H1.

Tytuł 1 Ustawienia tekstu

Przejdź do karty projektu modułu i zmodyfikuj parametry tekstowe H1 w następujący sposób:

  • Czcionka tytułu: Nunito
  • Waga czcionki tytułu: pogrubiona
  • Kolor tekstu nagłówka: #ffffff
  • Rozmiar tekstu nagłówka: 7vw (komputer stacjonarny), 9vw (tablet), 11vw (telefon)

Ruch pionowy

Dodamy również subtelną pionową animację.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • Aktywuj ruch pionowy: Tak
  • Rozpocznij przesunięcie: 0 (przy 50%)
  • Średnie przesunięcie: 10 (przy 100%)
  • Ostateczne przesunięcie: 10

Efekt przewijania przychodzącego i wychodzącego

Z przychodzącym i wychodzącym efektem zanikania.

  • Aktywuj pojawianie się i zanikanie: Tak
  • Początkowe krycie: 100%
  • Średnie krycie: 100% (przy 55%)
  • Koniec krycia: 0% (do 62%)

Skalowanie efektu przewijania w górę i w dół

Na koniec użyjemy również efektu przewijania w górę iw dół.

  • Włącz skalowanie w górę i w dół: Tak
  • Skala początkowa: 100% (do 40%)
  • Średnia skala: 95% (do 74%)
  • Skala końcowa: 90%

4. Sklonuj całą sekcję raz i dołącz tekst opisu z efektami przewijania

Edytuj tytuł i treść

Po ukończeniu pierwszej sekcji możesz ją całkowicie sklonować. Otwórz moduł tekstowy w pojemniku ze zduplikowaną sekcją i użyj kopii H2.

Zmodyfikuj parametry tekstowe modułu H2 Text

Zmień odpowiednio ustawienia tekstu H2:

  • Tytuł 2 Policja: Nunito
  • Tytuł czcionki 2: pogrubiony
  • Pozycja 2 Kolor tekstu: #ffffff
  • Pozycja 2 Rozmiar tekstu: 5vw (komputer stacjonarny), 7vw (tablet), 8vw (telefon)
  • Wysokość linii 2: 1 em (biuro), 1.2 em (tablet i telefon)
historia na zwoju

Dodaj moduł tekstowy # 2 do kolumny

Dodaj treść

Następnie dodaj kolejny moduł tekstowy do kolumny z wybraną zawartością opisu.

historia na zwoju

Ustawienia tekstu

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

  • Czcionka tekstu: Otwórz Sans
  • Kolor tekstu: #ffffff
  • Rozmiar tekstu: 1vw (komputer stacjonarny), 2.5vw (tablet), 3vw (telefon)
  • Wysokość linii tekstu: 3.1 em (biurko), 2.5 em (tablet i telefon)
historia na zwoju

rozstaw

Użyj również górnego marginesu.

  • Górny margines: 8vw
historia na zwoju

Efekt przewijania przychodzącego i wychodzącego

Następnie przejdź do efektów przewijania na karcie zaawansowanej i użyj następujących ustawień pojawiania się i zanikania:

  • Aktywuj pojawianie się i zanikanie: Tak
  • Początkowe krycie: 100%
  • Średnie krycie: 0% (przy 31%)
  • Ostateczne krycie: 0% (do 35%)

Skalowanie efektu przewijania w górę i w dół

Dodaj także efekt skalowania w górę iw dół.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Włącz skalowanie w górę i w dół: Tak
  • Skala początkowa: 100% (do 40%)
  • Średnia skala: 95% (do 74%)
  • Skala końcowa: 90%

Możesz teraz sklonować tę ostatnią sekcję tyle razy. Musisz jednak dostosować treść każdej sekcji do swoich potrzeb.

badanie

Teraz, gdy przeszliśmy przez wszystkie etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym artykule pokazaliśmy, jak opowiedzieć na swojej stronie historię korzystania z wbudowanych efektów przewijania Divi. Stworzony przez nas efekt pozwala na znikanie i znikanie kolejnych kopii, dając odwiedzającym wrażenie czytania historii. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
1 akcji
udział1
ćwierkanie
Enregistrer