Как сделать анимацию при скролле?

Ссылка скопирована
CSS HTML JavaScript
29 января 2026 1 ответ

Подскажите как плавно остановить картинки камней когда они доходят до красного блока? один камень должен останавливаеться сверху красного блока, а второй снизу. Спасибо
snippet

Дополнительно:

Использовать событие onscroll и задавать display none

  • Нету такого события, onscroll либо свойство либо атрибут
  • imko, вам следует изучить JavaScript
  • Алексей Гончаров, и вам
  • Алексей Гончаров, куда читать конкретно, можно на документацию ссылочку?
  • imko, от этого суть меняется? Главное ответ правильный что нужно использовать onscroll. А вы докопались до условностей, заявив что нету такого события.
  • imko, scroll, onscroll очень большая разница)
    Может быть они ещё выполняют разную функцию?

    Нету такого события

    Есть. Scroll

  • склоку раздувать не надо. Старайтесь писать строго по теме. Если считаете, что комментарии неуместны - пользуйтесь штатными средствами ресурса, раздувать флейм обсуждения комментариев и тем более переходить на личности не надо.
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Виктор Sys Ответ

Для создания анимации при скролле на веб-странице можно использовать JavaScript и CSS. Вот пример, как можно добавить анимацию при прокрутке страницы:

1. Начнем с HTML структуры. Для этого создадим контейнер, в котором будет находиться элемент, который мы будем анимировать при скролле:

<div class="container">
  <div class="element"></div>
</div>

<div class="container"> <div class="element"></div> </div>

2. Теперь добавим стили для контейнера и элемента:

.container {
  height: 1000px; /* Высота контейнера для прокрутки */
}
 
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s; /* Длительность анимации */
}

.container { height: 1000px; /* Высота контейнера для прокрутки */ } .element { width: 100px; height: 100px; background-color: red; transition: transform 0.5s; /* Длительность анимации */ }

3. Далее напишем JavaScript код, который будет отслеживать прокрутку страницы и добавлять класс к элементу для запуска анимации:

window.addEventListener('scroll', function() {
  let element = document.querySelector('.element');
  let position = element.getBoundingClientRect().top;
  let windowHeight = window.innerHeight;
 
  if (position &lt; windowHeight) {
    element.classList.add(&#039;animate&#039;);
  } else {
    element.classList.remove(&#039;animate&#039;);
  }
});

window.addEventListener('scroll', function() { let element = document.querySelector('.element'); let position = element.getBoundingClientRect().top; let windowHeight = window.innerHeight; if (position &lt; windowHeight) { element.classList.add(&#039;animate&#039;); } else { element.classList.remove(&#039;animate&#039;); } });

4. Наконец, добавим стили для анимации элемента при прокрутке:

.element.animate {
  transform: translateY(50px); /* Пример анимации */
}

.element.animate { transform: translateY(50px); /* Пример анимации */ }

Теперь, когда пользователь будет прокручивать страницу и элемент попадет в область видимости, он будет анимироваться согласно заданным стилям. Помните, что это всего лишь базовый пример, и вы можете настроить анимацию по своему усмотрению, добавив другие свойства CSS и JavaScript функции.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов