时间戳

首页 > 解决方案 > 我想制作一个在滚动时触发 css 动画的网站，没有垂直或水平移动。这可能吗？

javascript - 我想制作一个在滚动时触发 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 动画，而无需任何移动。谢谢！

标签： javascripthtmlcss

解决方案

您应该尝试使用 wheel 事件并检查是否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>

推荐阅读