Kompletny przewodnik po korzystaniu z paralaksy z Divi

Próba znalezienia odpowiedniego rozmiaru obrazu dla paralaksy może być trochę frustrująca. Obraz może wyglądać świetnie jako standardowy obraz tła, ale gdy tylko wybierzesz „Użyj efektu paralaksy”, obraz zostanie powiększony i nic nie wygląda dobrze. Aby uniknąć tego pogorszenia w przyszłości, musisz zrozumieć, czym jest paralaksa i co dzieje się z obrazem, gdy jest on ustawiony w trybie paralaksy.

Dzisiaj zamierzam zagłębić się w sposób, w jaki paralaksa działa z Divi. Wyjaśnię dokładnie, co się dzieje, gdy użyjesz dwóch różnych metod paralaksy, jaki rozmiar obrazu jest najlepszy, a nawet wrzucę kilka niestandardowych hacków CSS, aby ustawić obrazy tak, jak chcesz.

Kontynuujmy.

Co to jest paralaksa?

Jeśli chodzi o projektowanie stron internetowych, paralaksa to termin używany do opisania efektu, który daje wrażenie realistycznej odległości i ruchu za pomocą dwuwymiarowej animacji. Osiąga się to poprzez zmianę prędkości przewijania różnych elementów na stronie internetowej, aby stworzyć iluzję odległości podczas oglądania stałego punktu. Technika ta istnieje już od jakiegoś czasu w miejscach innych niż sieć. Pamiętasz Super Mario Brothers? Jeśli kiedykolwiek grałeś w gry wideo w latach 80-tych (Nintendo NES), większość gier wykorzystywała tę technikę, aby sprawiać wrażenie ruchu przy użyciu jedynie obrazów 2D. Przedmioty na pierwszym planie poruszały się szybciej niż drzewa/góry/chmury w tle. Tworząc w ten sposób bardziej realistyczny ruch.

Ten efekt jest podobny do metody True Parallax w Divi. Tyle że ruch jest pionowy, a nie poziomy.

Zrozumienie, jak paralaksa działa z Divi

Dzięki Divi Parallax jest naprawdę łatwy do wdrożenia na dowolnym obrazie tła w dowolnej sekcji, wierszu, kolumnie lub module. Wszystko, co musisz zrobić, to ustawić opcję Efekt paralaksy na „TAK”, a następnie wybrać metodę paralaksy (CSS lub True Parallax).

Metoda CSS

Metoda CSS jest jedną z dwóch metod, które możesz wybrać dla efektu paralaksy. Prawdopodobnie możesz zgadnąć, co się dzieje, po prostu testując tę ​​metodę w swojej witrynie. Jest określany jako metoda CSS, ponieważ używa CSS tylko do tworzenia efektu. Ta metoda wykorzystuje CSS, aby naprawić obraz tła na miejscu, podczas gdy inne elementy na stronie przewijają się normalnie. Sprawia to wrażenie, że treść przesuwa się przed obrazem tła.

Metoda prawdziwej paralaksy

Druga metoda nazywa się True Parallax. Nazywa się to „Prawdą” prawdopodobnie dlatego, że jest przykładem konwencjonalnej idei efektu paralaksy. Ta metoda wykorzystuje CSS i JavaScript, aby stworzyć nieco wolniejszy ruch przewijania niż inne elementy na stronie. Jest to bardziej realistyczna reprezentacja ruchu ze względu na postrzeganie odległości, jaką tworzy między wolno poruszającym się obrazem w tle a szybciej poruszającymi się elementami na pierwszym planie.

Co się dzieje, gdy paralaksa jest włączona w Divi?

Może to być frustrujące, jeśli nie rozumiesz, co dzieje się za kulisami. Dlatego warto dokładnie wiedzieć, co dzieje się z obrazem, gdy paralaksa jest aktywna.

Co się stanie po wybraniu metody CSS?

Po wybraniu paralaksy CSS obraz jest zawijany w nowy element div z pozycją bezwzględną obejmującą cały rozmiar okna przeglądarki. Oto klasy CSS i fragmenty kodu, które robią to w Divi:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

Ponieważ rozmiar tła jest ustawiony na „pokrywa” z wysokością i szerokością 100%, obraz zawsze „zakrywa” każdą część swojego kontenera. W tym przypadku kontenerem jest okno przeglądarki. Oznacza to, że części obrazu zostaną ukryte za innymi sekcjami treści, ponieważ obraz tła zawsze będzie się rozszerzał i kurczył wraz z rozmiarem okna przeglądarki.

Wyobraź sobie, że jest to zwykły obraz tła dodany do modułu nagłówka u góry strony.

Proporcje obrazu są prawidłowe (1920 × 1080), a rozmiar obrazu pokrywa się i ładnie pasuje do sekcji bez nakładania się, gdy jest oglądany na ekranie o rozmiarze 1366 × 766. Biały obszar pod obrazem to pozostała część zawartości strony.

Oto, co się dzieje, gdy wybierzesz paralaksę dla swojego obrazu.

Jak widać, obrazek rozszerza się zarówno w pionie (aby osiągnąć dół okna przeglądarki), jak iw poziomie (aby zachować proporcje obrazu). Czarny kwadrat reprezentuje monitor, więc wszystko w środku czarnego kwadratu jest tym, co widzi widz. Utworzyłem białą sekcję treści na dole półprzezroczystą, aby można było zobaczyć, gdzie znajduje się ukryty za nią obraz tła. Tam obraz pozostaje nieruchomy podczas przewijania, a inne elementy przesuwają się w górę iw dół przed obrazem.

Co się stanie, gdy zostanie wybrana metoda prawdziwej paralaksy?

Jeśli masz ustawioną True Parallax, obraz jest opakowany w nowy div z tą samą klasą CSS:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Jednak dzięki zastosowaniu odrobiny JavaScriptu wysokość i pozycja obrazu jest ustawiana dynamicznie w oparciu o rozmiar okna przeglądarki i podczas przewijania strony. Dwie wartości, które są dynamicznie dodawane do obrazu tła, to wartość px dla właściwości height i wartość tłumaczenia dla właściwości transform. Wartość właściwości height określa wysokość obrazu, podczas gdy wartość translacji właściwości transform określa dokładne położenie obrazu na stronie zgodnie z osiami x i y.

Oto kod, który jest wstawiany do tagu obrazu mojego obrazu tła paralaksy, gdy okno przeglądarki ma rozmiar 1366×766:

    height: 960.8px;
    transform: translate(0px, 220.5px);

Zwróć uwagę na dwie liczby we właściwości transform. Te dwie liczby kontrolują położenie obrazu tła. Pierwsza liczba (0px) ustawia obraz wzdłuż osi x (w poziomie). Ponieważ jest ustawiony na 0px, obraz nie zostanie przeniesiony. Druga liczba ustawia obraz wzdłuż osi y (w pionie). Ponieważ obecnie jest to 220.5px, oznacza to, że obraz jest przesuwany w dół strony 220.5px.

Zauważ też, że wysokość (960.8px) jest większa niż wysokość mojego okna przeglądarki (766px) o około 200px. Ma to na celu dostosowanie obrazu do przesunięcia o 220,5 pikseli poza dolną część okna przeglądarki.

Po wybraniu metody True Parallax mogłeś zauważyć, że twój obraz jest powiększany nawet bardziej niż metoda CSS. Dzieje się tak, ponieważ pozycja obrazu jest rozciągnięta o dodatkowe 30% wysokości przeglądarki.

Pamiętasz naszą zwykłą ilustrację w tle?

Oto, co dzieje się z obrazem po wybraniu True Parallax (oczywiście przed rozpoczęciem przewijania):

Jak widać, obrazek jest przeciągany nieco dalej za dolną część okna przeglądarki. To okno przeglądarki ma wymiary około 1080×700, więc jest dość małe, ale chciałem pokazać, co dzieje się na mniejszym oknie pulpitu.

Dlaczego prawdziwa paralaksa rozciąga obraz do tej pory?

Cóż, moim najlepszym przypuszczeniem jest dostosowanie do większych rozmiarów ekranu. Gdy okno przeglądarki osiągnie rozmiar ekranu 1920 × 1080, obraz tła nie wykracza już poza dolną część okna i dobrze pasuje.

Dlaczego True Parallax używa JavaScript?

Głównym powodem, dla którego True Parallax wymaga JavaScript, jest to, że obraz tła musi poruszać się z inną prędkością niż inne elementy podczas przewijania. Pamiętasz braci Mario?

Dzięki True Parallax, jeśli zwiększę rozmiar mojej przeglądarki, wartość wysokości również dynamicznie wzrasta poprzez JavaScript, dzięki czemu mój obraz jest zawsze wystarczająco duży dla przeglądarki.

Jeśli przewinę stronę w dół, wartość pozycji tłumaczenia (220,5 pikseli w powyższym przykładzie) wzrasta, przesuwając pionową (oś y) pozycję obrazu w dół strony.

Jeśli przewinę w górę, wartość pozycji tłumaczenia zmniejszy się, przeciągając obraz z powrotem na stronę. Ale ponieważ obraz jest przesuwany w dół i podciągany z inną prędkością niż inne elementy podczas przewijania, otrzymujesz efekt prawdziwej paralaksy.

Jakiego obrazu powinienem użyć?

Jeśli chcesz wykorzystać efekt paralaksy na swojej stronie, wybór odpowiedniego obrazu tła ma kluczowe znaczenie. Nie chcesz, aby tło było zbyt zagracone lub rozpraszające. Ale z drugiej strony nie chcesz też, aby była to nudna uwaga na marginesie.

Oto 5 ogólnych wskazówek, jak wybrać odpowiedni rodzaj obrazu dla paralaksy

1. Unikaj rozpraszających zdjęć. Obrazy, z którymi zbyt wiele się dzieje, wprowadzają zamieszanie i odwracają uwagę od treści.
2. Upewnij się, że Twoje zdjęcie pasuje do motywu Twojej witryny. Twoja witryna powinna opowiadać historię. Ten obraz paralaksy (podobnie jak reszta twoich obrazów) powinien pasować do motywu.
3. Niech to będzie duże i proste. Pamiętaj, że twój obraz paralaksy będzie również wyświetlany na mniejszych ekranach. Upewnij się, że szczegóły zdjęcia nie są tak małe, aby nie można ich było rozpoznać na mniejszych urządzeniach.
4. W razie potrzeby dodaj kolor nakładki. Czasami dobry obraz paralaksy będzie miał zarówno ciemne, jak i jasne aspekty, co może spowodować ukrycie tekstu podczas przewijania. Dodanie ciemnej lub jasnej nakładki zagwarantuje, że Twój tekst będzie można przeczytać w dowolnym miejscu na obrazie
   
5. Uczyń to interesujące. Istnieje możliwość zrobienia wielu zdjęć, aby zadowolić się czymś nudnym. Poświęć trochę czasu na znalezienie takiego, które przyciągnie uwagę odbiorców i przyciągnie ich uwagę.

Jakiego rozmiaru obrazu tła paralaksy należy użyć?

Odpowiedź na to jest trochę trudna. Nie ma jednego rozmiaru pasującego do wszystkich obrazów paralaksy. W rzeczywistości nie ma jednego rozmiaru pasującego do wszystkiego w projektowaniu stron internetowych, przynajmniej nie odkąd pojawił się projekt responsywny. Ale chociaż mogę nie być w stanie podać ci jednoznacznej zasady, mogę zaoferować kilka ogólnych wskazówek dotyczących wyboru odpowiedniego rozmiaru obrazów tła paralaksy w Divi.

Ponieważ najpopularniejszy rozmiar ekranu to około 1366 × 766, zdecydowanie upewniłbym się, że wszystkie obrazy paralaksy tła mają co najmniej ten rozmiar. Ale ze względu na popularność większych monitorów wybrałbym większy rozmiar, taki jak 1920×1080. Dzięki temu użytkownicy zobaczą wysokiej jakości obraz na większych komputerach stacjonarnych.

Problem z posiadaniem obrazu o wymiarach 1920×1080 polega na tym, że rzadko będziesz miał widoczną sekcję o wysokości 1080px. Możesz więc umieścić na dole tych obrazów, pozostając w ukryciu.

Pomocne wskazówki, jak uzyskać odpowiedni obraz tła paralaksy

Do nagłówków i górnych sekcji

Najprostszym sposobem na upewnienie się, że obraz jest w pełni widoczny i świetnie wygląda, jest użycie modułu nagłówka o pełnej szerokości. W ten sposób obraz tła zawsze będzie wyglądał świetnie, bez względu na rozmiar ekranu. Ale jeśli używasz obrazu tła paralaksy za pomocą modułu nagłówka o pełnej szerokości, może być konieczne dodanie dopełnienia na górze i na dole modułu, aby pokazać więcej obrazu. Możesz to zrobić za pomocą programu Visual Builder. Przejdź do ustawień modułu nagłówka. Na karcie Zaawansowane wprowadź następujące informacje w polu tekstowym Element główny:

Padding: 250px 0 250px;

To powinno sprawić, że pójdziesz we właściwym kierunku.

Jeśli nadal nie masz wystarczającej ilości wyświetlanego obrazu, sugeruję przycięcie górnej części obrazu, a następnie przesłanie go ponownie. To może pomóc.

Spróbuj także wybrać zdjęcia, które mają nieistotną treść na dole obrazu, a ważniejszą treść na górze. W przypadku nagłówków powinieneś spodziewać się tylko 700 pikseli obrazu paralaksy.

Dla sekcji zwykłych/środkowych

Upewnij się, że wokół treści jest wystarczająco dużo miejsca, aby wystarczająco wyeksponować tło, aby uzyskać pełny obraz, gdy sekcja osiągnie centralny punkt widzenia użytkownika. Wykorzystaj wyściółkę na swoją korzyść. Jeśli zamierzasz używać paralaksy, nie daj się zdezorientować użytkownikom i muszą przewijać w górę iw dół tylko po to, aby zobaczyć, jaki jest obraz. Lepiej pokazać im za pierwszym razem.

Do sekcji dolnych/stopek

Jeśli używasz metody CSS, możesz spodziewać się większej części dolnej części obrazu tła (w zależności od tego, ile masz miejsca). Spróbowałbym przyciąć dół zdjęcia, aby pokazać więcej góry w tych sekcjach.

Jeśli używasz metody True Parallax, zobaczysz głównie górę swoich obrazów, więc traktowałbym je jak nagłówki.

Oto przykład obrazów tła True Parallax w górnej, środkowej i dolnej części strony.

Ten rodzaj obrazu mostu działa dobrze, ponieważ ma ładny punkt skupienia z boku, a dół obrazu nie jest tak znaczący jak góra, więc wiadomość nigdy nie zostanie utracona dla użytkownika.

Oto ta sama strona przy użyciu metody CSS. Naprawdę widać, że obraz tła jest naprawiony i rozwija się do okna przeglądarki. Wygląda nawet na to, że przez cały czas jest to ten sam obraz utrwalony w tle.

Jeśli nadal nie jesteś zadowolony po wyszukaniu idealnego obrazu, dodaniu niezbędnego wypełnienia i przycięciu go, zawsze możesz skorzystać z hakowania.

Parallax Image Hacks: zmiana pozycji obrazu za pomocą niestandardowego CSS

Jeśli chcesz zmienić położenie tła paralaksy, możesz użyć selektora css „.et_parallax_bg”. Oto domyślny css, który pozycjonuje obraz dla efektu paralaksy.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Jeśli zauważysz, domyślnie właściwość położenia tła dla metody paralaksy css jest następująca i jest ustawiona na „górne centrum”. Ale gdybym chciał zmienić oryginalną pozycję obrazu tła, możesz dostosować wartości właściwości background-position.

Jeśli chcesz, aby Twój niestandardowy CSS był skondensowany do określonego obrazu i nie miał wpływu na całe tło paralaksy, musisz dodać klasę do swojej sekcji, abyśmy mogli zidentyfikować w CSS, które tło musimy dostosować.

Przejdź do ustawień sekcji na karcie Zaawansowane i wprowadź klasę CSS o nazwie „parahacks”.
Teraz przejdź do Ustawienia strony i wybierz zakładkę Zaawansowane.

Następnie użyj pola Niestandardowy CSS, aby wprowadzić dowolny z następujących przykładów niestandardowego CSS:

Jeśli używasz metody CSS, możesz wyśrodkować obraz tła w pionie, dodając następujący niestandardowy kod CSS:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

Aby wyrównać obraz tła do dołu, dodaj następujący niestandardowy kod CSS:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

Aby obraz tła przesuwał się w górę o określoną liczbę pikseli, dodaj następujący niestandardowy kod CSS:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

Jeśli używasz metody True Parallax, musisz uwzględnić dodatkowe 220px (mniej więcej w zależności od wysokości przeglądarki) obrazu, który jest ukryty na dole. Aby obraz tła był bardziej wyśrodkowany w pionie, musisz dostosować właściwość background-position za pomocą ujemnej wartości piksela, jak na przykład:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

Aby obraz tła był bardziej wyrównany do dołu, dodaj następujący niestandardowy kod CSS:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL; DR? Oto podsumowanie wideo głównych punktów

Subskrybuj nasz kanał YouTube

W zamknięciu

Mam szczerą nadzieję, że ten przewodnik był pomocny w zrozumieniu, jak paralaksa działa z Divi. Na szczęście Divi wykonuje prawie wszystkie ciężkie prace, zapewniając nam funkcjonalność paralaksy. Zarówno metoda CSS, jak i metoda True Parallax tworzą wspaniałe, realistyczne efekty po wyjęciu z pudełka. Jednak to do nas należy znalezienie odpowiednich obrazów i dostosowanie ich tak, aby działały na naszej stronie. Idź po to! Założę się, że stworzysz coś niesamowitego.

Czekamy na kontakt z Państwem w komentarzach.

Pozdrawiam!