主页 / 问题 / 1447118
Accepted
user472244
Asked:2022-09-09 20:43:28 +0800 CST2022-09-09 20:43:28 +0800 CST

如何让动画在一定高度开启

  • 772

我在 JS 中有一个动画，它和其他所有东西一样，随着页面一起加载，你需要让它在某个高度打开。提前致谢！！

const counters = document.querySelectorAll(".num");

counters.forEach((counter) => {
    counter.innerHTML = "0";

    const updateCounter = () => {
        const target = +counter.getAttribute("data-target");
        const c = +counter.innerText;

        if (c < target) {
            counter.innerText = c + 1;
            setTimeout(updateCounter, 100);

        }
        else {
            counter.innerText = target;
        }
    };
    updateCounter()
});

动画本身

如果在纯 JS 中会很酷

javascript

0 个回答

  1. Best Answer

    你只需要IntersectionObserver API.

    Intersection Observer API 允许 Web 应用程序异步监视元素与其父或视口文档范围的交集的变化。

    简而言之，它检查一个元素是否在屏幕上可见，并允许您对其执行操作。

    这是一个小演示来说明：

    const boxes = document.querySelectorAll('div'); // элементы за которыми будет следить обсервер

var options = {
  root: document, // объект, который скроллится
  rootMargin: '60px',
  threshold: 1.0 // Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root
}

var callback = function(entries, observer) {
  entries.forEach(entry => {
    /**
     * Если объект виден, добавляем класс с анимацией, иначе убираем
     */
    entry.isIntersecting ? entry.target.classList.add('animate') :
      entry.target.classList.remove('animate');
  });
};

const observer = new IntersectionObserver(callback, options);

boxes.forEach((box) => observer.observe(box));
    body {
  padding: 2rem;
}

p {
  height: 120vh; /** разделил наблюдаемые элементы промежутками высотой 120% клиентского вьюпорта */
  border-bottom: 1px solid silver;
}

div {
  width: 64px;
  height: 64px;
  background: black;
}

.animate {
  animation-name: example;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(45deg)
  }
}
    <p>
  lorem
</p>
<div></div>
<p>
  lorem
</p>
<div></div>
<p>
  lorem
</p>

    你IntersectionObserver可以阅读更多关于它如何在MDN上工作的信息；

    • 2

  2. 在一定高度？据我了解，这意味着当用户滚动到某个地方时？ https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

    • 0

相关问题