CSSJavaScript

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

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

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

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

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

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

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

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

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

<div id="scrollContainer"> <img src="../../../public/img/scrollObject.svg" alt="scrollObject" id="scrollObject"> </div>

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

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

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

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

Поскольку мы хотим просто добавить небольшую забавную анимацию при прокрутке. Имеет смысл разместить его в правом нижнем углу нашей страницы.
В нашем 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.

let scrollObject = document.getElementById("scrollObject"); window.addEventListener("scroll",() => { scrollObject.style.transform="rotate("`${window.pageYOffset}`"deg)"; });

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

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

let scrollSpeed = window.pageYOffset / 2; let scrollObject = document.getElementById("scrollObject"); window.addEventListener("scroll", () => { scrollObject.style.transform="rotate("`${scrollSpeed}`"deg)"; });

Мы также можем использовать данные 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
Похожие сообщения
CSS

Как использовать CSS box-shadow: 13 хитростей и примеров

JavaScriptWEBПолезные сайты

Изучаем основы Vue с Vue 3

Contact Form 7CSSWordPressПлагины

Пример отправка формы без с помощью WordPress REST API (2021)

JavaScript

Список кодов клавиш JavaScript - коды клавиш событий нажатия клавиш для ввода, пробела, возврата и т.д.

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

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