gpt4 book ai didi

javascript - 为什么在 javascript 中滚动时我的文本不移动?

转载 作者:行者123 更新时间:2023-11-29 22:46:24 25 4
gpt4 key购买 nike

<分区>

我正在尝试在卷轴上创建视差效果。 “Po Ta To”必须以不同的速度滚动。但是它不起作用。

window.addEventListener("scroll", function(e) {

const target = document.querySelectorAll('.parallax');
var index = 0,
length = target.length;

for (index; index < length; index++) {
var pos = window.pageYOffset * target[index].dataset.speed;
target[index].style.transform = 'translate3d(0px, ' + pos + 'px, 0px)';
}
});
* {
margin: 0px;
padding: 0px;
width: 100%;
font-family: Montserrat;
height: 200vh;
}

section {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

ul {
height: 30vh;
text-align: center;
white-space: nowrap;
}

li {
font-size: 100px;
font-weight: bold;
text-align: center;
display: inline;
}
<section>
<ul>
<li class="parallax" data-speed="2">PO</li>
<li class="parallax" data-speed="1.5">TA</li>
<li class="parallax" data-speed="2.3">TO</li>
</ul>
</section>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com