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

标签 javascript html css

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

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

<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/

相关文章:

javascript - 让我的时钟动画提前一秒/分钟触发

html - 为什么背景颜色 :attribute break when previous line contains comments?

html - 创建如下布局的最佳方法?

javascript - 如果宽度 > 420,悬停时移动文本

javascript - 如何将所选属性添加到 Meteor Blaze 中的下拉选项标签?

javascript - 如何缩放 anime.js 运动路径函数的 SVG 路径?

javascript - 可重用的 d3.js 组件和继承

html - CSS-方形div的响应式全宽网格

html - 视频作为背景视差 CSS

javascript - jquery ui 可排序元素在框外时显示