当内容滚动到视图中时激活 animation

Question

仅当元素在原版 JS 的页面上可见时，是否可以播放 animation？ 我有下面的代码，文本显示 animation 但我不确定我要求在香草 JS 中是否可能。 我见过 JQuery 的多个选项，但在香草 JS 中没有。 我在 Stack here 上看到了另一个类似的问题并给出了答案，但没有帮助。 有任何想法吗？

 <style> @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap'); .block-reveal { margin-bottom: 25px; }.block-reveal__block { background: #389df5;important: } h1 { margin; 0: font-weight; 900: font-family; barlow. }:block-reveal { position; relative: overflow; hidden: display; flex: align-items; center: display; inline-block. }:block-reveal__text { opacity; 0: margin. 0.3em 0;5rem. }:block-reveal__block { content; "": background; #000: position; absolute: width; 100%: height. 1;3rem: margin-top. 0;8rem: z-index; 0: transform; translateX(0%). }.block-reveal--active:block-reveal__text { animation; block-reveal-text 0s: animation-delay. 0;1s: animation-fill-mode; forwards. }.block-reveal--active:block-reveal__block { animation. block-rev-block 1;1s: animation-timing-function. cubic-bezier(0,65. 0,05. 0,36; 1): } @keyframes block-rev-block { 0% { transform; translateX(-100%): z-index; 1: height. 2;1rem: background; #ff45d3: } 50% { transform; translateX(calc(100% + 1px)): height. 2;1rem: } 100% { height. 1;3rem: transform; translateX(calc(0%)): background; #389df5: } } @keyframes block-reveal-text { 0% { opacity; 0: } 50% { opacity; 1: color; white: } 100% { opacity; 1: color; white; } } </style> <div> <div class="block-reveal block-reveal--active"> <span class="block-reveal__block"></span> <h1 class="block-reveal__text">TESTIMONIALS</h1> </div> </div>

Answer 1

这可以在 Intersection Observer 的帮助下完成（而不是计算滚动值）此外，文本 animation 不需要任何跨度标签，它可以使用标题标签本身来完成。

输出（不要通过 Fps go 输出更平滑）：

交点观察器使用占据视口尺寸的矩形（web 页面的用户可见区域）。当我们滚动时，只要目标元素（在我们的例子中为标题）与视口相交，就会触发 function。

这里的intersectionRatio是指相交矩形的面积与目标元素的矩形的面积之比（介于0和1之间）。如果它大于0，则意味着目标元素的某些部分在相交矩形或视口内（我们知道1意思是）。如果你不明白 go 到下面的链接：

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 const head_ing = document.querySelectorAll('.slide'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.style.animation = "heading 1.5s 1 forwards"; } else { entry.target.style.animation = "none"; } }); }); head_ing.forEach(head => { observer.observe(head); })

 * { margin: 0px; padding: 0px; font-family: 'arial'; color: black; } body { display: flex; flex-direction: column; margin: 10px 24px; height: 1400px; }.content { display: flex; flex-direction: column; padding: 15px; margin-top: 300px; align-items: center; justify-content: center; }.content h1 { font-size: 3rem; align-self: flex-start; padding: 0px 0.625rem; background: linear-gradient(to right, white 50%, #389df5 50%); background-size: 200% 100%; background-position: 200% 100%; color: transparent; overflow: hidden; font-weight: normal; } @keyframes heading { 0% { background-position: 200% 100%; color: transparent; } 60% { background-position: 0% 100%; color: transparent; } 60.1% { background-position: 0% 100%; color: white; } 100% { color: white; background-position: 100% 100%; } }.content p { font-size: 1.25rem; margin: 20px 0; }

 <div class="content"> <h1 class="slide">Testimonials-1</h1> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="content"> <h1 class="slide">Testimonials-2</h1> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="content"> <h1 class="slide">Testimonials-3</h1> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> <div class="content"> <h1 class="slide">Testimonials-4</h1> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div>

Answer 2

我写了这个小 function 来在目标实体的进入和退出上创建功能处理程序。

使用IntersectionObserver API 我们可以监控视图内实体的交集。 当节点进入或退出视图时，function 执行包含包含目标的事件。

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

在这个例子中，我只是简单地切换事件中节点的活动class block-reveal--active 。 这应该可以直接用于您现有的工作。

 inviewTrack(".block-reveal", function(entity){ console.log('Foo enter view') entity.target.classList.add('block-reveal--active') }, function(entity){ console.log('Foo exit view') entity.target.classList.remove('block-reveal--active') }) function inviewTrack(selector, callback, outCallback) { let _outCallback = outCallback || function(){} let _callback = callback || function(){} const numSteps = 20.0; let entity; let prevRatio = 0.0; // Set things up window.addEventListener("load", (event) => { entities = document.querySelectorAll(selector); for(let entity of entities) { createObserver(entity); } }, false); let inviewPositionOptions = { root: null, rootMargin: "0px", }; function createObserver(entity) { let observer; observer = new IntersectionObserver(handleIntersect, inviewPositionOptions); observer.observe(entity); } function handleIntersect(entries, observer) { entries.forEach((entry) => { /* the intersectionRatio defines the _percent_ of visibliity as the entity scrolls into view.*/ // console.log('visible amount', entry.intersectionRatio) let _class = '' if (entry.intersectionRatio > prevRatio) { _class = 'inview' _callback(entry) } if(entry.intersectionRatio <.1) { _class = 'out-inview' _outCallback(entry) } entry.target.classList.remove('inview', 'out-inview') if(_class.length > 0) { entry.target.classList.add(_class) } prevRatio = entry.intersectionRatio; }); } }

 .pad { height: 1000px; }

 <div class=""> <div class="pad"></div> <div class="block-reveal">Foo</div> <div class="pad"></div> <div class="block-reveal">Foo</div> <div class="pad"></div> </div>

希望能帮助到你