如何使用 JavaScript 或 jQuery 在进入视口时加载内容？

Question

我使用一个函数为 h1 元素制作了一个惊人的动画，现在我希望当用户向下滚动时 h1 元素进入视口时发生动画。

当用户向下滚动页面时，动画已经发生。

我希望动画仅在 h1 元素进入视口时发生。

 var textWrapper = document.querySelector(".text"); textWrapper.innerHTML = textWrapper.textContent.replace( /\\S/g, "<span class='letter'>$&</span>" ); anime.timeline().add({ targets: ".text .letter", translateY: [100, 0], translateZ: 0, opacity: [0, 1], easing: "easeOutExpo", duration: 2000, delay: (el, i) => 60 * i, });

 * { margin: 0; padding: 0; box-sizing: border-box; } .text .letter { display: inline-block; line-height: 1em; } .page1{ display: flex; justify-content: center; align-items: center; height: 100vh; } .page2{ display: flex; justify-content: center; align-items: center; height: 100vh; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LNPD02</title> <link rel="stylesheet" href="styles.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> </head> <body> <div class="page1"> <h1>Scroll down</h1> </div> <div class="page2"> <h1 class="text">Animated Text</h1> </div> </body> </html>

Answer 1

当特定元素进入视口时，Javascript 的 IntersectionObserver 会提醒您。

这段代码完成了问题中的代码所做的事情，除了在设置动画之前等待文本进入视口。

 var textWrapper = document.querySelector(".text"); textWrapper.innerHTML = textWrapper.textContent.replace( /\\S/g, "<span class='letter'>$&</span>" ); let callback = (entries, observer) => { entries.forEach(entry => { // See MDN for more detail on IntersectionObserver // Each entry describes an intersection change for one observed // target element: // entry.boundingClientRect // entry.intersectionRatio // entry.intersectionRect // entry.isIntersecting // entry.rootBounds // entry.target // entry.time if (entry.isIntersecting) { anime.timeline().add({ targets: ".text .letter", translateY: [100, 0], translateZ: 0, opacity: [0, 1], easing: "easeOutExpo", duration: 2000, delay: (el, i) => 60 * i, }); } }); }; let observer = new IntersectionObserver(callback); observer.observe(textWrapper);

 * { margin: 0; padding: 0; box-sizing: border-box; } .text .letter { display: inline-block; line-height: 1em; } .page1 { display: flex; justify-content: center; align-items: center; height: 100vh; } .page2 { display: flex; justify-content: center; align-items: center; height: 100vh; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LNPD02</title> <link rel="stylesheet" href="styles.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> </head> <body> <div class="page1"> <h1>Scroll down</h1> </div> <div class="page2"> <h1 class="text">Animated Text</h1> </div> </body> </html>

如何使用 JavaScript 或 jQuery 在进入视口时加载内容？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-18 19:41:14

如何使用 JavaScript 或 jQuery 在进入视口时加载内容？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-18 19:41:14

解决方案1
0 已采纳 2021-07-18 19:41:14