gpt4 book ai didi

javascript - 我想制作一个在滚动时触发 css 动画的网站,没有垂直或水平移动。这可能吗?

转载 作者:行者123 更新时间:2023-11-28 16:17:58 24 4
gpt4 key购买 nike

我见过多个具有独特滚动功能的网站,但令我印象深刻的是这个只在滚动时触发动画的网站,我有什么办法可以做到这一点吗?

我已经查找了几种制作独特滚动效果的方法,但没有一种能满足我的需要。

<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title></title>
</head>

<body>
<div class="center">
<a class="elementA">A</a>
<a id="elementN">n</a>
<a id="elementD">d</a>
<a id="elementR">r</a>
<a id="elementE">e</a>
<a class="elementW">w</a>
<a class="elementP">P</a>
<a class="elementAA">a</a>
<a class="elementNdrew">n</a>
</div>

</body>

</html>

我只是想做一个网站,当我滚动时,它会触发一些 CSS 动画,没有任何移动。谢谢!

最佳答案

你应该尝试使用 wheel envent 并检查 e.deltaY > 0

window.addEventListener('wheel', function(e) {

if (e.deltaY > 0) {
console.log('scrolling down');
document.getElementById('status').innerHTML += "<p><strong>hello world</strong></p>";

}
});
<div id="status"></div>

关于javascript - 我想制作一个在滚动时触发 css 动画的网站,没有垂直或水平移动。这可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56479261/

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