javascript - 滚动显示图像:保持底部图像固定,直到完成视差覆盖,然后继续页面滚动
问题描述
英雄图像需要保持固定,直到视差完成,然后页面正常滚动。
这是我希望达到的效果:http ://www.bbdosf.com/
如您所见,背景并没有完美排列。 https://codepen.io/danielle93/pen/arrBqd
window.addEventListener('scroll', function (e) {
var scrolled = window.pageYOffset;
const background = document.querySelector('.cover');
background.style.top = - (scrolled * 10) + 'px';
});
body{
height: 1200px;
margin: 0;
}
.container{
height:100vh;
overflow: hidden;
}
div{
position: relative;
}
.cover{
z-index: 1;
position: absolute;
background: #fff;
opacity: .75;
height: 100%;
width: 100%;
}
.underneath{
z-index: 0;
width: 100%;
}
.knockout {
background: url(https://placekitten.com/1200);
background-size: cover;
background-repeat; no-repeat;
background-position: top;
background-attachment: fixed;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 300px;
font-family: arial, helvetica;
margin: 200px auto;
text-align: center;
}
<div class="container">
<div class="cover">
<div class="knockout"><a>meow.</a> </div>
</div>
<img class="underneath" src="https://placekitten.com/1200" alt="">
</div>
解决方案
推荐阅读
- regex - 正则表达式在字符串或数字之前获取值
- python - 我们可以在 python 中使用 pandas 集成 3D 图形,它会根据 excel 的变化自动更新吗?
- flutter - Flutter 1.22.6 - url_launcher - 发送 HTML 电子邮件
- reactjs - 帆布已经在使用中。必须先销毁 ID 为“0”的图表,然后才能重新使用画布。聊天.JS
- sql-server - 如何在我的 SSIS 包中实施此特定操作?
- android - 关于Android工具链的“颤振医生”错误
- nuxt.js - 如何将光滑的轮播添加到 Nuxt
- python - Python unittest:写,读,比较不起作用
- angular - 如何替换打字稿中字符串之间的空格?
- view - 如何从 SQL 视图创建棱镜模型