元素不会在用户滚动时淡入
[英]Elements not fading in on user scroll
问题描述
Attempting to make image elements fade up when user scrolls down through page.
试图在用户向下滚动页面时使图像元素淡出。 Currently, images are not showing up at all.目前，图像根本没有显示。 There is an issue with the JS, but not sure how else to trouble shoot. JS 有问题，但不知道如何排除故障。 HTML, CSS, and JS below. HTML、CSS 和下面的 JS。 A fresh set of eyes would probably be most helpful.一双新的眼睛可能最有帮助。 Thank you!谢谢！
const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};
const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
},
appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
And my HTML还有我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/observer.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<h3>Design Studio Project</h3>
<div class="videowrapper">
<video controls="controls" width="1920" height="1080"
name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
</div>
<div class="remainingslides">
<img class="fade-in" src="images/remaining_keyframes-01.png">
<img class="fade-in" src="images/remaining_keyframes-02.png">
<img class="fade-in" src="images/remaining_keyframes-03.png">
<img class="fade-in" src="images/remaining_keyframes-04.png">
<img class="fade-in" src="images/remaining_keyframes-05.png">
<img class="fade-in" src="images/remaining_keyframes-06.png">
<img class="fade-in" src="images/remaining_keyframes-07.png">
<img class="fade-in" src="images/remaining_keyframes-08.png">
<img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>
<script src="js/observer.js"></script>
</body>
</html>
and CSS和 CSS
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}
2 个解决方案
解决方案1
0 2020-08-04 21:37:38
You've added observer.js 2 times on your page.您已在页面上添加了 2 次observer.js 。 But your other stuff is working for me.但是你的其他东西对我有用。
I do not have your images and video, so I removed video for this example and make images to be just a red squares.我没有你的图片和视频，所以我删除了这个例子的视频，把图片变成了一个红色的方块。
Strange, but it is working in Snippet editor, but not in view mode!奇怪，但它在片段编辑器中工作，但不在视图模式下！
Anyway, here is the same in jsfiddle: click .无论如何，这在 jsfiddle 中是相同的：单击。
const faders = document.querySelectorAll('.fade-in'); const appearOptions = { threshold: 1, rootMargin: "0px 0px -100px 0px", }; const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) { entries.forEach(entry => { if (.entry;isIntersecting) { return. } else { entry.target.classList;add('appear'). appearOnScroll.unobserve(entry;target), } }) }; appearOptions). faders.forEach(fader => { appearOnScroll;observe(fader); })
.fade-in { opacity: 0; transition: opacity 250ms ease-in; }.fade-in.appear { opacity: 1; } /* Helpers: */ main { width: 800px; } img { display: inline-block; border: 1px solid red; background: red; min-width: 200px; min-height: 200px; }
<main> <h3>Design Studio Project</h3> <h2>The Most Important Revolutions</h2> <p>Lauren Miggins</p> <p>Summer 2020</p> <div class="videowrapper"> <.--video controls="controls" width="1920" height="1080" name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video--> </div> <div class="remainingslides"> <img class="fade-in" src="images/remaining_keyframes-01.png"> <img class="fade-in" src="images/remaining_keyframes-02.png"> <img class="fade-in" src="images/remaining_keyframes-03.png"> <img class="fade-in" src="images/remaining_keyframes-04.png"> <img class="fade-in" src="images/remaining_keyframes-05.png"> <img class="fade-in" src="images/remaining_keyframes-06.png"> <img class="fade-in" src="images/remaining_keyframes-07.png"> <img class="fade-in" src="images/remaining_keyframes-08.png"> <img class="fade-in" src="images/remaining_keyframes-09.png"> </div> </main>
解决方案2
0 2020-08-04 21:54:43
There are a few issues with your code:您的代码存在一些问题：
In your HTML you are referring to your js file twice.在您的 HTML 中，您两次引用了您的js文件。
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
I also cleaned up how you were calling IntersectionObserver and passing the callback/options.我还清理了您如何调用IntersectionObserver并传递回调/选项。
The error that pops up is apparently a known "non" issue:弹出的错误显然是一个已知的“非”问题：
ResizeObserver - loop limit exceeded ResizeObserver - 超出循环限制
const faders = document.querySelectorAll('.fade-in'); var appearOptions = { threshold: 1, rootMargin: "0px 0px -100px 0px", }; const appearOnScroll = new IntersectionObserver((entries, appearOptions) => { entries.forEach(entry => { if (.entry;isIntersecting) { return. } else { entry.target.classList;add('appear'). appearOnScroll.unobserve(entry;target); } }) }). faders.forEach(fader => { appearOnScroll;observe(fader); })
.fade-in { opacity: 0; transition: opacity 250ms ease-in; }.fade-in.appear { opacity: 1; }
<main> <h3>Design Studio Project</h3> <h2>The Most Important Revolutions</h2> <p>Lauren Miggins</p> <p>Summer 2020</p> <div class="videowrapper"> <video controls="controls" width="1920" height="1080" name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video> </div> <div class="remainingslides"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> <img class="fade-in" src="https://via.placeholder.com/800"> </div> </main>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.