我希望页面内容在向下滚动时淡入和在向上滚动时淡出,我使用了网站说明 ( https://www.superhi.com/blog/how-to-add-web-design-elements-that-fade-in-and-out-on-scroll ) 并尝试对其进行一些更改以适合我的元素,但它不起作用。我正在使用 Dreamweaver。
<script src="jquery-3.4.1.min.js"></script>
<script src="fadein.js"></script>
<script>
$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $(".fade")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible")
} else {
$(tag).removeClass("visible")
}
}
})
</script>
<div id="content" style="margin:-8px;">
<img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image">
<img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line">
<div id="mid">
<h1 class="fade">Whether youre in it for...</h1>
<img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made">
<p class="fade">The food and drink,</p>
<img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table">
<p class="fade">Getting some work done,</p>
<img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee">
<p class="fade">The people,</p>
<img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee">
<p class="fade">Or a good book,</p>
<h2 class="fade">We got you covered!</h2>
</div>
<img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons">
<ul>
<li class="fade">Sustainable high quality coffee</li>
<li class="fade">Comfortable seating</li>
<li class="fade">A variety of table layouts to suit your needs</li>
<li class="fade">High speed internet </li>
<li class="fade">Charging ports provided</li>
</ul>
</div>
.fade {
opacity: 0;
}
.fade.visible {
opacity: 1;
}
当我使用它时,页面只是正常显示所有内容,没有任何内容消失或不可见。
最佳答案
代码有几个问题:
- 您指向 jQuery 的链接并未指向实际的 jQuery。我看了教程,是的,他们就是这么用的,但是你需要使用 CDN 链接:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-
fade.js
只是他们用来放置script
的名称你包括在内。你不一定需要那个。 - 您需要添加
transition
属性(property)给.fade
类,否则,您不会看到它淡入或淡出,它只会从 0opacity
切换。到 1(或全部)。
$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height() - 20
var tags = $(".fade")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible")
} else {
$(tag).removeClass("visible")
}
}
});
.fade {
opacity: 0;
transition: all .3s ease;
}
.fade.visible {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" style="margin:-8px;">
<img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image">
<img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line">
<div id="mid">
<h1 class="fade">Whether youre in it for...</h1>
<img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made">
<p class="fade">The food and drink,</p>
<img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table">
<p class="fade">Getting some work done,</p>
<img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee">
<p class="fade">The people,</p>
<img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee">
<p class="fade">Or a good book,</p>
<h2 class="fade">We got you covered!</h2>
</div>
<img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons">
<ul>
<li class="fade">Sustainable high quality coffee</li>
<li class="fade">Comfortable seating</li>
<li class="fade">A variety of table layouts to suit your needs</li>
<li class="fade">High speed internet </li>
<li class="fade">Charging ports provided</li>
</ul>
</div>
这是一个可以玩的 fiddle : https://jsfiddle.net/t4Ljnk7v/1/
我更新了 pageBottom
变量,这样您就可以在到达底部时看到底部元素淡入。
关于javascript - 滚动时尝试使用 jquery 使内容淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56082795/