Как комбинировать привязку прокрутки и эффекты движения для плавной анимации

Если вы ищете способ создавать плавные анимации с помощью встроенных эффектов прокрутки Divi, вам понравится этот пост. Мы покажем вам, как объединить привязку прокрутки со встроенными эффектами движения Divi для создания секций полной высоты, которые вы можете прокручивать за один раз. Начнем с создания первого раздела. Затем мы будем повторно использовать этот раздел во всем дизайне нашей страницы. Чтобы включить привязку прокрутки, мы будем использовать свойства привязки прокрутки CSS, которые мы назначим разделам нашей страницы, HTML, верхнему и нижнему колонтитулам. Вы также сможете бесплатно скачать файл JSON страницы!

Давайте перейдем к этому.

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Скачайте The Smooth Animations Layout БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету с плавной анимацией, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Создайте новую страницу и начните разрабатывать первый раздел.

Добавить новую страницу и переключиться на Visual Builder

Начните с добавления новой страницы. Введите название страницы, опубликуйте страницу и переключитесь на Visual Builder.

Настройки раздела

Размеры

Оказавшись внутри новой страницы, откройте уже существующий раздел и измените настройки размера.

• Мин. Высота: 100vh

Главный элемент

Мы также добавляем в раздел две строки кода CSS. Эти строки кода CSS помогут нам превратить раздел в точку привязки для привязки прокрутки.

scroll-snap-align: start;
scroll-snap-stop: normal;

Видимость

Чтобы убедиться, что ничто не выходит за пределы контейнера раздела, мы скроем переполнения раздела.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените размер следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Мы также удаляем верхнее и нижнее отступы раздела по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Позиция

И мы соответствующим образом изменим положение строки:

• Позиция: Абсолютная
• Расположение: внизу по центру

Добавить текстовый модуль в столбец

Оставьте поле содержимого пустым

Единственный модуль, который нам нужен в этой строке, - это текстовый модуль. Убедитесь, что вы оставили поле содержимого модуля пустым.

Фоновый цвет

Затем измените цвет фона.

• Цвет фона: # 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 м

Интервал

И добавьте настраиваемые верхнее и нижнее поле в настройки интервала.

• Верхняя маржа: 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 proximity;
}

</style>

Добавить начало привязки прокрутки к верхнему и нижнему колонтитулам

Мы убедимся, что наши верхний и нижний колонтитулы также являются точками привязки прокрутки (как и наши разделы), добавив также следующие строки кода CSS:

header, footer {
scroll-snap-align: start;
}

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как создавать плавные анимации, комбинируя привязку прокрутки со встроенными эффектами движения Divi. Это отличный способ включить эффекты прокрутки с помощью одной прокрутки. Привязка прокрутки помогает посетителям легко просматривать различные части вашего веб-сайта. Мы объединили это с конструкцией секции в полный рост. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.