Как запустить анимацию, когда доскролили к блоку?

Question

тоесть блок попадает во вьюпорт - отрабатывает анимация

следуещий раз она запускается после обновлении страницы

а сейчас анимация отрабатывает после загрузки страницы и с мобилки пока доскролишь -её не видно

function animateBlock(entries, observer) {
    const $this = $(entries[0].target)
    if (entries[0].isIntersecting) {
    console.log(1);
      }
    }

  var options = {
    rootMargin: '0px',
    threshold: .2
  }

  let elem = $('.item');
  var elemObserver = new IntersectionObserver(animateBlock, options);
  elemObserver.observe(elem);

.item {
  transform: translateX(-100%);
  outline: 1px solid red;
  animation: view 0.3s linear forwards;
  animation-delay: 0.3s;
}

@keyframes view {
  100% {
    transform: translateX(0);
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="block">
  <div class="container">
    <div class="item">
    <h3>block который анимируем</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id unde illum optio eveniet voluptates! Ullam quasi deserunt nemo id iure laboriosam distinctio, alias maxime expedita. Ut aperiam autem, hic explicabo.</p>
    </div>
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

<section class="block">
  <div class="container">
    <div class="item">
    <h3>block который анимируем</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id unde illum optio eveniet voluptates! Ullam quasi deserunt nemo id iure laboriosam distinctio, alias maxime expedita. Ut aperiam autem, hic explicabo.</p>
    </div>
  </div>
</section>

<section class="text">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor nihil dicta autem minima vel, dignissimos officia libero nesciunt saepe consectetur ex atque voluptatibus maiores ab quibusdam explicabo deserunt dolore voluptatem.
  </div>
</section>

Answer 1

Во-первых, IntersectionObserver.observe() добавляет один элемент, а $('.item') - это набор элементов. Во-вторых, нужно немного изменить структуру, чтобы стиль с анимацией присваивался объекту после пересечения с областью видимости.

CSS

.item {
  transform: translateX(-100%);
  outline: 1px solid red;
}

.animate {
  animation: view 0.3s linear forwards;
  animation-delay: 0.3s;
}

@keyframes view {
  100% {
    transform: translateX(0);
  }
}

Нужно изменить структуру блока с анимацией, а точнее изменить класс контейнера, иначе не будет вызван метод анимации, ведь изначально .item скрыт.

HTML

<section class="block">
  <div class="container-anim">
    <div class="item">
    <h3>block который анимируем</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id unde illum optio eveniet voluptates! Ullam quasi deserunt nemo id iure laboriosam distinctio, alias maxime expedita. Ut aperiam autem, hic explicabo.</p>
    </div>
  </div>
</section>

JS

$(document).ready(function() {
    function animateBlock(entries, observer)
    {
        // нужно обработать все, ведь попасть в область просмотра могут несколько блоков
        for(let i=0; i<entries.length; i++)
        {
            const $this = $(entries[i].target);
            if (entries[i].isIntersecting)
            {
                $('.item', $this).addClass('animate');
                elemObserver.unobserve(entries[i].target);
            }
        }
    }

    var options = {
        rootMargin: '0px',
        threshold: .2
    }

    let elem = $('.container-anim');
    var elemObserver = new IntersectionObserver(animateBlock, options);
    elem.each((i, e) => elemObserver.observe(e));
})

БЛОГ НА HUSL

Как запустить анимацию, когда доскролили к блоку?

Ответы (1 шт):