Как создать анимированные барные стойки с прокруткой с помощью Divi

Барные счетчики используются по всему Интернету для эффективной иллюстрации данных или показателей с помощью тонкой цветной анимации, которая представляет определенное значение. Divi имеет специальный модуль барной стойки, который можно легко использовать для создания анимированных барных стоек. Они являются популярным дополнением к страницам о страницах, служебных страницах и тематическим исследованиям.

Кажется, что большинство барных стоек оживляются, когда попадают в поле зрения, и их сложно настроить. Однако в этом уроке мы покажем вам, как создать полностью настраиваемые счетчики полос (с нуля), которые анимируются при прокрутке с помощью Divi. Для этого мы воспользуемся преимуществами параметров положения и эффектов прокрутки Divi и будем использовать их уникально точными способами.

Давайте начнем.

Sneak Peek

Вот краткий обзор барных стоек, которые мы собираемся построить в этом уроке.

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и импортируйте файл JSON из библиотеки Divi.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Часть 1. Оптимизация раздела, строки и столбца

Добавить ряд

Для начала добавьте в раздел строку из двух столбцов.

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

Затем откройте настройки раздела и добавьте цвет фона следующим образом:

• Цвет фона: # 000545

Затем дайте секции некоторый временный запас, чтобы проверить эффекты прокрутки и некоторые отступы, как показано ниже:

• Маржа: 80vh сверху, 80vh снизу
• Прокладка 10vw сверху, 10vw снизу

Ширина ряда

Затем откройте настройки строки и добавьте следующую ширину:

• Ширина: 90%
• Максимальная ширина: 700 пикселей

Столбец переполнен

Не забудьте скрыть переполнение двух столбцов внутри строки. Для этого откройте настройки для каждого из столбцов и обновите следующее:

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

Часть 2: Создание барной стойки с эффектами прокрутки

Барная стойка будет состоять из трех элементов: фон полосы (модуль разделителя), цветная полоса (также модуль разделителя) и содержимое полосы (модуль рекламного сообщения). Элемент цветной полосы - это то, что будет анимировано с помощью смещений эффекта горизонтальной прокрутки.

Начнем с фона бара.

Создание фона панели

Добавить модуль разделителя

Добавьте новый разделительный модуль в столбец 1.

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

Показать разделитель: НЕТ

• Цвет фона: rgba (255,255,255,0.1)

• Ширина: 300 пикселей
• Высота: 70 пикселей

Создать барную стойку

Дубликат модуля делителя

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

Фон разделителя

Затем обновите фон новым цветом фона градиента следующим образом:

• Цвет градиентного фона слева: # fe7e1f
• Правый цвет градиентного фона: # ffbc48
• Направление градиента: 90 градусов

Положение разделителя

Чтобы цветная полоса располагалась над фоном полосы, нам нужно задать ей абсолютное положение с индексом Z, равным 1:

• Позиция: Абсолютная
• Индекс Z: 1

Эффекты прокрутки разделителя

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

Использование значений смещения для определения значений процентного соотношения барной стойки

Прежде чем мы добавим горизонтальное движение к разделителю / полосе, нам нужно понять, как определить процентное значение, которое будет отображаться на счетчике столбцов. Другими словами, если мы хотим представить 25% на счетчике полосы, нам нужно знать, какое смещение горизонтального движения переместит полосу вправо ровно на 25% ширины фона полосы.

Чтобы понять это, мы можем проделать простую математику.

Общая ширина полосы составляет 300 пикселей.

Каждое значение горизонтального смещения относительно 100 пикселей (1 равно 100 пикселей, -2 равно -200 пикселей и т. Д.)

Чтобы переместить полосу влево (вне поля зрения), нам нужно добавить начальное смещение -3 (-300 пикселей). Это перемещает его влево на 300 пикселей из поля зрения.

Затем нам нужно переместить полосу на 25% от 300 пикселей (что составляет 75 пикселей), чтобы завершить анимацию прокрутки.

Чтобы переместить полоску более чем на 75 пикселей вправо, когда полоса достигнет центра страницы по вертикали, нам нужно среднее смещение -2,25 (потому что -300 плюс 75 равняется -225). Вероятно, это напоминает вам о числовых линиях, которые мы использовали в начальной школе.

Показать 25% с горизонтальным движением

Чтобы отобразить 25% с горизонтальным движением, выберите вкладку горизонтального движения и обновите следующее:

• Включить горизонтальное движение: ДА
• Начальное смещение: -3
• Среднее смещение: -2,25
• Конечное смещение: -2,25

Создание содержимого барной стойки

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

Под модулем разделителя цветных полос добавьте модуль аннотации.

Рекламное содержание

Затем обновите содержимое следующим образом:

• Титул: 25%
• Тело: Оптимизация
• Значок: см. Снимок экрана

Дизайн рекламных объявлений

На вкладке дизайна обновите следующее:

• Цвет значка: #ffffff
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 40 пикселей

• Цвет текста: светлый
• Шрифт: Рубик
• Стиль шрифта основного текста: TT
• Интервал между буквами тела: 0.2em
• Высота линии тела: 1em

• Ширина содержимого: 100%
• Ширина: 300 пикселей
• Высота: 70 пикселей
• Padding: 15 пикселей сверху, 15 пикселей слева

• Позиция: Абсолютная
• Индекс Z: 2

Часть 3: Создание дополнительных барных стоек

В следующей части мы продолжим изготовление других барных стоек, используя ту же технику. Мы создадим 50%, 75% и 100% барную стойку, чтобы завершить дизайн макета. Это должно дать вам хорошие рабочие примеры, чтобы вы могли сделать больше самостоятельно.

Создание 50% барной стойки

Дубликат столбца с барной стойкой

Создав первую барную стойку в столбце 1, мы можем продублировать весь столбец или скопировать и вставить три модуля, составляющих барную стойку, в столбец 2. Теперь у вас должно быть два столбца с одинаковыми барными счетчиками.

Обновить настройки разделителя стержней

Фон

Внутри столбца 2 откройте настройки разделителя цветной полосы и обновите цвета фона градиента:

• Цвет градиента фона слева: # 4c75f8
• Цвет градиентного фона справа: # 57a1ff

Эффекты прокрутки

Затем обновите эффект горизонтальной прокрутки движения, чтобы он заполнял 50% полосы прокрутки:

• Среднее смещение: -1,5
• Конечное смещение: -1,5

Обновить информационное сообщение

Затем откройте настройки рекламного объявления в столбце 2 и обновите содержимое:

• Заголовок: 50%
• Значок: см. Снимок экрана

Создание 75% барной стойки

Дублируйте строку

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

Обновить фон панели и эффекты прокрутки

Откройте настройки модуля разделителя цветных полос и обновите следующие цвета фона:

• Цвет градиента фона слева: # 4c75f8
• Цвет градиентного фона справа: # 57a1ff

Затем обновите смещения горизонтального движения следующим образом:

• Среднее смещение: -075
• Конечное смещение: -0,75

Рекламное содержание

Откройте настройки рекламного объявления и обновите содержимое следующим образом:

• Титул: 75%
• Значок: см. Снимок экрана

Создание 100% барной стойки

Обновить цвет полосы и эффекты прокрутки

Чтобы создать 100% барную стойку, перейдите к столбцу 2 и обновите цвет фона модуля цветного разделителя столбцов следующим образом:

• Цвет градиентного фона слева: # f449b4
• Цвет градиентного фона справа: # fc845b

Затем обновите смещения горизонтального движения следующим образом:

• Среднее смещение: 0
• Конечное смещение: 0

Обновить информационное сообщение

Наконец, обновите содержание анонса:

• Название: 100%
• Значок: см. Снимок экрана

Конечный результат

Вот скриншот окончательного результата. В качестве последнего штриха я добавил собственное фоновое изображение из нашего пятого пакета конструкторов тем.

Теперь о том, как работает прокрутка.

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

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

Если вам интересно, ознакомьтесь с нашим сообщением о создании пользовательских счетчиков кругов, которые также анимируются при прокрутке.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!