Wyprzedaż urodzinowa Elementora

Enjoy 60% Off on new purchases, renewal and upgrades.

00 Dni
:
00 godziny
:
00 Minuty
:
00 sekundy

Kup Teraz

Jak dodać animowaną ikonę przewijania w tle sekcji w Divi

Rifat Divi Tutorials Jan 27, 2022

Połączenie animacji przewijania z ikonami może w zaskakujący sposób poprawić wygląd Twojej witryny. W tym artykule przyjrzymy się, jak dodać animowane ikony przewijania do tła sekcji Divi. Dzięki setkom ikon do wyboru i różnym wbudowanym efektom animacji w Divi pokażemy Ci, jak tworzyć nieograniczone animacje w tle, aby przenieść nasze projekty na wyższy poziom.

Niech ta piłka się toczy!

Wyjaśnienie koncepcji

Procedura dodawania animowanych ikon do tła sekcji składa się z czterech istotnych kroków.

Aby rozpocząć, musimy skonstruować płótno pełnoekranowe, modyfikując sekcję, wiersz i kolumnę tak, aby każdy wypełniał całą szerokość i wysokość przeglądarki. Dostarczy nam to rodzaj dostępnego obszaru kreatywnego, który musimy wypełnić symbolami.

Niesamowite oferty

Elementor 6 urodziny z do 60% zniżki

Zacząć teraz

Po drugie, możemy opracować nasz projekt tła ikon animowanych przewijaniem, ostrożnie umieszczając ikony wewnątrz pełnoekranowego płótna (lub kolumny).

Następnie, aby stworzyć nasz projekt tła animowanych ikon z przewijaniem, musisz ostrożnie umieścić ikony wewnątrz pełnoekranowego płótna (lub kolumny).

Wreszcie, gdy projekt tła z animowanymi ikonami przewijania jest gotowy, możemy dodać potrzebny materiał do wyświetlacza na pierwszym planie.

Teraz, gdy mamy pomysł, zacznijmy od projektowania.

Projektowanie animacji przewijania w tle sekcji Divi

Część 1: Tworzenie pełnoekranowego płótna

W tej sekcji będziemy konfigurować sekcję, wiersz i kolumnę. Najpierw dodajmy do naszej sekcji wiersz z jedną kolumną.

Otwórz ustawienia sekcji i zmień kolor tła.

  • Kolor tła: #000

Na karcie projektu zmień następujące elementy.

  • Minimalna wysokość: 100vh (komputer), 600px (tablet i telefon)

Ustawienia wiersza

Następny jest rząd. Otwórz ustawienie wiersza i zaktualizuj poniższe.

  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 100%
  • Maksymalna szerokość: 100%
  • Wzrost: 100%
  • Padding: 0px na górze, 0px na dole

Z zakładki zaliczki zaktualizuj pozycję.

  • Pozycja: bezwzględna

Wysokość kolumny

Teraz, ponieważ nasza sekcja i wiersz są na swoim miejscu, musimy nadać kolumnie minimalną wysokość 100%, tak aby obejmowała całą szerokość i wysokość przekroju/rzutni. Dzięki temu praktycznie wygenerowaliśmy pełnoekranowe płótno, które pozwala nam w tym momencie wypełnić kolumnę ikonami. Dodaj kod w polu „Główny element” ustawień kolumny.

min-height:100;

Część 2: Â Tworzenie i pozycjonowanie ikon

Jesteśmy teraz gotowi do rozpoczęcia budowy i rozmieszczania ikon w kolumnie. Celem jest strategiczne umieszczenie ikony w tej pełnoekranowej kolumnie, aby stworzyć nasz projekt tła animowanej ikony.

Tworzenie i umieszczanie ikony 1

Zaczniemy od stworzenia naszej pierwszej ikony i umieszczenia jej za pomocą Divi Builder. Wstaw moduł ikon do kolumny.

Wybierz ikonę z selektora ikon, otwierając Ustawienia ikon

Zaktualizuj kolor i rozmiar ikony w zakładce projektu w następujący sposób:

  • Kolor ikony: #ffffff
  • Rozmiar ikony: 3vw (komputer), 40px (tablet), 30px (telefon)Â

Zaktualizuj pozycję i przesunięcia na karcie Zaawansowane w następujący sposób:

  • Pozycja: bezwzględna
  • Lokalizacja: dolny lewy
  • Przesunięcie w pionie: 10%
  • Przesunięcie w poziomie: 10%

Pamiętaj, że w tym przypadku procentowa jednostka długości jest powiązana z dolnymi i lewymi właściwościami CSS. W tym scenariuszu przesunięcie w pionie o 10% jest identyczne z „bottom: 10%” w CSS, a przesunięcie w poziomie o 10% jest porównywalne z „lewo: 10%”. Ponieważ nasza kolumna jest pełnoekranowa, ikony pozostaną responsywne, gdy zmieni się wysokość i szerokość przeglądarki. Innymi słowy, utrzymają swoje miejsce w różnych rozmiarach ekranu.

Tworzenie i umieszczanie ikony 2

Powiel bieżącą ikonę, aby utworzyć drugą. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie pionowe: 30%
  • Przesunięcie w poziomie: 40%

Tworzenie i umieszczanie ikony 3

Powiel poprzednią ikonę, aby utworzyć trzecią. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie w pionie: 20%
  • Przesunięcie w poziomie: 30%

Tworzenie i umieszczanie ikony 4

Powiel poprzednią ikonę, aby utworzyć czwartą. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie w pionie: 70%
  • Przesunięcie w poziomie: 40%

Tworzenie i umieszczanie ikony 5

Powiel poprzednią ikonę, aby utworzyć piątą. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie pionowe: 60%
  • Przesunięcie w poziomie: 50%

Tworzenie i umieszczanie ikony 6

Powiel poprzednią ikonę, aby uzyskać szóstą. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie w pionie: 65%
  • Przesunięcie w poziomie: 60%

Tworzenie i umieszczanie ikony 7

Powiel poprzednią ikonę, aby utworzyć siódmą. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie pionowe: 28%
  • Przesunięcie w poziomie: 70%

Tworzenie i umieszczanie ikony 8

Powiel poprzednią ikonę, aby uzyskać ósmą. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie w pionie: 50%
  • Przesunięcie w poziomie: 80%

Tworzenie i umieszczanie ikony 9

Powiel ostatnią ikonę, aby zrobić dziewiątą. Następnie przejdź do właściwości zduplikowanej ikony i zmień ustawienia pozycji w następujący sposób:

  • Przesunięcie w pionie: 15%
  • Przesunięcie w poziomie: 90%

Część 3: Tworzenie animacji przewijania

W tym przykładzie zastosujemy podobne ruchy przewijania do wszystkich dziewięciu ikon. Możesz nadać każdemu z nich inną animację przewijania, jeśli chcesz. Aby zastosować animacje przewijania do wszystkich ikon jednocześnie, użyj wielokrotnego wyboru (przytrzymaj ctrl lub cmd podczas wybierania modułów ikon), aby wybrać wszystkie ikony w kolumnie jednocześnie. Następnie otwórz ustawienia jednego z wybranych modułów.

W rezultacie pojawi się modalne ustawienia elementu. Następnie przełącz przełącznik grupy opcji Efekty przewijania na karcie Zaawansowane. Można tam znaleźć Efekty Przemiany Zwoju. Dodamy wszystkie sześć dostępnych efektów (Ruch pionowy, Ruch poziomy, Zanikanie i zmniejszanie, Skalowanie w górę iw dół, Obracanie i Rozmycie).

Dodawanie efektów transformacji przewijania: Vartical

Otwórz kartę ruchu w pionie, zaktualizuj następujące elementy:

  • Włącz ruch w pionie: TAK
  • Przesunięcie początkowe: 2 (przy 0%)
  • Przesunięcie końcowe: -2 (przy 100%)

W przypadku tabletu zaktualizuj przesunięcia w następujący sposób:

  • Przesunięcie początkowe: 1 (przy 0%)
  • Przesunięcie końcowe: -1 (przy 100%)

W przypadku wyświetlacza telefonu zaktualizuj przesunięcia w następujący sposób:

  • Przesunięcie początkowe: 0,5 (przy 0%)
  • Przesunięcie końcowe: -0,5 (przy 100%)

Dodawanie efektów transformacji przewijania: poziomo

Następnie otwórz kartę Ruch poziomy i zaktualizuj następujące elementy:

  • Włącz ruch poziomy: TAK
  • Przesunięcie początkowe: -1 (przy 0%)
  • Przesunięcie końcowe: 1 (przy 100%)

W przypadku tabletu zaktualizuj przesunięcia w następujący sposób:

  • Przesunięcie początkowe: 0 (przy 0%)
  • Przesunięcie końcowe: 0 (przy 100%)

Dodawanie efektów transformacji przewijania: pojawianie się i zanikanie

Otwórz zakładkę Fading In and Out i zaktualizuj następujące elementy:

  • Włącz pojawianie się i zanikanie: TAK
  • Średnie krycie: 50% (przy 50%)

Dodawanie efektów transformacji przewijania: skalowanie w górę i w dół

Następnie otwórz kartę Skalowanie w górę i w dół i zaktualizuj następujące elementy:

  • Włącz skalowanie w górę i w dół: TAK
  • Skala początkowa: 0% (przy 0%)
  • Skala środkowa: 50% (przy 50%)

Dodawanie efektów transformacji przewijania: Obracanie

Następnie wybierz kartę Obracanie i zaktualizuj następujące elementy:

  • Włącz obracanie: TAK
  • Rotacja początkowa: 0% (przy 0%)
  • Średnia rotacja: 90% (przy 50%)
  • Końcowa rotacja: 180% (przy 100%)

Dodawanie efektów transformacji przewijania: Blur

Na koniec otwórz kartę Rozmycie i włącz efekt rozmycia:

  • Włącz rozmycie: TAK

Część 4: Dodawanie treści do frontu sekcji

Mając na tle nasze animowane symbole przewijania, możemy dodać materiał, który chcemy pokazać na pierwszym planie. Celem jest utrzymanie rzędu (z kolumną i ikonami) za każdym dodatkowym rzędem materiału, który chcemy pokazać przed tym tłem.

W tym przykładzie zbudujemy jednokolumnowy wiersz z podstawowym nagłówkiem. Najpierw wstaw nowy jednokolumnowy rząd dokładnie pod starym.

Ponieważ obecny wiersz ma lokalizację bezwzględną, dodanie kolejnego spowoduje umieszczenie go na górze sekcji, zgodnie z zamierzeniami. Wstaw moduł tekstowy do nowego wiersza.

W treści tekstu wprowadź następujący kod HTML.

Andlt;h1Andgt;DiviAndlt;/h1Andgt;

Z zakładki projektowej modułu tekstowego zmień ustawienia:

  • Czcionka nagłówka: Poppins
  • Wyrównanie tekstu nagłówka: do środka
  • Rozmiar tekstu nagłówka: 8vw (komputer), 40px (tablet i telefon)

Pozycja rzędu

Aby upewnić się, że wiersz (i nagłówek) są wyśrodkowane w sekcji, przejdź do ustawień wiersza i zmień położenie w następujący sposób:

  • Pozycja: bezwzględna
  • Lokalizacja: Centrum

Retusz projektu

Przejdź do ustawień sekcji i wstaw obraz tła, aby zakończyć projekt. W tym przykładzie używamy obrazu z naszego pakietu układów sztucznej inteligencji w tym przykładzie.

Upewnij się, że przepełnienie jest ukryte, dostosowując opcje widoczności w zakładce Zaawansowane:

  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: ukryte

Zapobiega to pojawianiu się pionowego paska przewijania, gdy ikona jest animowana poza sekcją.

Ostateczny projekt

Oto jak wygląda nasz ostateczny projekt.

Oto kolejny projekt, który może Ci się spodobać.

Ostatnie słowo

Czasami fajnie jest być kreatywnym i pokazać, jak intensywny i przyjemny może być Divi jako wizualny kreator stron. Wierzymy, że ta lekcja pokazała, jak skuteczne może być Divi w ożywianiu części tła witryny. Ponadto możliwość zastosowania efektów transformacji przewijania do setek różnych ikon pozwala na tworzenie szerokiej gamy kreatywnych projektów i animacji. Mamy nadzieję, że zainspirowało cię to do wykorzystania symboli animowanych przewijaniem w jeszcze bardziej innowacyjny sposób.