-1

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

5
  • а блоки фиксированные или нет? по сути при скроле они сами буду появляться и исчезать 22 мая 2022 в 14:39
  • Да, они содержат информацию и при скролленге должны плавно появляться
    – neZora
    22 мая 2022 в 15:02
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 22 мая 2022 в 15:50
  • Я хочу, чтобы во время скроллинга страницы блоки плавно появлялись и исчезали в виде приближения и отдаления соответственно
    – neZora
    22 мая 2022 в 17:30
  • используй библиотеки для работы со скроллом. Новичку будет проще всего что-то готовое юзать. vanillalist.top/search/?s=scroll+animate
    – VladykoD
    23 мая 2022 в 12:15

1 ответ 1

1

Например можно так, если элемент фиксированный

Но если нужно анимировать блоки на сайте при скролле, тут js не нужен, проще присмотреться к какой либо css библиотеке например вот эта.

const icon = document.querySelector('.icon');

document.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    icon.style.opacity = '0';
    icon.style.marginRight = '-50px';
    icon.style.transitionDuration = '.5s';
  } else {
    icon.style.opacity = '1';
    icon.style.marginRight = '0';
    icon.style.transitionDuration = '.5s';
  }
})
.text {
  width: 500px;
}

.icon {
  display: block;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 10px;
  right: 30px;
  border-radius: 50%;
  background: rgb(255, 0, 0);
  z-index: 99;
}
<div class="icon"></div>
  <p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex nam deleniti distinctio minus ad iste
    nobis
    sint, quos praesentium aliquam saepe odit aut dolore doloribus libero similique facilis est, fugiat molestias
    earum
    autem quia at esse. Ad perferendis veniam officiis repellat debitis fugit quod, quaerat aut quia recusandae iste
    non
    architecto accusantium voluptates nobis voluptate voluptatum totam sapiente at. Ab dicta hic itaque, repellendus,
    quod
    quos facilis illum doloribus ea autem atque eligendi neque corrupti id totam inventore. Atque commodi ipsam
    numquam
    illum iusto suscipit obcaecati, quasi explicabo quo optio voluptas tenetur voluptates assumenda officiis, possimus
    dolor soluta odio delectus?</p>
  <p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex nam deleniti distinctio minus ad iste
    nobis
    sint, quos praesentium aliquam saepe odit aut dolore doloribus libero similique facilis est, fugiat molestias
    earum
    autem quia at esse. Ad perferendis veniam officiis repellat debitis fugit quod, quaerat aut quia recusandae iste
    non
    architecto accusantium voluptates nobis voluptate voluptatum totam sapiente at. Ab dicta hic itaque, repellendus,
    quod
    quos facilis illum doloribus ea autem atque eligendi neque corrupti id totam inventore. Atque commodi ipsam
    numquam
    illum iusto suscipit obcaecati, quasi explicabo quo optio voluptas tenetur voluptates assumenda officiis, possimus
    dolor soluta odio delectus?</p>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.