Если вы ищете способ создания плавной анимации с помощью встроенных эффектов прокрутки Divi, вам понравится этот урок. Мы покажем вам, как объединить привязку прокрутки со встроенными эффектами движения Divi для создания секций полной высоты, которые вы можете прокручивать за один раз.
Начнем с создания первого раздела. Поэтому мы будем повторно использовать этот раздел в дизайне нашей страницы. Чтобы включить привязку прокрутки, мы будем использовать свойства привязки прокрутки CSS, которые мы назначим разделам, HTML, заголовку и нижнему колонтитулу нашей страницы.
Возможный результат
Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат на экранах разных размеров.
1. Создайте новую страницу и начните проектировать первый раздел
Добавьте новую страницу и переключитесь на Visual Builder
Начните с добавления новой страницы. Введите заголовок страницы, опубликуйте страницу и переключитесь на Visual Builder.
Настройки раздела
калибровка
Оказавшись внутри новой страницы, откройте уже существующий раздел и измените настройки размера.
- Минимальная высота: 100vh
Главный элемент
Мы также добавляем в раздел две строки кода CSS. Эти строки кода CSS помогут нам превратить раздел в точку привязки для привязки прокрутки.
scroll-snap-align: начало; scroll-snap-stop: нормальное;
видимость
Чтобы убедиться, что ничего не выходит за пределы контейнера раздела, мы будем скрывать переполнения раздела.
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Добавить строку № 1
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Пока не добавляете никаких модулей, откройте настройки строки и измените размеры следующим образом:
- Использовать ширину желоба: да
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
Расстояние
Мы также удаляем верхний и нижний отступы раздела по умолчанию.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Позиция
И мы изменим положение строки соответственно:
- Позиция: Абсолют
- Расположение: Нижний центр
Добавить текстовый модуль в столбец
Оставьте поле содержимого пустым
Единственный модуль, который нам нужен в этой строке, - это текстовый модуль. Убедитесь, что вы оставили поле для содержимого модуля пустым.
Цвет фона
Затем измените цвет фона.
- Цвет фона: # ffee00
Настройки текста
Мы также удалим высоту текстовой строки модуля.
- Высота строки текста: 1em
Калибровка
Затем перейдем к настройкам размеров и изменим ширину.
- Ширина: 30%
Расстояние
Мы превратим модуль в квадрат, добавив также верхний отступ.
- Верхняя обивка: 30%
Добавить строку № 2
Структура столбца
На следующей строчке. Используйте следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размеров на вкладке дизайна:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Ширина: 60vw
- Максимальная ширина: 100%
расстояние
Затем добавьте настраиваемое верхнее поле для экранов разных размеров.
- Верхнее поле: 20vh (рабочий стол), 5vw (планшет и телефон)
Колонка 2 Интервал
Затем мы откроем настройки в столбце 2 и добавим пользовательские значения заполнения.
- Верхняя обивка: 2vh (планшет и телефон)
- Левая обивка: 2vw
- Правая обивка: 2vw
Добавьте модуль изображения в столбец 1
Загрузить изображение
Пришло время добавить моды, добавить мод изображения в столбец 1 и загрузить изображение по вашему выбору.
калибровка
Затем мы наложим полную ширину на модуль.
- Усилие полной ширины: да
Добавить текстовый модуль # 1 в столбец 2
Добавить контент H2
Во втором столбце первый модуль, который нам нужен, это текстовый модуль с содержание H2.
Настройки текста H2
Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:
- Заголовок 2 Шрифт: Антон
- Элемент 2 Размер текста: 5vw (рабочий стол), 7vw (планшет), 9vw (телефон)
Добавить текстовый модуль # 2 в столбец 2
Добавить контент
Добавьте еще один текстовый модуль чуть ниже предыдущего и вставьте содержание описания по вашему выбору.
Настройки текста
Измените настройки текста модуля следующим образом:
- Шрифт текста: Open Sans
- Размер текста: 0.8vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
- Высота строки текста: 1,8 em
расстояние
И добавьте настраиваемые верхнее и нижнее поля в настройки интервала.
- Верхнее поле: 2vw
- Нижнее поле: 2vw
Добавить модуль кнопки в столбец 2
Добавить копию
Следующий и последний модуль, который нам нужен в этом столбце, - это кнопочный модуль. Добавьте копию по вашему выбору.
Настройки кнопок
Стиль кнопки соответственно:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Цвет текста кнопки: # 333333
- Цвет границы кнопки: # 333333
- Радиус кнопки: 1px
- Шрифт кнопки: Антон
- Стиль шрифта кнопки: верхний регистр
расстояние
И завершите настройки модуля, добавив настраиваемое значение в зависимости от размеров экрана.
- Высокая внутренняя маржа: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Низкая внутренняя маржа: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Левое внутреннее поле: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
- Правильная интернет-маржа: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
2. Добавить эффекты прокрутки для разных элементов
Текстовый модуль в строке № 1
Вертикальная анимация
Как только все элементы на месте, пришло время добавить эффекты прокрутки. Откройте текстовый модуль в первом ряду и используйте вертикальное движение.
- Включить вертикальное движение: да
- Начальное смещение: 4
- Среднее смещение: 0
- Смещение окончания: -4
- Триггер эффекта движения: середина элемента
Строка № 2
Колонка 1
Горизонтальная анимация
Затем откройте первый столбец вашего второго ряда и добавьте горизонтальное движение.
- Активировать горизонтальное движение: Да
- Начальное смещение: -3
- Среднее смещение: 0 (от 40% до 60%)
- Конечное смещение: -3
- Эффект движения триггера: середина элемента
Исчезать и исчезать
Мы также применяем к этому же столбцу эффект постепенного появления и исчезновения.
- Активировать постепенное исчезновение: Да
- Начальная непрозрачность: 0%
- Средняя непрозрачность: 100%
- Конечная непрозрачность: 100%
- Эффект движения триггера: середина элемента
Колонка 2
Горизонтальное движение
Затем мы откроем параметры второго столбца и применим следующие параметры горизонтального движения:
- Активировать горизонтальное движение: Да
- Начальное смещение: 3
- Среднее смещение: 0 (от 40% до 60%)
- Конечное смещение: 3
- Эффект движения триггера: середина элемента
Исчезать и исчезать
С входящим и исходящим эффектом затухания.
- Активировать постепенное исчезновение: Да
- Начальная непрозрачность: 0%
- Средняя непрозрачность: 100%
- Конечная непрозрачность: 100%
- Эффект движения триггера: середина элемента
4. Повторно используйте первый раздел
Клонировать секцию четыре раза
После того, как вы закончили первый раздел и его эффекты прокрутки, вы можете клонировать его столько раз, сколько захотите.
Измените цвета фона всех остальных разделов
Мы изменим цвет фона всех остальных разделов.
- Цвет фона: # 111111
5. Добавьте код CSS, чтобы включить захват прокрутки на странице HTML.
Добавьте модуль кода в последний раздел страницы
Теперь, чтобы включить захват прокрутки в HTML нашей страницы, мы собираемся добавить модуль кода в любом месте в последнем разделе нашей страницы.
Вставьте HTML код CSS
Эти строки кода CSS помогут нам применить выравнивание прокрутки к HTML-коду нашей страницы:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Добавить начало привязки прокрутки к верхнему и нижнему колонтитулам
Мы позаботимся о том, чтобы наш верхний и нижний колонтитулы также были точками захвата прокрутки (как и наши разделы), также добавив следующие строки кода CSS:
верхний и нижний колонтитул {scroll-snap-align: start;}
Закончить
В этой статье мы показали вам, как создавать плавные анимации, комбинируя привязку прокрутки со встроенными эффектами движения Divi. Это отличный способ активировать эффекты прокрутки с помощью всего одной прокрутки.
Захват прокрутки помогает посетителей легко просматривать различные части вашего Веб-сайт. Мы объединили его с конструкцией секции во всю высоту. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
