Jak połączyć efekty zawisu z tłem paralaksy CSS w Divi
Opublikowany: 2019-08-30Używanie paralaksy CSS z obrazami tła w Divi pozwala nam tworzyć efekty najechania, które są zaskakująco unikalne. Paralaksa to jeden z wielu sposobów na ożywienie naszych stron internetowych. A łącząc paralaksę z szeroką gamą opcji zawisu w Divi, ożywiamy zawartość jeszcze bardziej.
W tym samouczku pokażemy, jak szybko i łatwo zaprojektować unikalne efekty najeżdżania tła CSS paralaksy w Divi. Nie potrzeba żadnych wtyczek ani niestandardowego kodowania!
Zacznijmy.
zapowiedź
Oto krótkie spojrzenie na efekty najazdu paralaksy CSS, które zaprojektujemy w tym samouczku.
Pobierz układ za DARMO
Aby położyć swoje ręce na projektach z tego samouczka, 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 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.
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!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Obrazy, które mają być wykorzystane do pozorowanych treści
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Część 1: Tworzenie efektu unoszenia się paralaksy Breakout w Divi
Najpierw utwórz zwykłą sekcję z jednym rzędem kolumn. 
Przed dodaniem modułu otwórz ustawienia sekcji i dodaj obraz tła za pomocą paralaksy CSS.
Upewnij się, że obraz ma co najmniej 1920 pikseli szerokości. Projekt działa dobrze z ciemniejszym obrazem tła z dużą ilością tekstury. Używam jednego z naszego pakietu układów kawiarni, który jest dostępny w Divi Builder.
Następnie dodaj dopełnienie do sekcji w następujący sposób:
Wyściółka: góra 10vw, dół 10vw
Dodaj moduł Blurb
Gdy tło sekcji i dopełnienie są na swoim miejscu, dodaj moduł notki do wiersza.
Następnie zaktualizuj treść notki kilkoma zdaniami tekstu podstawowego. Możesz tam zachować domyślny tytuł.
Następnie kliknij, aby użyć ikony i wybierz ikonę kawy dla notki.
Po przygotowaniu zawartości zaktualizuj ustawienia projektu w następujący sposób:
Kolor ikony: #ffffff
Rozmiar czcionki ikony: 50px
Wyrównanie tekstu: do środka
Czcionka tytułu: Oswald
Styl czcionki tytułu TT
Kolor tekstu tytułu: #ffffff
Odstępy między literami tytułu: 2px
Czcionka ciała: Nunito
Kolor tekstu ciała: #ffffff
Odstępy między literami: 1px
Padding: 30px góra, 30px dół, 30px po lewej, 30px po prawej
Dostosuj szerokość wiersza
Po zaprojektowaniu notki przejdź do ustawień wiersza i dostosuj maksymalną szerokość.
Maksymalna szerokość: 80%
Ustawienia kolumny
W tym przykładzie aktywujemy efekt najechania na poziomie kolumny. Pozwala to na użycie wielu modułów do tworzenia treści, mimo że na razie używamy tylko jednego modułu notki.
Aby ten efekt najechania paralaksy działał, musimy dodać ten sam obraz tła do kolumny, której użyliśmy w naszej sekcji. Będziemy musieli również użyć tej samej metody paralaksy CSS na obrazie tła kolumny.
Otwórz ustawienia kolumny i dodaj ten sam obraz tła za pomocą paralaksy CSS.
Nie będziesz w stanie zobaczyć żadnej różnicy między obrazem tła kolumny a obrazem tła sekcji, ponieważ oba używają paralaksy CSS, która zasadniczo naprawia obraz w dokładnie tym samym miejscu na stronie internetowej. Jednak zobaczysz różnicę, gdy efekt najechania będzie na miejscu.
Kontynuuj aktualizację ustawień projektu słupa w następujący sposób:
Wyściółka: góra 4vw, dół 4vw
Zaokrąglone rogi: 10px
Następnie nadaj kolumnie cień, który pokazuje się tylko po najechaniu kursorem w następujący sposób:
Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 0px
Siła rozmycia cieni w pudełku: 36px
Kolor cienia (domyślnie): rgba(0,0,0,0)
Kolor cienia (najechanie): rgba(0,0,0,0.72)
Przejdźmy teraz do opcji przekształcania i zaktualizuj następujące style przekształcania po najechaniu myszą:
Skala transformacji (najechanie): 105%
Spowoduje to nieznaczne powiększenie kolumny (i jej zawartości), aby uzyskać efekt lekkiego wyskoczenia z obrazu tła.
Przekształć Przesuń oś Y (najechanie): -2,5%
Powoduje to lekkie przesunięcie kolumny w górę po najechaniu kursorem, aby uzyskać niewielkie asymetryczne przemieszczenie.
Pochodzenie transformacji: 100% 50% (na dole pośrodku)
Rozpoczyna się efekt skalowania od dolnego środka, który w połączeniu z wartością przełożenia przypomina subtelny efekt zawiasu.
Oto dotychczasowy efekt najechania paralaksy CSS.
Teraz otwórz ustawienia wiersza i dwukrotnie zduplikuj kolumnę, aby utworzyć w sumie trzy kolumny, każda z tymi samymi efektami rozmycia i najechania.
Ostateczny wynik
Oto ostateczny projekt. Zwróć uwagę, że obrazy tła paralaksy są domyślnie ukryte podczas przewijania strony. Następnie pojawiają się po najechaniu kursorem na każdą z kolumn, gdy wyskakują. Możesz również zobaczyć, że paralaksa nadal działa w kolumnie podczas przewijania strony w dół podczas najeżdżania na kolumnę. Jest to subtelny, ale niezwykle wyjątkowy efekt unoszenia się.
Dodawanie obrotu do efektu zawisu
Możemy również dodać rotację do efektu najechania paralaksy css, co dodaje miłego akcentu do projektu. Po prostu otwórz każde z ustawień kolumny i zaktualizuj następujące elementy:
Przekształć Obróć oś Z (po najechaniu): 5 stopni
Jeśli chcesz to pomieszać, możesz nadać środkowej kolumnie obrót o -5 stopni.
Oto ostateczny wynik.
A oto ten sam projekt z jaśniejszym obrazem tła i ciemniejszym tekstem.
Część 2: Tworzenie efektu unoszącego się szkła powiększającego paralaksy w Divi
Powiel przekrój z pierwszego projektu, a następnie otwórz ustawienia przekroju i zastąp obraz tła nowym. Używam tego z naszego pakietu układów gier wideo, ponieważ naprawdę podkreśla efekt uniesienia paralaksy powiększenia.
Aktualizuj ustawienia wiersza
Będziemy potrzebować dodatkowego miejsca na ten projekt, więc otwórz ustawienia rzędu i zaktualizuj następujące elementy:
Szerokość rynny: 1
Szerokość: 100%
Maksymalna szerokość: 98%
Następnie przejdź do zakładki treści i usuń dwie kolumny, aby pozostała tylko jedna.
Ustawienia kolumny
W tym projekcie musimy zastosować efekt najechania na poziomie modułu, a nie na poziomie kolumny, więc musimy zresetować domyślne style kolumny. Aby to zrobić, kliknij prawym przyciskiem myszy element kolumny i wybierz „zresetuj style elementu”.
Zaktualizuj moduł Blurb
Po przywróceniu ustawień kolumn do domyślnych stylów otwórz ustawienia modułu notatek i dodaj ten sam obraz tła paralaksy CSS, który został dodany do sekcji.
Rozmiary
Aby stworzyć okrągły moduł, najpierw musimy nadać mu pasującą szerokość i wysokość w następujący sposób:
Szerokość: 300px
Wyrównanie modułu: środek
Wysokość: 300px
Granica
Aby zakończyć efekt kołowy, musimy zaktualizować zaokrąglone rogi i nadać mu delikatną ramkę.
Zaokrąglone rogi: 50%
Szerokość obramowania: 1px
Kolor obramowania: rgba (255,255,255,0.12)
Efekt najazdu na cień pudełka
Następnie po najechaniu kursorem nadaj notce cień w następujący sposób:
Cień pudełka: patrz zrzut ekranu
Siła rozmycia cieni w pudełku: 36px
Kolor cienia (domyślnie): rgba(0,0,0,0)
Kolor cienia (najechanie): rgba(0,0,0,0.7)
Przekształć efekty najechania
Po umieszczeniu cienia pudełka zaktualizuj opcje transformacji w następujący sposób:
Pochodzenie transformacji (domyślnie): 50% 0% (w środku po lewej)
Dzięki temu notatka nie wyjdzie poza stronę po umieszczeniu jej po lewej stronie wiersza z trzema kolumnami.
Skala transformacji (najechanie): 130%
To powiększy rozmycie i naprawdę powiększy obraz tła paralaksy, aby uzyskać fajny efekt najechania.
Powiel kolumnę
Gdy notka jest gotowa, możemy zduplikować kolumnę, aby utworzyć trzy kolumny, każda z tym samym modułem notatek.
Otwórz ustawienia wiersza i dwukrotnie zduplikuj kolumnę, aby uzyskać łącznie trzy kolumny.
Zaktualizuj pochodzenie transformacji
Ponieważ wszystkie nasze moduły notatek mają źródło transformacji ustawione na „w środku po lewej”, musimy dostosować to dla notatek w środkowej i prawej kolumnie, aby skalowały się od odpowiedniej pozycji.
Otwórz ustawienia modułu notki w kolumnie 2 i zaktualizuj następujące elementy:
Pochodzenie transformacji: 50% 50% (w środku)
Następnie otwórz ustawienia modułu notki w kolumnie 3 i zaktualizuj następujące elementy:
Pochodzenie transformacji: 50% 100% (w środku po prawej)
Ostateczny wynik
Teraz sprawdź efekt końcowy. Zwróć uwagę, jak efekt naprawdę powiększa obraz tła paralaksy CSS za rozmyciem. A kiedy przewiniesz w dół, najeżdżając na notkę, wygląda to jak efekt lupy.
W rzeczywistości jest to tak fajne, że możemy chcieć pozostawić go jako styl domyślny, a nie tylko w stanie najechania.
Końcowe przemyślenia
Mam nadzieję, że przykłady w tym poście rozbudziły nieco kreatywności, dzięki czemu możesz odkrywać jeszcze więcej fajnych projektów i efektów najechania, które można połączyć z paralaksą CSS. Proces konfiguracji jest naprawdę prosty, ale możliwości wydają się nieskończone.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!