Dobrze wykonany design witryny może przyciągnąć uwagę odbiorców, może poprawić UX strony, a tym samym zwiększyć wydajność projektu. Jednym z narzędzi do stworzenia atrakcyjnej wizualnie strony jest wdrożenie efektu holograficznej paralaksy 3D, który polega na wykorzystaniu warstw poruszających się z inną prędkością, co tworzy efekt głębi obrazu.
Efekt ten tworzy iluzję wielowymiarowej przestrzeni i może nawet dodawać pewną interaktywność. Za pomocą kursora myszy użytkownik może zmienić widok obiektów poruszających się w wymiarach podążających za kursorem.
W rzeczywistości nie poruszają się one w przestrzeni 3D, lecz jest pewna iluzja, że obiekty obracają się w taki sposób jakby znajdowały się w kilku wymiarach. Jak wspomniano wcześniej, taki efekt występuje z powodu różnej prędkości ruchu obiektu. Warstwa, która będzie się poruszała z mniejszą preędkością, stworzy iluzję, że znajdue się bliżej do obserwatora.
W tym artykułu pokażemy Ci, jak stworzyć efekt holograficznej paralaksy 3D dla sekcji large hero area lub dowolnej innej części witryny, w której chciałbyś użyć tego efektu. Do tego będziemy potrzebowały Elementor Pro Motion Effects.
Aby pokazać Ci jak dodać paralaksę na stronę, zaprojektoujemy poniższy przykład.
Krok 1
Najpierw trzeba otworzyć edytor Elementor i rozpocząć proces od stworzenia kolumn. Interfejs edytora raczej intuicyjny i prosty w użyciu. Naciśnij przycisk plus, aby zobaczyć wybór kolumn.
Wybierz pożądany styl kolumny. Tutaj utworzymy sekcję z dwóch kolumn. Pierwsza jest dla obrazu, a druga - dla nagłówka.
Krok 2
Kolumna po lewej stronie będzie zawierała zdjęcie, więc powinieneś wybrać je z sekcji Elementy - Zdjęcie i upuścić go do pierwszej kolumny.
Możesz wybrać niestandardowe rozmiary i wymiary zdjęcia - nie będzie to miało żadnego znaczenia dla tworzenia efektu paralaksy, ale jest ważne dla projektu.
Krok 3
Teraz musimy przejść do ustawień kolumny i przesunąć kolumnę w prawo. Przycisk Edytuj kolumnę znajduje się w lewym górnym kącie zdjęcia w kolumnie.
Następnie przejdź do Ustawień zaawansowanych, przejdź do Marginesów i przejdź do procentów.
Unikaj używania pikseli, ponieważ są to wartości bezwzględne, a procenty są wartością względną. Następnie rozłącz wartości i ustaw następujące.
W ten sposób przesuniesz zdjęcie nieco w prawo.
Krok 4
Teraz musisz dodać nagłówek do drugiej kolumny. Przejdź do Edytuj nagłówek i dostosuj nagłówek w sekcji stylu. Konkretny styl nagłówka zależy od Twoich preferencji, dlatego możesz wprowadzać tutaj dowolne wartości.
Step 5
Następnie musimy również przesunąć nagłówek w lewo, ponieważ powinniśmy stworzyć efekt nakładania się nagłówka na obraz. W tym celu przejdź do Edytuj kolumnę - Zaawansowane (to samo, co podczas edycji zdjęcia).
W tym miejscu należy również ustawić wartość marginesu, ustawiając ujemną wartość marginesu.
Krok 6
Następnie ponownie przejdź do Ustawienia kolumny - Układ. Znajdź opcję Wyrównanie w pionie i zmień wartość na Środkową.
Krok 7
Następną rzeczą, którą powinieneś zrobić, to przejść do ustawień widżetu (nie kolumny, ale widżetu). Przycisk znajduje się w prawym górnym kącie, jak pokazano na obrazku.
Przejdź do sekcji Efekty ruchu, włącz efekty myszy i pochylenie 3D. Teraz element zareaguje na ruch kursora.
Krok 8
Musimy włączyć ten sam efekt dla zdjęcia. Przejdź do ustawień widżetu zdjęcia, przycisk którego znajduje się w prawym górnym kącie, jak pokazano na obrazku.
Następnie wybierz Ustawienia zaawansowane, przejdź do Efekty ruchu, włącz Efekty myszy i Pochylenie 3D. Przejdź do ustawień 3D Tilt i zmień prędkość tworzenia iluzji przestrzeni między elementami. Zmniejsz prędkość do 3.
Jednak na chwilę obecną nie wygląda na to, aby między tymi dwoma elementami było dużo przestrzeni. Aby efekt był bardziej widoczny, przejdź do ścieżki myszy w tej samej sekcji Efekty ruchu. Tam zobaczysz wartości Kierunek i Prędkość. Domyślne wartości to Przeciwne i Jedno. Zmień kierunek na Direct i dostosuj prędkość, aby wybrać najbardziej odpowiednią.
Spowoduje to utworzenie efektu wymiarowego, jak pokazano na poniższym obrazie.
Krok 9
Teraz musimy utworzyć przycisk. Utwórz nową sekcję i wybierzj widżet nowego przycisku. Przeciągnij i upuść go do nowej sekcji. Dostosuj ustawienia, aby pasowały do stylu pozostałych elementów.
Krok 10
Przed przejściem do Motion Effects musimy przesunąć przycisk w górę. Przejdź do sekcji Pozycjonowanie i ustaw Szerokość na Inline, Pozycja na Absolut, co umożliwi przesunięcie przycisku w wybrane miejsce.
Warto poświęcić trochę czasu na sprawdzenie, jak będzie wszystko wyglądało na urządzeniach mobilnych, ponieważ mogą wystąpić pewne problemy wizualne na różnych urządzeniach.
Tutaj również powinieneś dostosować wartości, aby wybrać właściwe położenie przycisku dla swojego projektu. Wybieramy następujące:
Krok 11
Teraz przystąpimy do dodawania efektów ruchu. Przejdź do Motion Effects. Aby efekty ruchu przycisku wyglądały tak samo jak inne elementy, wybierz Kierunek - Bezpośredni, włącz pochylenie 3D i zwiększ prędkość. W naszym przykładze wybieramy na 5 razy.
Otrzymasz następujący wynik, elementy zareagują na kursor myszy i będą poruszały się, tworząc efekt wielowymiarowy.
* * *
Jako wynik otrzymasz atrakcyjny efekt holograficznej paralaksy 3D. Efekt jest wciągający i zapewni wirtualną interakcję użytkownika ze stroną. Jak chyba zauważyliście, osiągnięcie pożądanego efektu zajęło nam kilka minut, ponieważ dzięki kreatorowi Elementor jest to naprawdę łatwe.
* * *
Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How To Create 3D Parallax Holographic Effect With Elementor Pro Motion Effects