DevGang
Авторизоваться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник:

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

В подарок 100$ на счет при регистрации

Получить