Jak dodać efekt przewijania w dół, aby wyświetlić podgląd projektów stron internetowych w Divi

Niezależnie od tego, czy jest to strona portfolio, czy galeria obrazów, projektanci stron internetowych muszą prezentować swoje projekty klientom jako kluczowy element prowadzenia biznesu. I wiele razy te przykłady ich pracy obejmują obrazy całych projektów stron internetowych, które mogą zająć dużo miejsca. Dlatego dodanie efektu przewijania w dół do tych obrazów może wyróżnić Twoje portfolio. Dzięki temu użytkownik może początkowo zobaczyć zwartą część projektu. Ale kiedy użytkownik najedzie kursorem na obraz, obraz przewija się, powoli odsłaniając resztę projektu, tak jakby przewijał stronę internetową. Możesz zobaczyć, jak ten rodzaj efektu jest używany na naszej własnej stronie Divi Layout Packs.

W tym samouczku pokażę, jak używać Divi, aby dodać efekt przewijania w dół do obrazów, który pozwoli użytkownikom przeglądać projekty stron internetowych. To elegancki interaktywny element, który myślę, że pokochasz.

zapowiedź

Oto podgląd efektu przewijania w dół, który zbudujemy razem w tym samouczku.

Pobierz układ efektu przewijania w dół za DARMO

Aby położyć swoje ręce na tych przykładowych projektach efektów przewijania w dół, najpierw musisz je 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 pliki

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.

POBIERANIE

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 teraz do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

W tym samouczku dotyczącym przypadków użycia zbudujemy nasz projekt od podstaw za pomocą Divi. Będziesz także potrzebować obrazów/zrzutów ekranu do wykorzystania w elementach portfolio. Sugerowałbym użycie obrazów o szerokości co najmniej 1080px.

Tworzenie rzędu trzech kolumn

Jeśli jeszcze tego nie zrobiłeś, utwórz nową stronę. Następnie nadaj swojej stronie tytuł i wdróż konstruktor Divi na interfejsie. Następnie utwórz nową sekcję z rzędem trzech kolumn.

Zaktualizuj ustawienia wiersza w następujący sposób:

Szerokość niestandardowa: 100%
Niestandardowe wypełnienie (komputer): 5% po lewej, 5% po prawej
Niestandardowa wyściółka (tablet): 25% po lewej, 25% po prawej
Niestandardowe wypełnienie (telefon): 15% po lewej, 15% po prawej

Następnie musimy dodać następujące niestandardowe fragmenty kodu CSS do każdego z głównych elementów kolumny. W zakładce Zaawansowane dodaj następujący kod CSS:

Kolumna 1 Główny element CSS:

overflow: hidden;
height: 400px;

Kolumna 2 Główny element CSS:

overflow: hidden;
height: 400px;

Kolumna 3 Główny element CSS:

overflow: hidden;
height: 400px;

Zauważ, że wysokość każdej z kolumn to 400px. Będzie to ostatecznie służyć jako wysokość rzutni obrazu, który będzie przewijany po najechaniu myszą. Właściwość „overflow: hidden” sprawi, że część obrazu przeniesiona poza kolumnę (po najechaniu) pozostanie ukryta. Powinno to mieć więcej sensu, gdy dodamy do obrazu efekt najechania transformacją.

Tworzenie obrazu z efektem przewijania w dół

Teraz jesteśmy gotowi do rozpoczęcia tworzenia naszego obrazu z efektem przewijania w dół. Jest to zaskakująco proste, jeśli rozumiesz, jak działa ten efekt. Zasadniczo wszystko, co zamierzamy zrobić, to dodać obraz, a następnie użyć właściwości transform translate, aby przesunąć obraz w górę o 100% po najechaniu myszą. Następnie, aby upewnić się, że obraz zatrzymuje się we właściwej pozycji, musimy dodać górny margines równy wysokości kolumny po najechaniu. Dzięki temu obraz przestanie się przewijać dokładnie w punkcie, w którym widać dół obrazu.

Oto jak to zrobić.

Dodaj moduł obrazu do kolumny 1. Następnie dodaj następujące opcje najechania:

Margines niestandardowy (najechanie): 400px u góry
Przekształć Przesuń oś Y (najechanie): -100%

Upewnij się, że niestandardowy górny margines po najechaniu jest równy wysokości podanej w kolumnie w niestandardowym CSS powyżej.

Wartość na osi Y przekształcenia przekształcenia jest wartością procentową (-100%), a nie pikselami, więc musisz wprowadzić to ręcznie, wpisując wartość w polu wejściowym kontrolki przekształcenia translacji.

Jak działa efekt przewijania w dół

Może pomóc, jeśli wyjaśnię funkcjonalność tej konfiguracji za pomocą kilku wizualnych ilustracji. Załóżmy, że obraz, którego używasz, ma wysokość 700 pikseli. Wysokość kolumny to tylko 400px. Oznacza to, że domyślnie (przed najechaniem) dolny nadmiar tego obrazu będzie ukryty, ponieważ rozciąga się poza kolumnę.

Gdy użytkownik najedzie kursorem na obraz, dzieją się dwie rzeczy.

Po pierwsze, właściwość transform translate przesuwa obraz w górę z wartością osi Y wynoszącą -100%. Innymi słowy, obraz przesuwa się w górę o 100% niezależnie od wysokości obrazu (700px).

Następnie obrazowi nadawany jest górny margines 400px, aby sprowadzić obraz z powrotem do okna widoku kolumny, tak aby był idealnie osadzony na dole.

Dzieje się to jednocześnie z efektem najechania na transformację, dzięki czemu rezultatem jest płynne przewijanie, które kończy się idealnym położeniem.

Oto jak wygląda wynik na przykładzie na żywo.

Dostosowywanie czasu trwania przejścia i krzywej prędkości

Jak widać, czas przejścia jest zbyt krótki, aby wyświetlić podgląd obrazu po najechaniu myszą. Aby go spowolnić, możesz zaktualizować czas trwania przejścia. Możesz również dostosować krzywą prędkości, aby zmienić prędkość w trakcie.

Zaktualizuj następujące elementy:

Czas trwania przejścia: 4000 ms
Krzywa prędkości przejścia: łatwość

Ogólnie rzecz biorąc, będziesz chciał wydłużyć czas trwania przejścia dla obrazów o większej wysokości, aby dać użytkownikowi czas na przetworzenie obrazu po wystąpieniu efektu przewijania po najechaniu kursorem.

Skopiuj i wklej moduł obrazu do pozostałych kolumn

Teraz wszystko, co musisz zrobić, to skopiować moduł obrazu i wkleić go do kolumny 2 i kolumny 3. Następnie zaktualizuj obrazy dla każdego z nich na dowolny nowy obraz. Otóż ​​to!

Dodawanie nagłówka nad każdym obrazem za pomocą modułu tekstowego

Jeśli chcesz dodać nagłówek do każdego ze swoich obrazów, możesz to zrobić za pomocą modułu tekstowego. Jednak będziemy musieli wprowadzić pewne poprawki w module tekstowym i module obrazu, aby działały.

Śmiało i dodaj nowy moduł tekstowy nad obrazem w kolumnie 1. Łatwiej będzie korzystać z trybu widoku krawędziowego, ponieważ kolumna jest ustawiona na wysokość kolumny.

Następnie zaktualizuj treść o nagłówek h2 w następujący sposób:

<h2>Homepage</h2>

Następnie zaktualizuj ustawienia projektu w następujący sposób:

Kolor tła: #ffffff
Orientacja tekstu: środek
Rozmiar tekstu nagłówka 2: 20px
Nagłówek 2 Wysokość linii: 2em
Margines niestandardowy: 0px dół
Niestandardowe wypełnienie: góra 10px
Cień pudełka: patrz zrzut ekranu

Te ustawienia mogą wydawać się arbitralne, ale tak nie jest. Te wartości mogą przewidzieć, jaka będzie wysokość modułu tekstowego, o czym warto wiedzieć na później. Na przykład wiem, że moduł tekstowy będzie miał wysokość 60px. Zróbmy matematykę…

Wysokość wiersza to 2em, czyli 2 razy rozmiar tekstu nagłówka 2 (20px). Oznacza to, że wysokość mojej linii będzie wynosić 40 pikseli.

Niestandardowa górna wyściółka jest ustawiona na 10px. I jest ukryte dolne wypełnienie 10px, które domyślnie istnieje już dla wszystkich nagłówków w Divi. Górna i dolna wyściółka łączą się, aby uzyskać 20px dodatkowej wysokości.

Czyli… 40px (wysokości linii) + 20px (dopełnienia) = 60px

Teraz znamy wysokość modułu tekstowego. Oczywiście zawsze możesz sprawdzić element za pomocą narzędzi deweloperskich, aby się upewnić.

Niestandardowy dolny margines 0px jest potrzebny, aby usunąć domyślny margines, który istnieje pod modułem (dodawany przez szerokość rynny).

Ponieważ po najechaniu kursorem nastąpi pewne nakładanie się obrazu z modułem tekstowym, musimy upewnić się, że moduł tekstowy pozostaje na warstwie nad obrazem. Możemy to zrobić, nadając modułowi tekstowemu pozycję względną i zmieniając wartość indeksu Z w następujący sposób:

Dodaj następujący niestandardowy kod CSS do elementu głównego:

position:relative;

Następnie zaktualizuj indeks z:

Indeks Z: 3

Skopiuj i wklej moduł tekstowy

Teraz, gdy nagłówek tekstowy jest gotowy, możemy go skopiować i wkleić (używając trybu widoku krawędziowego) nad obrazami w kolumnach 2 i 3.

Następnie wszystko, co musisz zrobić, to zaktualizować zawartość dla każdego.

Zaktualizuj wartość górnego marginesu po najechaniu kursorem na każdy obraz, aby uwzględnić wysokość modułu tekstowego

Obecnie każdy z obrazów w kolumnach 1, 2 i 3 ma niestandardowy margines górny 400 pikseli po najechaniu myszą. Zostało to ustawione na równe wysokości niestandardowej wysokości kolumny. Ponieważ jednak moduł tekstowy zajmuje teraz część miejsca w kolumnach (wysokość 60px), musimy dostosować wartość wskaźnika najechania na górny margines.

Aby to zrobić, użyj funkcji wielokrotnego wyboru, aby wybrać wszystkie trzy obrazy. Następnie zaktualizuj ustawienia elementu w następujący sposób:

Margines niestandardowy (najechanie): 340px u góry

Teraz Twoje obrazy zatrzymają się idealnie na dole kolumny na końcu stanu najechania.

Ostateczny wynik

Oto efekt końcowy projektu.

Możesz powielać wiersz i aktualizować obrazy i tekst nagłówka zgodnie z potrzebami, aby wyświetlić więcej portfolio.

Oto jak to wygląda na tablecie i telefonie.

Końcowe przemyślenia

Pokazywanie projektów stron internetowych za pomocą niestandardowego efektu przewijania w dół nie tylko dodaje naprawdę fajną interakcję, ale także oszczędza dużo miejsca. Pozwala to wyświetlać wiele obrazów w zwartym i symetrycznym układzie. Ten rodzaj funkcjonalności jest zwykle czymś, co otrzymalibyśmy dzięki wtyczce. Jednak dzięki Divi masz pełną kontrolę nad projektem i funkcjonalnością bez konieczności dodawania kolejnej wtyczki. Mam nadzieję, że zainspiruje Cię to do stworzenia pięknych galerii portfolio dla kolejnego projektu.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!