Как создать анимированные часы с эффектами прокрутки Divi

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

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

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

Sneak Peek

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

Загрузите макет анимированных часов БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

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

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

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

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

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

Часть 1: Дизайн циферблата

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

Настройки строки

Перед добавлением каких-либо модулей откройте настройки строки и обновите следующее:

• Цвет фона: # 003a5c

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

• Ширина желоба: 1
• Ширина: 50vw
• Максимальная ширина: 500 пикселей
• Высота: 50vw
• Максимальная высота: 500 пикселей

• Закругленные углы: 50%
• Ширина границы: 15 пикселей
• Цвет границы: #ffffff

• Box Shadow: см. Снимок экрана
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 68 пикселей
• Цвет тени: rgba (0,0,0,0.22)

На вкладке «Дополнительно» обновите параметры видимости следующим образом:

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

Часть 2: Добавление часовых меток

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

Маркер на 12 часов

Начните с добавления нового разделительного модуля внутри строки.

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

• Цвет фона: # 78acf4

• Ширина: 10vw
• Максимальная ширина: 150 пикселей
• Высота: 3 пикселя
• Закругленные углы: 8 пикселей
• Преобразование, поворот оси Z: 90 градусов

На расширенной вкладке задайте абсолютное положение разделителю:

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

Маркер на 6 часов

Чтобы создать отметку «3 часа», продублируйте разделитель, использованный для создания отметки «12 часов». (На этом этапе рекомендуется пометить ваши модули в модальном окне Layers.) Затем откройте дублирующий разделитель и обновите местоположение позиции следующим образом:

• Расположение: внизу по центру

Маркер на 3 часа

Чтобы создать отметку «3 часа», продублируйте отметку «6 часов». Затем откройте настройки для нового дубликата (обязательно отметьте его «3 часа») и измените следующее:

• Расположение: справа по центру

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

На вкладке "Перевод"…

• Преобразовать преобразовать ось X: 50%

На вкладке "Поворот"

• Преобразовать, повернуть ось Z: 0 градусов

Маркер на 9 часов

Чтобы создать отметку «3 часа», продублируйте отметку «6 часов». Затем откройте настройки для нового дубликата (обязательно отметьте его «9 часов») и измените следующее:

• Расположение: левый центр

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

На вкладке "Перевод"…

• Преобразовать преобразовать ось X: -50%

Часть 3: Создание стрелок часов (секунды, минуты и час)

Как только часовые метки установлены, мы готовы приступить к созданию стрелок часов. Начнем со второй руки.

Вторая рука

Чтобы создать вторую стрелку, продублируйте 12-часовой разделитель и перетащите его под остальными разделителями в столбце, используя модальное окно «Слои».

Затем пометьте новый дубликат «вторым».

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

• Расположение: центр центр

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

• Ширина: 20vw
• Максимальная ширина: 200 пикселей
• Высота: 0.5vw
• Макс.высота: 7,5 пикселей

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

Обновите следующее:

На вкладке "Перевод"…

• Transform Translate X Axis: 0% (это важный шаг)

На вкладке "Поворот"…

• Преобразование, поворот оси Z: -90 градусов

На вкладке "Происхождение"…

• Преобразовать начало координат: левый центр

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

• Цвет фона: rgba (175,175,175,0,12)

Минутная стрелка

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

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

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

• Ширина: 15 Вт
• Максимальная ширина: 150 пикселей
• Высота: 1vw
• Максимальная высота: 15 пикселей

Часовая стрелка

Когда минутная стрелка закончится, продублируйте модуль секундной стрелки и отметьте дубликат «часом». Затем откройте новый модуль разделителя и обновите цвет фона следующим образом:

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

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

• Ширина: 10vw
• Максимальная ширина: 100 пикселей

На этом этапе у вас будут все три стрелки часов, готовые к эффектам прокрутки!

Часть 4: Добавление эффектов прокрутки вращения к каждой стрелке часов

Чтобы вращать стрелки часов, мы собираемся добавить эффект прокрутки вращения к каждой из трех стрелок часов. Поскольку мы работаем с дизайном часов, важно помнить, что мы можем использовать градусы поворота на каждой часовой стрелке для представления фактического времени. Например, поворот часовой стрелки на 30 градусов соответствует 1 часу, 60 градусов - 2 часам и так далее.

Эффект прокрутки вращения часовой стрелки

Сначала мы добавим эффект прокрутки вращения к часовой стрелке. Откройте настройки разделителя часовой стрелки и добавьте следующий эффект преобразования:

На вкладке ротации…

• Включить вращение: ДА
• Начальное вращение: 0 градусов (при 10%)
• Среднее вращение: 15 градусов (при 50%)
• Конечное вращение: 30 градусов (при 90%)

Эффект прокрутки вращения минутной стрелки

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

На вкладке ротации…

• Включить вращение: ДА
• Начальное вращение: 0 градусов (при 10%)
• Среднее вращение: 180 градусов (при 50%)
• Конечное вращение: 360 градусов (при 90%)

Эффект прокрутки вращения секундной стрелки

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

На вкладке ротации…

• Включить вращение: ДА
• Начальное вращение: 0 градусов (при 10%)
• Среднее вращение: 5400 градусов (при 50%)
• Конечное вращение: 10800 градусов (при 90%)

ПРИМЕЧАНИЕ. Для точного поворота секундной стрелки на 1 час потребуется поворот на 21600 градусов. Но так как это слишком быстро, я подумал, что лучше сократить его вдвое. В конце концов, это сделано в целях дизайна.

Окончательные результаты

Вот окончательный дизайн.

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

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

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

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

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