CSS3-Animate 元素(如果在视口中可见)(页面滚动) [英] CSS3-Animate elements if visible in viewport (Page Scroll)

问题描述

我在我的 html 页面上为各种 div 元素添加了 CSS 动画.但是所有动画同时播放&我在页面底部看不到动画.如何在向下滚动页面时让它们播放?

解决方案

使用 IntersectionObserver API

<块引用>

IntersectionObserver API 提供了一种异步观察变化的方法在目标元素与祖先元素或顶级文档视口的交集处.

这是一个触发 classList 切换的示例当元素在视口中时:

const inViewport = (entries,observer) =>{entry.forEach(entry => {entry.target.classList.toggle("is-inViewport", entry.isIntersecting);});};const Obs = new IntersectionObserver(inViewport);const obsOptions = {};//参见:https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options//将观察者附加到每个 [data-inviewport] 元素:const ELs_inViewport = document.querySelectorAll('[data-inviewport]');ELs_inViewport.forEach(EL => {obs.observe(EL, obsOptions);});

[data-inviewport] {/* 仅此演示 */宽度:100px；高度:100px；背景:#0bf;余量:150vh 0；}/* 在视口 */[data-inviewport="scale-in"] {过渡:2s；变换:比例(0.1)；}[data-inviewport="scale-in"].is-inViewport {变换:比例(1)；}[data-inviewport="fade-rotate"] {过渡:2s；不透明度:0；}[data-inviewport="fade-rotate"].is-inViewport {变换:旋转(180度)；不透明度:1；}

向下滚动...<div data-inviewport="scale-in"></div><div data-inviewport="fade-rotate"></div>

观察者选项

要定义另一个父引用元素，请使用 Observable 选项对象中的 root 选项.根据您的喜好，还有 rootMargin 和超级有用的 threshold 选项

const obsOptions = {//默认为空(浏览器视口).设置特定的父元素:根:document.querySelector('#someSpecificParent'),//添加 40px 的内部边距"；观察者开始计算的区域:rootMargin: '40px',//默认值为 0.0 意味着只要 1 个像素在视口内就会调用回调.//设置为 1.0 以在 100% 的目标元素在视口内时触发回调，//或即:当目标元素的一半可见时为 0.5:阈值:0.5，};

查看另一个 使用 IntersectionObserver API 的 threshold 选项的有趣用例.

补充阅读:

• w3.org
• developer.mozilla.org
• caniuse.com IE 浏览器

<小时>

使用原生 IntersectionObserver API 是解决这个问题的最高效的方法.
如果您想了解我们过去如何解决类似需求，请参阅这个带有小型自定义插件的答案 作为示例.

I have added CSS animations to various div elements on my html page.But all the animations played at the same time & i can't see the animations at the bottom of the page.How can i make them play while i scroll down the page ?

解决方案

Using IntersectionObserver API

The IntersectionObserver API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Here's an example that triggers a classList toggle when an Element is in viewport:

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:
const ELs_inViewport = document.querySelectorAll('[data-inviewport]');
ELs_inViewport.forEach(EL => {
  Obs.observe(EL, obsOptions);
});

[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;
}

Scroll down...
<div data-inviewport="scale-in"></div>
<div data-inviewport="fade-rotate"></div>

Observer Options

To define another parent reference element use the root option inside the Observable options Object. At your disposition there's also rootMargin and the super useful threshold option

const obsOptions = {
  // Default is null (Browser viewport). Set a specific parent element:
  root: document.querySelector('#someSpecificParent'),
  // add 40px inner "margin" area at which the observer starts to calculate:
  rootMargin: '40px', 
  // Default is 0.0 meaning the callback is called as soon 1 pixel is inside the viewport.  
  // Set to 1.0 to trigger a callback when 100% of the target element is inside the viewport,   
  // or i.e: 0.5 when half of the target element is visible:
  threshold: 0.5, 
};

See another interesting use case that uses the IntersectionObserver API's threshold option.

Additional read:

• w3.org
• developer.mozilla.org
• caniuse.com IE browser

---

Using the native IntersectionObserver API is the most performant way to tackle this problem.
If you want an idea on how we tackled similar needs in the past see this answer with a small custom plugin as an example.

这篇关于CSS3-Animate 元素(如果在视口中可见)(页面滚动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！