我见过多个具有独特滚动功能的网站,但令我印象深刻的是这个只在滚动时触发动画的网站,我有什么办法可以做到这一点吗?
我已经查找了几种制作独特滚动效果的方法,但没有一种能满足我的需要。
<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/