Galerie zdjęć to ulubione miejsce w większości witryn internetowych. W wielu przypadkach najlepiej jest, aby te galerie zdjęć były wesołe i statyczne, pozwalając, aby obrazy działały magicznie.
Dodaj jednak efekt przesuwanej łamigłówki galeria zdjęć (jak zrobimy w tym samouczku), może dać odświeżający akcent ponadczasowemu klasykowi.
W tym samouczku pokażemy, jak zbudować prosty układ, który odsłania galerię obrazów z efektem przewijania przesuwanej układanki w Divi.
Kluczem jest zrozumienie, w jaki sposób rozmiar obrazów odnosi się do wartości przesunięcia w pionie i poziomie każdego efektu przewijania, aby przesunąć obraz dokładnie o jeden punkt. Ale po zakończeniu uzyskany efekt ruchu jest wyraźny i precyzyjny, ponieważ stopniowo składa się i odsłania galerię obrazów w wyjątkowy sposób.
Możliwy wynik
Oto przegląd układu galerii obrazów z efektem przewijania przesuwanej układanki, który zamierzamy stworzyć w tym samouczku.
Tworzenie sekcji nagłówka
Aby rozpocząć, stwórzmy krótką sekcję nagłówka, która powie użytkownikowi, aby przewinął stronę, aby wyświetlić galerię i niesamowite efekty przewijania.
Dodaj wiersz
Dodaj wiersz jednej kolumny do sekcji domyślnej.
Dodaj moduł tekstowy
Wewnątrz kolumny / wiersza dodaj nowy moduł tekstowy.
W ustawieniach tekstu zaktualizuj treść w następujący sposób:
<h1>Image Gallery</h1>
Ustawienia modułu tekstowego
Na karcie Projekt zaktualizuj projekt tekstu w następujący sposób:
- Czcionka tytułu: Roboto
- Waga czcionki tytułu: pogrubiona
- Styl czcionki tytułu: TT
- Wyrównanie tekstu nagłówka: do środka
- Rozmiar tekstu nagłówka: 50px (komputer), 40px (tablet i telefon)
- Odstępy między literami tytułu: 4px
Dodaj ikonę modułu Blurb
Po umieszczeniu tekstu dodaj nowy moduł tekstowy prezentacji pod modułem tekstowym.
Następnie usuń cały tytuł i treść z domyślnej zawartości i wybierz ikonę strzałki w dół.
Ustawienia tekstu prezentacji
Następnie zaktualizuj ustawienia tekstu prezentacji o nowy kolor i powtarzającą się animację slajdów.
- Kolor ikony: # ffb500
- Styl animacji: slajd
- Kierunek animacji: w dół
- Intensywność animacji: 20%
- Powtarzanie animacji: pętla
Wypełnienie sekcji
Aby zwolnić miejsce na przewijanie, zaktualizuj wypełnienie w następujący sposób:
- Wypełnienie: 20vh powyżej, 50vh poniżej
Tutaj używamy jednostki długości vh, która jest zależna od wysokości okna przeglądarki, tak aby odstępy dostosowywały się konsekwentnie we wszystkich rozmiarach przeglądarki.
Stworzenie galerii zdjęć z efektami przewijania
Teraz, gdy nasza sekcja nagłówka jest kompletna, jesteśmy gotowi do zbudowania rzeczywistej galerii obrazów z efektami przewijania przesuwanej układanki. Cała galeria będzie składać się z trzech rzędów po 4 obrazy / kolumny w każdym wierszu, co daje w sumie 12 obrazów. Po zakończeniu możesz jednak łatwo dodać więcej linii i obrazów do układu.
Tworzenie przekroju i linii
Dodaj nową sekcję
Zacznijmy od dodania nowej zwykłej sekcji pod sekcją tytułową.
Dodaj wiersz
Następnie dodaj wiersz z czterema kolumnami do sekcji.
Ustawienia linii
W ustawieniach linii zaktualizuj następujące elementy:
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 1200 pikseli (komputer stacjonarny), 600 pikseli (tablet), 300 pikseli (telefon)
Jak szerokość linii decyduje o rozmiarze obrazu
Szerokość rzędu jest bardzo ważna dla tego projektu, ponieważ decyduje o szerokości każdej z czterech kolumn. Gdy ustawimy szerokość rynny na 1, między obrazami nie będzie już marginesu.
A kiedy ustawimy maksymalną szerokość na 1200px, układ czterech kolumn sprawi, że każda z kolumn / obrazów będzie miała dokładnie 300px szerokości (1200px / 4 = 300px).
Ponadto, ponieważ każdy z obrazów jest kwadratowy, wiemy, że wysokość każdego obrazu będzie również wynosić 300 pikseli. Nie musimy tego utrzymywać, jeśli nie chcemy.
Na przykład moglibyśmy również wybrać układ trzech kolumn z obrazami o wymiarach 400 x 400 pikseli. Znajomość szerokości (300px) i wysokości (także 300px) obrazu będzie kluczem do późniejszego stworzenia efektu przewijania.
Dodawanie zdjęć
Dodaj zdjęcie 1
Zdjęcie 1 Efekty przewijania
Związek między rozmiarem obrazu a przesunięciami efektu przewijania
Korzystając z efektu przewijania w pionie i poziomie, ważne jest, aby zrozumieć, co przedstawia wprowadzona wartość liczbowa. W tym przykładzie mamy przesunięcie początku ruchu pionowego równe -3. To -3 to w rzeczywistości -300px (lub 300px w dół), czyli szerokość obrazu.
Przesunięcie osiąga wtedy 0 (położenie początkowe), gdy użytkownik przewija. To właśnie tworzy efekt przewijania, który przesuwa obraz do dokładnie jednego bloku / ramki. Ruch poziomy zaczyna się od 3 (300 pikseli od prawej) i zatrzymuje się w domyślnej pozycji. Te dwa efekty łączą się, tworząc unikalny dwuczęściowy efekt przewijania.
Dodaj zdjęcie 2
Po dodaniu efektów przewijania do obrazu 1. Dodaj nowy obraz do kolumny 2.
Ten statyczny obraz pozostawiamy bez efektu przewijania.
Dodaj zdjęcie 3
Następnie dodaj kolejny moduł obrazu do kolumny 3 i zaktualizuj moduł nowym obrazem.
Zdjęcie 3 Efekty przewijania
W obszarze Ustawienia obrazu zaktualizuj następujące efekty przewijania:
Na karcie Ruch poziomy ...
- Aktywuj ruch poziomy: TAK
- Rozpocznij przesunięcie: -3 (przy 0% okna)
- Średnie przesunięcie: 0 (przy 15% widocznego obszaru)
- Odsunięcie końcowe: 0 (przy 100% rzutni)
Dodaj zdjęcie 4
Aby utworzyć ostatni obraz, skopiuj obraz 1 i wklej go w kolumnie 4.
Prześlij nowy obraz w ustawieniach obrazu.
Zdjęcie 4 Efekty przewijania
Następnie zaktualizuj następujące efekty przewijania:
Na karcie Ruch w pionie ...
- Aktywuj ruch pionowy: TAK
- Rozpocznij przesunięcie: 3 (przy 0% okna)
- Średnie przesunięcie: 0 (przy 15% -28% widocznego obszaru)
- Odsunięcie końcowe: 0 (przy 40% rzutni)
Na karcie Ruch poziomy ...
- Aktywuj ruch poziomy: TAK
- Rozpocznij przesunięcie: 3 (przy 0% okna)
- Średnie przesunięcie: 3 (przy 28% widocznego obszaru)
- Odsunięcie końcowe: 0 (przy 40% rzutni)
Duplikat linii
Teraz, gdy efekty przewijania obrazu są gotowe dla pierwszego wiersza, wszystko, co musimy zrobić, to powielić wiersz, aby utworzyć więcej obrazów i odpowiadające im efekty przewijania. W tym przykładzie zduplikujmy wiersz dwukrotnie, aby utworzyć w sumie trzy wiersze.
W razie potrzeby zamień i przestaw obrazy
Następnie możemy przenosić obrazy za pomocą funkcji przeciągnij i upuść w dowolne miejsce. Tutaj możesz wykazać się kreatywnością i zobaczyć, jak będą się przewijać ruchome obrazy. A gdy obrazy są już na miejscu, możesz zastąpić zawartość modułu obrazów nowymi obrazami, które spełniają potrzeby Witryna internetowa.
Ostateczne poprawki
Widoczność przekroju
Ponieważ nasze obrazy prawdopodobnie będą wychodzić poza sekcję / okno, ukryjmy to przepełnienie, aby trochę je wyczyścić. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Przelew poziomy: ukryty
- Przelew pionowy: ukryty
Wypełnienie sekcji
Chcemy, aby efekt przewijania w pionie górnego obrazu (który rozciąga się nad sekcją) był widoczny pomimo ukrytego przepełnienia. Dodajmy więc górne i dolne wypełnienie równe wysokości obrazu (300 pikseli).
Dotychczasowy wynik
W tej chwili możemy zatrzymać się tutaj, jeśli chcesz zachować projekt galerii bez odstępów między obrazami. Oto, jak dotychczas wyglądał wynik. Zwróć uwagę, jak obrazy przesuwają się w pionie i poziomie dokładnie o jeden blok / klatkę.
Dodanie przestrzeni między obrazami
Ponieważ ustawiliśmy szerokość rynny na 1, nie mamy już marginesu między naszymi kolumnami lub obrazami. Aby odtworzyć podobne odstępy, możemy dodać wypełnienie do każdej klatki.
Pozwoli nam to stworzyć potrzebne nam odstępy bez uszczerbku dla funkcjonalności efektów przewijania. Jest to możliwe, ponieważ dodanie wypełnienia obrazu nie zwiększy szerokości ani wysokości kontenera obrazu. Możesz również uzyskać podobny efekt, używając również ramek.
Zdjęcie 1 Wypełnienie
Otwórz ustawienia obrazu 1 i zaktualizuj następujące elementy:
- Wypełnienie: 10 pikseli u góry, 10 pikseli u dołu, 10 pikseli po lewej, 10 pikseli po prawej
Rozszerz wypełnienie na wszystkie obrazy
Przed zapisaniem kliknij prawym przyciskiem myszy opcję wypełnienia i wybierz „Rozszerz wypełnienie”. W wyskakującym oknie Rozwiń style kliknij przycisk Rozszerz, aby rozszerzyć to wypełnienie na wszystkie obrazy na stronie.
Ostateczny wynik
Oto wynik wszystkich dotychczasowych prac.
końcowe przemyślenia
Efekt przewijania przesuwanej układanki przedstawiony w tym artykule daje nam coś więcej niż tylko unikalny projekt galerii obrazów. Wskazuje również, że przesunięcia ruchu w poziomie i w pionie mogą być używane w celu uzyskania bardziej precyzyjnych efektów przewijania.
Zapraszam do odkrywania różnych odmian tego układu, zmieniając przesunięcia i mieszając lokalizacje obrazów.
Możesz także zmienić liczbę kolumn, o ile rozumiesz, jak zmieni się rozmiar kolumny / obrazu, a następnie jak zaktualizować przesunięcia efektu przewijania o odpowiednią wartość.
Niektóre zalecane zasoby
Prawdopodobnie je znajdziesz Zasoby ciekawe, ponieważ pozwolą Ci również tworzyć galerie zdjęć na swoim blog WordPress.
- 10 wtyczek do tworzenia galerii zdjęć na WordPress
- Jak stworzyć galerię zdjęć za pomocą wtyczki Envira
- Wtyczki 5 WordPress do tworzenia galerii zdjęć
- Jak korzystać z modułu galerii obrazów w Divi
