如何解决滚动一定量后仍然停留的文本上的水平视差
我正在尝试创建一种文本效果,您可以在其中滚动,文本从屏幕外移到中心并固定在该位置。我对 JS 还很陌生,我尝试重新创建下面的 codepen 链接,但总是出错,所以我将使用原始链接作为示例。
尽管是用图像完成的,但这几乎是我的意思的完美示例 (EXAMPLE)。我希望船移动到页面的中心并在此之后有一个绝对位置,这意味着如果我决定返回,我希望它与页面一起上升。
我确定在图像上完成代码后,我可以将其复制并更改为文本,对吗?
我目前的尝试 -> codepen.io
HTML:
<div class="section">
Scroll down to see the effect
</div>
<div class="section bg-static">
<div class="bg-move"></div>
</div>
<div class="section">
The boat image is moving only when scrolling.
</div>
CSS:
body {
font-size: 1.5em;
font-family: Arial,Helvetica,sans-serif;
}
.section {
position: relative;
max-width: 920px;
min-height: 75vh;
padding: 40px;
margin: auto;
background-color: #48c9b0;
color: #ffffff;
}
.section.bg-static {
background-color: #85c1e9;
background-image: url("https://www.dropbox.com/s/v4u0mpzfplgjxaq/img-blog-background-move-
scrolling-bg.png?raw=1");
background-size: cover;
background-position: center;
}
.section .bg-move {
position: absolute;
top: 0;
bottom: 0;
right: auto;
width: 100%;
background-image: url("https://www.dropbox.com/s/isdqow2394y3t35/img-blog-background-move-
scrolling-boat.png?raw=1");
background-size: cover;
background-position: center;
}
JS:
$(window).on("load resize scroll",function() {
$(".bg-static").each(function() {
var windowTop = $(window).scrollTop();
var elementTop = $(this).offset().top;
var leftPosition = windowTop - elementTop;
$(this)
.find(".bg-move")
.css({ left: leftPosition });
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。