Анимация объекта при скролле
В недавнем проекте я хотел добавить изображение, которое поворачивается при прокрутке вверх или вниз. Проведя небольшое исследование, я обнаружил, что есть несколько способов сделать это: использовать только css, использовать javascript, использовать библиотеки и так далее.
Это короткое руководство будет посвящено простому и короткому способу добавления анимированного скроллера. Если вы создаете небольшой веб-сайт или проект и хотите включить его.
Настройка вашего объекта
Мы хотим настроить наш объект. Это может быть обычное изображение, от иконки до объекта векторной формы. Я рекомендую использовать векторные изображения, поскольку они легко редактируются (если вы того пожелаете), или, в противном случае, PNG для поддержки прозрачности.
Мы поместим наш объект внутри div для простоты использования и ясности и поместим его в ваш html-код. (Обычно в начале body)
<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 и т.д. Мы используем их, чтобы расположить наш объект и дать ему пространство / поля рядом с краем. Вы можете играть с ними сколько угодно, пока не достигнете желаемой позиции для своего проекта.
Мы используем единицы vh (высота и ширина области просмотра), чтобы наш объект оставался отзывчивым.
Анимация
Наконец, мы хотим оживить наш объект. Некоторые довольно простые анимации могут быть достигнуты с помощью 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%;
}
Просто используйте простой медиа-запрос для изменения положения, изменения размера ... и вуаля!
Это приводит к следующему:
