元素不會在用戶滾動時淡入
[英]Elements not fading in on user scroll
問題描述
試圖在用戶向下滾動頁面時使圖像元素淡出。 目前，圖像根本沒有顯示。 JS 有問題，但不知道如何排除故障。 HTML、CSS 和下面的 JS。 一雙新的眼睛可能最有幫助。 謝謝！
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);
})
還有我的 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>
和 CSS
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}
2 個解決方案
解決方案1
0 2020-08-04 21:37:38
您已在頁面上添加了 2 次observer.js 。 但是你的其他東西對我有用。
我沒有你的圖片和視頻，所以我刪除了這個例子的視頻，把圖片變成了一個紅色的方塊。
奇怪，但它在片段編輯器中工作，但不在視圖模式下！
無論如何，這在 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
您的代碼存在一些問題：
在您的 HTML 中，您兩次引用了您的js文件。
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
我還清理了您如何調用IntersectionObserver並傳遞回調/選項。
彈出的錯誤顯然是一個已知的“非”問題：
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.