Галереи изображений - излюбленное место на большинстве веб-сайтов. И, во многих случаях, может быть лучше, чтобы эти галереи изображений были веселыми и статичными, позволяя изображениям творить чудеса.
Но, добавьте скользящий эффект прокрутки головоломки к галерея изображений (как мы сделаем в этом уроке), может дать освежающий штрих классическому классу.
В этом уроке мы покажем вам, как создать простой макет, который открывает галерею изображений с эффектом скользящей прокрутки головоломки в Divi.
Ключевым моментом является понимание того, как размер изображений соотносится со значениями вертикального и горизонтального смещения каждого эффекта прокрутки для перемещения изображения точно на одну точку. Но после завершения результирующий эффект движения становится четким и точным, поскольку он постепенно собирает и раскрывает галерею изображений уникальным способом.
Возможный результат
Вот обзор макета галереи изображений с эффектом скользящей прокрутки головоломки, который мы собираемся создать в этом уроке.
Создание раздела заголовка
Для начала давайте создадим раздел быстрого заголовка, в котором пользователю будет предложено прокрутить страницу для просмотра галереи с потрясающими эффектами прокрутки.
Добавить строку
Добавьте строку из одного столбца в раздел по умолчанию.
Добавить текстовый модуль
Внутри столбца / строки добавьте новый текстовый модуль.
В настройках текста обновите содержимое тела:
<h1>Image Gallery</h1>
Настройки текстового модуля
На вкладке «Дизайн» обновите оформление текста следующим образом:
- Название шрифта: Roboto
- Вес шрифта заголовка: жирный
- Стиль шрифта заголовка: TT
- Выравнивание текста заголовка: по центру
- Размер текста заголовка: 50 пикселей (рабочий стол), 40 пикселей (планшет и телефон).
- Интервал заглавной буквы: 4px
Добавить значок модуля Blurb
Как только текст будет на месте, добавьте новый текстовый модуль презентации под текстовым модулем.
Затем удалите все заголовок и текст из содержимого по умолчанию и выберите использование значка стрелки вниз.
Настройки текста презентации
Затем обновите параметры текста презентации новым цветом и повторяющейся анимацией слайдов.
- Цвет значка: # ffb500
- Стиль анимации: слайд
- Направление анимации: вниз
- Интенсивность анимации: 20%
- Повтор анимации: цикл
Секция заполнения
Чтобы предоставить пространство раздела для прокрутки, обновите отступ следующим образом:
- Обивка: 20vh выше, 50vh ниже
Здесь мы используем единицу длины vh, которая соответствует высоте окна браузера, чтобы интервал соответствовал всем размерам браузера.
Создание галереи изображений с эффектами прокрутки
Теперь, когда наш раздел заголовка завершен, мы готовы создать настоящую галерею изображений с эффектами скользящей прокрутки головоломки. Вся галерея будет состоять из трех рядов по 4 изображения / столбца в каждом ряду, всего 12 изображений. Однако вы можете легко добавить в макет дополнительные линии и изображения, когда он будет готов.
Создание раздела и линии
Добавить новый раздел
Давайте начнем с добавления нового регулярного раздела под заголовком раздела.
Добавить строку
Затем добавьте в раздел строку с четырьмя столбцами.
Настройки линии
Под настройками линии обновите следующее:
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 1200 пикселей (рабочий стол), 600 пикселей (планшет), 300 пикселей (телефон)
Как ширина линии определяет размер изображения
Ширина строки очень важна для этого дизайна, так как она определяет ширину каждого из четырех столбцов. Как только мы установим ширину желоба равной 1, между изображениями больше не будет поля.
И когда мы устанавливаем максимальную ширину 1200 пикселей, макет из четырех столбцов сделает каждый столбец / изображение шириной ровно 300 пикселей (1200 пикселей / 4 = 300 пикселей).
Кроме того, поскольку каждое из изображений квадратное, мы знаем, что высота каждого изображения также будет 300 пикселей. Нам не обязательно так держать, если мы не хотим.
Например, мы также можем выбрать макет из трех столбцов с изображениями 400 x 400 пикселей. Знание ширины изображения (300 пикселей) и высоты (также 300 пикселей) будет ключом к созданию эффекта прокрутки позже.
Добавление изображений
Добавить изображение 1
Изображение 1 Эффекты прокрутки
Связь между размером изображения и смещениями эффекта прокрутки
При использовании эффекта вертикальной и горизонтальной прокрутки важно понимать, что представляет собой введенное числовое значение. В этом примере у нас есть начальное смещение вертикального перемещения -3. Это -3 фактически равно -300 пикселей (или 300 пикселей вниз), что является шириной изображения.
Затем смещение достигает 0 (исходное положение), когда пользователь прокручивает. Это то, что создает эффект прокрутки, который перемещает изображение ровно на один блок / кадр. Горизонтальное перемещение начинается с 3 (300 пикселей справа) и останавливается в положении по умолчанию. Эти два эффекта объединяются для создания уникального эффекта двухчастной прокрутки.
Добавить изображение 2
После добавления эффектов прокрутки к изображению 1. Добавьте новое изображение в столбец 2.
Мы оставим это статичное изображение без какого-либо эффекта прокрутки.
Добавить изображение 3
Затем добавьте еще один модуль изображения в столбец 3 и обновите модуль новым изображением.
Изображение 3 Эффекты прокрутки
В разделе «Параметры изображения» обновите следующие эффекты прокрутки:
На вкладке Горизонтальное перемещение ...
- Активировать горизонтальное движение: ДА
- Начальное смещение: -3 (в 0% окна)
- Среднее смещение: 0 (при 15% области просмотра)
- Конечное смещение: 0 (при 100% области просмотра)
Добавить изображение 4
Чтобы создать последнее изображение, скопируйте изображение 1 и вставьте его в столбец 4.
Загрузите новое изображение в настройках изображения.
Изображение 4 Эффекты прокрутки
Затем обновите следующие эффекты прокрутки:
На вкладке Вертикальное перемещение ...
- Активировать вертикальное движение: ДА
- Начальное смещение: 3 (в 0% окна)
- Среднее смещение: 0 (при 15% -28% области просмотра)
- Конечное смещение: 0 (при 40% области просмотра)
На вкладке Горизонтальное перемещение ...
- Активировать горизонтальное движение: ДА
- Начальное смещение: 3 (в 0% окна)
- Среднее смещение: 3 (при 28% области просмотра)
- Конечное смещение: 0 (при 40% области просмотра)
Дублирующая линия
Теперь, когда эффекты прокрутки изображения выполнены для первой строки, все, что нам нужно сделать, это продублировать строку, чтобы создать больше изображений и соответствующих им эффектов прокрутки. В этом примере давайте дважды продублируем строку, чтобы создать в общей сложности три строки.
Заменить и переставить изображения по мере необходимости
Затем мы можем перемещать изображения, используя функцию перетаскивания, куда захотим. Здесь вы можете проявить творческий подход и посмотреть, как будут прокручиваться движущиеся изображения. И как только изображения будут на месте, вы можете заменить содержимое модуля изображений новыми изображениями, которые соответствуют потребностям Веб-сайт.
Последние штрихи
Видимость раздела
Поскольку наши изображения, вероятно, будут выходить за пределы раздела / окна, давайте скроем переполнение, чтобы немного его очистить. Откройте настройки раздела и обновите следующее:
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Секция заполнения
Мы хотим, чтобы эффект вертикальной прокрутки верхнего изображения (который простирается над разделом) был виден, несмотря на скрытое переполнение. Итак, давайте добавим верхний и нижний отступы, равные высоте изображения (300 пикселей).
Результат на данный момент
Сейчас мы можем остановиться на этом, если вы хотите сохранить дизайн галереи без промежутков между изображениями. Вот как выглядит результат на данный момент. Обратите внимание, как изображения перемещаются по вертикали и горизонтали ровно на один блок / кадр.
Добавление места между изображениями
Поскольку мы устанавливаем ширину желоба равной 1, у нас больше нет поля между столбцами или изображениями. Чтобы воссоздать одинаковый интервал, мы можем добавить заливку к каждому кадру.
Это позволит нам создать необходимый интервал без ущерба для функциональности эффектов прокрутки. Это возможно, потому что добавление отступов к изображению не приведет к увеличению ширины или высоты контейнера изображения. Вы также можете добиться аналогичного эффекта, используя границы.
Image 1 Padding
Откройте настройки изображения 1 и обновите следующее:
- Заполнение: 10 пикселей вверху, 10 пикселей внизу, 10 пикселей слева, 10 пикселей справа
Расширить заливку на все изображения
Перед сохранением щелкните правой кнопкой мыши параметр заполнения и выберите «Расширить заполнение». Во всплывающем окне «Развернуть стили» нажмите кнопку «Расширить», чтобы распространить эту заливку на все изображения на странице.
Конечный результат
Вот результат всей проделанной нами работы.
Заключительные мысли
Эффект скользящей прокрутки головоломки, представленный в этой статье, дает нам больше, чем просто уникальный дизайн для галереи изображений. Он также указывает, что смещения движения по горизонтали и вертикали можно использовать для более точных эффектов прокрутки.
Не стесняйтесь исследовать различные варианты этого макета, изменяя смещения и смешивая местоположения изображений.
Вы также можете изменить количество столбцов, если вы понимаете, как изменится размер столбца / изображения, а затем как обновить смещения эффекта прокрутки с соответствующим значением.
Некоторые рекомендуемые ресурсы
Вы, вероятно, найдете эти Ressources интересно, потому что они также позволят вам создавать фотогалереи на вашем WordPress блог.
- 10 плагинов для создания фотогалерей на WordPress
- Как создать фотогалерею с помощью плагина Envira
- 5 WordPress плагины для создания фотогалерей
- Как использовать модуль галереи изображений на Divi
