首页 > web前端 > css教程 > 如何仅在页面滚动时进入视口时才对元素进行动画处理?

如何仅在页面滚动时进入视口时才对元素进行动画处理?

Susan Sarandon
发布: 2024-11-17 06:05:04
原创
303 人浏览过

How Can I Animate Elements Only When They Enter the Viewport on Page Scroll?

在页面滚动的视口中为元素添加动画

在包含多个动画元素的网页中,控制这些动画何时开始可能会很困难。为了实现平滑的滚动动画,我们需要一种方法,仅当它们各自的元素进入视图时才触发它们。以下是使用 IntersectionObserver API 实现此目的的方法。

使用 IntersectionObserver API

IntersectionObserver API 监视与视口或指定父元素相关的元素的可见性。当元素变得可见时,我们可以使用它来切换 CSS 动画。

代码片段

1

2

3

4

5

6

7

8

9

10

11

12

13

const inViewport = (entries, observer) => {

  entries.forEach((entry) => {

    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);

  });

};

 

const Obs = new IntersectionObserver(inViewport);

const obsOptions = {}; // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

 

// Attach observer to every [data-inviewport] element:

document.querySelectorAll('[data-inviewport]').forEach((el) => {

  Obs.observe(el, obsOptions);

});

登录后复制

CSS 动画示例

以下是如何将动画应用于元素的示例视图中的内容:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

[data-inviewport] { /* THIS DEMO ONLY */

  width:100px; height:100px; background:#0bf; margin: 150vh 0;

}

 

/* inViewport */

 

[data-inviewport="scale-in"] {

  transition: 2s;

  transform: scale(0.1);

}

[data-inviewport="scale-in"].is-inViewport {

  transform: scale(1);

}

 

[data-inviewport="fade-rotate"] {

  transition: 2s;

  opacity: 0;

}

[data-inviewport="fade-rotate"].is-inViewport {

  transform: rotate(180deg);

  opacity: 1;

}

登录后复制

结论

通过利用 IntersectionObserver API,我们现在可以控制动画的时间,确保动画在相应元素在视口中可见时播放。这种方法在用户滚动浏览您的网页时为他们提供了无缝且引人入胜的体验。

以上是如何仅在页面滚动时进入视口时才对元素进行动画处理?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板