如何解决我可以在选定元素转换时禁用转换属性:translate3d = (0px, (x)px, 0px)
如您所见,我正在通过使用 javascript 和 css 转换属性来移动不同的层。我正在寻找一种方法来选择某个图层,当它达到 transform: translate3d(0px,-1500px 0px)
中的特定数字时,您可以看到我 console.log()
正在transform: translate3d(0px,-1500px 0px)
显示我想要冻结和停止的属性的当前位置视差,我只是不知道在它达到 function castParallax() {
window.addEventListener("scroll",function (event) {
var top = this.pageYOffset;
var layers = document.getElementsByClassName("parallax");
var layer,speed,yPos;
for (var i = 0; i < layers.length; i++) {
layer = layers[i];
speed = layer.getAttribute("data-speed");
var yPos = -((top * speed) / 120);
layer.setAttribute(
"style","transform: translate3d(0px," + yPos + "px,0px)"
);
}
});
}
document.body.onload = castParallax();
window.addEventListener("scroll",function (event) {
const freeze = document.querySelector("#keyart-2");
let element = freeze.style.transform;
console.log(element);
// freeze parallax transform: translate3d(0px,-1500px,0px);
});
任何帮助将不胜感激
html {
background-color: linear-gradient(345deg,rgba(248,187,199,1) 17%,rgba(3,137,182,0.6895133053221288) 77%);
}
body {
margin: 0;
}
.keyart,.keyart_layer {
height: 1000px;
}
#parallax {
display: block;
background-color: linear-gradient(345deg,0.6895133053221288) 77%);
}
.keyart {
position: relative;
z-index: 10;
height: 100vh;
margin-bottom: 240vh;
}
.keyart_layer {
background-position: bottom center;
background-size: auto 100%;
background-repeat: repeat-x;
width: 100%;
position: absolute;
}
.keyart_layer.parallax {
position: fixed;
background-size: contain;
}
section {
display: block;
position: absolute;
top:200%;
left: 0;
right: 0;
height: 2000px;
}
.test {
background-color: #42600B !important;
height: 300vh;
color: white;
z-index: 20;
display: block;
top: 2300px;
}
#keyart-0 {
background-image: url('RDA-background.png');
top: 0;
height: 100vh;
z-index: 1;
background-position: 100% 10%;
background-size: cover !important;
background-repeat: no-repeat;
width: 100vw;
}
#keyart-1 {
background-image: url('/RDA-mid2.png');
z-index: 2;
background-size: 85% 85% cover !important;
background-position: 100%;
height: 1500px;
top: 1200px;
right: 0;
}
#keyart-2 {
background-image: url('/RDA-front.png');
top: 300px;
background-repeat: no-repeat;
z-index: 3;
height: 1600px;
background-position: 100%;
top: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="keyart" id="parallax">
<div class="logo" data-speed="100"><img src="/logo.png" alt="" ></div>
<div class="keyart_layer parallax backbackground" id="keyart-2" data-speed="75"></div>
<div class="keyart_layer parallax cloud" id="keyart-1" data-speed="300"></div>
<div class="keyart_layer parallax background" id="keyart-0" data-speed="0"></div>
</div>
<section class='test' data-speed="20">
<h1 style="text-align:center;font-family:'Lucida Sans',sans-serif;font-size: 45px;">RADIOACTIVE PR</h1>
<p style="text-align:center;font-family:'Lucida Sans',sans-serif;width:75%;margin:0 auto;">Lorem ipsum dolor,sit amet consectetur adipisicing elit. Quia,cum dicta nostrum,nulla,doloribus delectus sed perspiciatis reprehenderit soluta dolorem suscipit ullam.
Nulla dolor optio dicta in molestias rem voluptatum libero iste,dolores,commodi quod nesciunt dolorem aliquam facilis eos voluptatem facere quis nam blanditiis?
Quo dolor ipsum possimus neque.</p>
</section>
<script src="script.js"></script>
</body>
</html>
OnCreateView
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。