4 анимированных кнопки прокрутки для раздела Hero вашего сайта Divi (и как их создать)
Опубликовано: 2019-08-08Анимированные кнопки прокрутки выполняют простую, но важную задачу - привлечь внимание пользователей и вести их вниз по вашей веб-странице. Этот тип кнопок обычно находится над сгибом, так что посетитель может просто щелкнуть кнопку без необходимости прокрутки к следующему важному разделу веб-страницы. Фактически, Divi имеет эту функцию кнопки прокрутки, встроенную в модуль заголовка полной ширины.
В этом уроке я покажу вам, как создавать полностью настраиваемые анимированные кнопки прокрутки в Divi. Итак, если вы ищете творческую альтернативу встроенной кнопке прокрутки Divi в модуле полноразмерного заголовка, эти анимированные конструкции кнопок прокрутки помогут указать вам правильное направление (буквально).
Sneak Peek
Вот краткий обзор проектов, которые мы создадим вместе.
Загрузите макет анимированных кнопок прокрутки БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Подпишитесь на наш канал Youtube
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Изображения, которые будут использоваться для фиктивного содержания
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Создание раздела заголовка
Прежде чем мы начнем проектировать анимированные кнопки прокрутки, нам нужно настроить раздел макета заголовка. Поскольку мы собираемся больше сосредоточиться на создании анимированных дизайнов кнопок прокрутки, мы сделаем дизайн заголовка простым с темным фоном. После этого мы можем продублировать раздел, чтобы работать с каждым новым дизайном кнопок прокрутки.
Для начала создайте обычный раздел со строкой в одну колонку.
Затем, прежде чем добавлять модуль, откройте настройки раздела и добавьте темный фон следующим образом:
Цвет фона: # 222222
Подойдет любой темный фон.
Добавить текст заголовка
Чтобы создать фиктивный текст заголовка, добавьте новый текстовый модуль в строку с одним столбцом.
Затем обновите содержимое основного текста заголовком h1 чуть выше текста абзаца по умолчанию.
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Затем обновите настройки дизайна следующим образом:
Шрифт текста: Karla
Текст Выравнивание текста: по центру
размер текста заголовка: 5vw
Цвет текста: светлый
Это будет основной дизайн раздела, который мы будем использовать для наших различных анимированных кнопок прокрутки.
Дизайн анимированных кнопок прокрутки №1: вертикальный текст с медленной анимацией отскока
Создав базовый дизайн раздела, мы готовы добавить нашу первую анимированную кнопку прокрутки. Эта кнопка прокрутки состоит из модуля рекламного сообщения, у которого справа будет значок. Затем текст и значок будут повернуты вертикально, чтобы значок стрелки указывал вниз. После этого мы добавим анимацию отскока с медленной продолжительностью.
Вот как это сделать.
Сначала добавьте новую строку из одного столбца чуть ниже нашей строки, содержащей текст заголовка.
Затем добавьте в строку модуль рекламного объявления.
В настройках рекламного сообщения удалите содержимое основного текста по умолчанию и добавьте следующее:
Название: свиток
Значок использования: ДА
Значок: стрелка вправо (см. Снимок экрана)
Затем обновите настройки дизайна следующим образом:
Цвет значка: #ffffff
Расположение изображения / значка: слева
Использовать размер шрифта значка: ДА
Размер шрифта значка: 50 пикселей
Стиль шрифта заголовка: TT
Цвет текста заголовка: #ffffff
Размер текста заголовка: 14 пикселей
Интервал между заглавными буквами: 3 пикселя
Высота строки заголовка: 50 пикселей (то же, что и размер шрифта значка).
Затем нам нужно задать ширину рекламного объявления и повернуть его по вертикали следующим образом:
ширина: 132 пикс.
Выравнивание модуля: по центру
Преобразование, поворот оси Z: 90 градусов
Теперь все, что нам нужно сделать, это изменить порядок содержимого рекламного объявления так, чтобы значок стрелки находился справа от рекламного объявления, а не слева. Это заставит стрелку отображаться под вертикальным текстом, как и предполагалось. Для этого нам нужно добавить следующий настраиваемый CSS к основному элементу:
direction: rtl;
Добавление анимации медленного импульса
Чтобы добавить анимацию, обновите следующее:
Стиль анимации: отскок
Направление анимации: вниз
Продолжительность анимации: 5000 мс
Задержка анимации: 400 мс
Анимация изображения / значка: слева направо
Конечный результат
Теперь посмотрим на окончательный результат дизайна №1.
Дизайн анимированных кнопок прокрутки # 2: анимация текста с вертикальной рамкой
Этот следующий дизайн основан на дизайне №1, в котором мы сохраним кнопку вертикальной прокрутки текста, созданную с помощью модуля blurb. Отличие будет в анимации. Для этого дизайна мы собираемся добавить анимацию слайда, которая начинается с кнопки прокрутки, скрытой над контейнером строки, а затем заканчивается кнопкой, скрытой под строкой. С помощью цикла анимации это создаст эффект анимации выделения текста, который привлекает внимание пользователя.
Вот как это сделать.
Сначала продублируйте всю часть дизайна №1.
Обновить настройки строки 2
Затем обновите строку раздела, содержащую модуль рекламного сообщения / кнопку прокрутки, следующим образом:
Горизонтальное переполнение: скрыто
Вертикальное переполнение: скрыто
Обновить настройки модуля Blurb
Чтобы создать анимацию выделения, сначала нам нужно использовать transform translate, чтобы переместить текст рекламного объявления под контейнер строки (скрытый от просмотра). Это будет позиция, в которой текст будет в конце анимации. Обновите следующее:
Преобразовать преобразовать ось Y: 115 пикселей
Затем добавьте следующие настройки анимации:
Стиль анимации: слайд
Направление анимации: вниз
Продолжительность анимации: 4000 мс
Интенсивность анимации: 195%
Начальная непрозрачность анимации: 100%
Кривая скорости анимации: линейная
Повтор анимации: цикл
Конечный результат
Теперь посмотрим на окончательный результат дизайна №3.
Анимированный дизайн кнопки прокрутки # 3: вкладка со стрелкой с отложенной анимацией скольжения вниз
В следующем дизайне мы собираемся объединить текстовый модуль и модуль рекламных объявлений, чтобы создать уникальный дизайн вкладок со стрелками.
Для этого дизайна мы начнем с основного дизайна раздела заголовка. Таким образом, вы можете продублировать повторяющийся раздел дизайна №3, а затем удалить модуль рекламного объявления в строке 2.
Затем добавьте текстовый модуль в строку с одним столбцом непосредственно под первой строкой.
Затем обновите содержимое тела словом «прокрутка».
Затем обновите настройки дизайна следующим образом:
Цвет фона: #ffffff
Цвет текста текста: # 222222
Выравнивание текста: по центру
Ширина: 50 пикселей
Выравнивание модуля: по центру
Поля: низ 0 пикселей
Отступ: 20 пикселей сверху, 20 пикселей снизу.
Закругленные углы 5 пикселей внизу слева, 5 пикселей внизу справа
Добавьте значок Blurb
Теперь, когда текстовый модуль на месте, нам нужно создать значок рекламного объявления прямо под ним, чтобы завершить дизайн вкладки со стрелкой. Для этого добавьте новый модуль рекламных сообщений под текстовым модулем.
Затем удалите заголовок и основной текст по умолчанию. Затем добавьте обновление следующего содержания:
Значок использования: ДА
Значок: нижний треугольник со стрелкой (см. Снимок экрана)
Затем обновите настройки следующим образом:
Цвет значка: #ffffff
Поля: -36 пикселей сверху, 0 пикселей снизу
Это отрицательное поле будет прикреплять стрелку к текстовому модулю для красивого дизайна вкладок со стрелками.
Затем добавьте следующий CSS-код к изображению рекламного объявления, чтобы убрать ненужные поля под значком.
CSS Blurb Image:
margin-bottom: 0px;
Строка 2 Настройки и анимация
Поскольку мы хотим добавить одну и ту же анимацию к обоим модулям, составляющим дизайн кнопок прокрутки, нам нужно будет добавить анимацию в строку, которая их содержит. Обновите настройку строки следующим образом:
Максимальная ширина: 100 пикселей
Padding: 0px сверху, 0px снизу
Стиль анимации: слайд
Направление анимации: вниз
Продолжительность анимации: 1200 мс
Цвет фона строки 1 и тень блока
Последний штрих этого дизайна заключается в добавлении цвета фона в первую строку непосредственно над строкой кнопок прокрутки. И, обновив индекс Z этой строки, мы позволим анимации кнопки прокрутки отображаться так, как если бы она пробивалась через заголовок.
Откройте настройки для строки 1 следующим образом:
Цвет фона: # 222222
Z-индекс: 10
Box Shadow: см. Снимок экрана
Положение прямоугольной тени по вертикали: 80 пикселей
Сила размытия тени коробки: 22px
Сила распространения тени коробки: -70 пикселей
Цвет тени: # 222222 (убедитесь, что он соответствует цвету фона)
Конечный результат
Теперь посмотрим на окончательный результат.
Анимированный дизайн кнопки прокрутки # 4: анимация прокрутки мыши
Для этой последней анимированной кнопки прокрутки мы собираемся создать анимацию прокрутки мыши, объединив текстовый модуль и модуль рекламного сообщения.
Вот как это сделать.
Для начала вы можете использовать основной раздел заголовка. Затем добавьте новую строку под строкой 1.
Добавить модуль Blurb
Затем добавьте в строку модуль аннотации. Затем удалите заголовок и основной текст по умолчанию.
После этого обновите значок следующим образом:
Значок использования: ДА
Значок: круг (см. Снимок экрана)
Затем обновите настройки дизайна рекламного объявления следующим образом:
Цвет значка: #ffffff
Использовать размер шрифта значка: ДА
Размер шрифта значка: 15 пикселей
Стиль анимации: слайд
Направление анимации: вниз
Продолжительность анимации: 1200 мс
Повтор анимации: цикл
Анимация изображения / значка: без анимации
Затем добавьте следующий настраиваемый CSS в Blurb Image:
margin-bottom: 0px;
Добавить текстовый модуль
Затем добавьте новый текстовый модуль прямо под модулем аннотации. Затем обновите основной текст словом «scroll».
Затем обновите следующие параметры текста:
Цвет текста текста: #ffffff
Выравнивание текста: по центру
Ширина: 90 пикселей
Поля: 10 пикселей сверху, -30 пикселей слева
Обновить настройки строки 2
Теперь обновите настройки строки следующим образом:
Ширина: 30 пикселей
Высота: 60 пикселей
Закругленные углы: 16 пикселей
Ширина границы: 1 пикс.
Цвет границы: #ffffff
Стиль границы: сплошной
Горизонтальный перелив: видимый
Вертикальный перелив: видимый
Конечный результат
Теперь посмотрим на окончательный результат:
Добавление функциональности якорной ссылки
Якорные ссылки - это ссылки, которые переходят в разные разделы страницы. Они часто используются на одностраничных сайтах. Мы можем использовать ту же концепцию, чтобы добавить ссылку привязки к нашим кнопкам прокрутки, чтобы они переходили вниз по странице к нужному разделу. Чтобы добавить функцию привязки к вашим анимированным кнопкам прокрутки, вам нужно сделать две основные вещи.
- Вам нужно добавить идентификатор CSS в раздел или строку, к которой вы хотите перейти
- Вам нужно добавить ссылку привязки с тем же идентификатором CSS на кнопку прокрутки
Вот как это будет работать. Сначала создайте новый раздел под разделом заголовка, содержащий кнопку прокрутки. Затем присвойте новому разделу идентификатор CSS на вкладке «Дополнительно».
Затем найдите кнопку элемента / прокрутки, которую вы хотите превратить в ссылку привязки, и добавьте URL-адрес, который начинается с хэштега (или символа фунта), за которым сразу следует идентификатор CSS элемента, на который вы переходите.
Например, если CSS-идентификатор раздела - «section-2», вы должны добавить «# section-2» в качестве URL-адреса ссылки.
Помните, что Divi позволяет добавлять URL-адреса ссылок к каждому элементу Divi, поэтому не стесняйтесь добавлять ссылки ко всей строке, содержащей анимированную кнопку прокрутки.
Для получения дополнительной информации ознакомьтесь с некоторыми интересными вещами, которые вы можете делать с якорными ссылками.
Проявите творческий подход!
Не бойтесь комбинировать разные модули и анимировать их по-разному. Фактически, когда я изучал новые способы создания кнопок прокрутки с помощью Divi, я создал забавную анимацию прокрутки большого пальца, которую можно было использовать на мобильных устройствах. Я включил его в бесплатную загрузку выше на случай, если вы захотите его проверить.
Последние мысли
Подобные анимированные кнопки прокрутки легко создать с помощью Divi. И их можно использовать в большем количестве мест, чем заголовок, если вы относитесь к ним как к якорным ссылкам. Я надеюсь, что эти дизайны вдохновят вас на создание новой кнопки прокрутки для вашего следующего проекта.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!