Создаем анимированную иконку скролла

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

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

Я предлагаю свое решение для такой иконки.

Нам понадобится лишь один html-элемент:

Вставляем этот элемент в нужное место нашей секции. Далее добавляем достаточно много кода стилей. Также, нам нужно прописать анимацию подвижного элемента. Я решил сделать просто: буду изменять позиционирование и прозрачность.

Вот стили:

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

Результат можно посмотреть на Codepen

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *