Анимация объекта при прокрутке

Последнее обновление Сен 22, 2021

Содержание

В недавнем проекте я хотел включить изображение, которое поворачивается при прокрутке вверх или вниз. Проведя небольшое исследование, я обнаружил, что есть несколько способов сделать это: использовать только css, использовать javascript, использовать библиотеки и так далее.

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

Это место, чтобы быть!

(Для крупномасштабных проектов я рекомендую ознакомиться с дополнительными руководствами для получения более оптимизированных решений).

Настройка вашего объекта

Мы хотим настроить наш объект. Это может быть общее изображение: от значка до объекта векторной формы. Я рекомендую использовать векторные изображения, поскольку они легко редактируются (если вы того пожелаете), или, в противном случае, PNG для поддержки прозрачности.

Мы поместим наш объект внутри div для простоты использования и ясности и поместим его в наш html-код. (Обычно вверху)

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

Позиционирование

Теперь, где мы хотим разместить наш объект? Обычно это определяется целью нашего объекта. Чего мы хотим добиться:

Небольшой тонкий значок в правом нижнем углу
Индикатор положения прокрутки
Причудливая анимация
Большой индикатор, привлекающий внимание посетителей
…

Поскольку мы хотим просто добавить небольшую забавную анимацию при прокрутке. Имеет смысл разместить его в правом нижнем углу нашей страницы.
В нашем CSS мы пишем некоторые из следующих стилей:


#scrollObject{
  position: fixed;
  right: 3vw;
  bottom: 3vh;
  top: auto;
  width: 7vh;
  height: auto;
  transition: 0.1s ease-out;

Главное, что мы хотим сделать, – это оставить наш объект в том же месте при прокрутке, поэтому мы добавляем position: fixed;
Некоторые другие атрибуты, которые мы используем, – это right, top, bottom и т.д. Мы используем их, чтобы расположить наш объект и дать ему некоторое пространство / поля рядом с краем. Вы можете играть с ними сколько угодно, пока не достигнете желаемой позиции для своего проекта.

Мы используем единицы просмотра (высота и ширина области просмотра), чтобы наш объект оставался отзывчивым. То, что вы всегда хотите иметь в виду.

Анимация

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

Вы можете включить это в свои связанные файлы JS или, если вы создаете что-то маленькое, включить его в тег скрипта внизу своей html-страницы.

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

Мы также можем использовать данные window.pageYOffset как средство для настройки или определения других анимаций (например, для изменения показываемой анимации или изображения в зависимости от положения окна). Вы можете вызвать эти данные с помощью простого console.log (windows.pageYOffset); если вы хотите использовать его для начала.

Итак, при прокрутке у нас есть простое анимированное изображение! Бонус: мобильный. Для большей скорости отклика я решил изменить положение своего значка прокрутки и заставил его заменить изображение в моей навигации, чтобы по-прежнему демонстрировать эту изящную анимацию!


@media only screen and (max-width: 600px) {
  #scrollObject{
    transition: 0.2s ease-out;
    margin-left: -4vh;
    width: 8vh;
    height: auto;
    top: 10px;
    left: 50%;
  }

Просто используйте простой медиа-запрос для изменения положения, изменения размера … и вуаля!

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

Это приводит к следующему:

Если вы работаете в проекте vue, как и я: попробуйте включить его как отдельный компонент. Или закодируйте его в свой App.vue, так как вы хотите, чтобы он был поверх всех доступных представлений.

Источник записи: dev.to