如何使用 Laxxx.js 为盒子设置动画？

Question

我正在尝试弄清楚如何将 Laxxx.js 与带有两个框的 html 部分一起使用。这是我的代码。

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


    <title>Sidebar Navigation</title>
</head>

<body>
<section id="about">
        <div class="page-num">
            <h1>01</h1>
        </div>
        <div class="left">
            <div class="box1"></div>
            <div class="box2" data-lax-preset="spin-180"></div>
        </div>
        <div class="right">
            <h1>About</h1>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam alias recusandae tenetur impedit similique dolore, rem molestias illo incidunt ipsum ipsa omnis odit, placeat tempore sapiente aliquid unde. Quaerat, architecto ex sit possimus commodi distinctio enim. Maxime, odit iste animi ut et iure, eius error.</p>
        </div>
    </section>

   <script src="node_modules/lax.js/lib/lax.min.js"></script>
        <script>
        window.onload = function() {
            lax.setup() // init

            document.addEventListener('scroll', function(e){
                lax.update(window.scrollY)
            },false)
            console.log('hey');

        }
        </script>
</body>

</html>

scss

#about {
  background: black;
  height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  position:relative;
  overflow:hidden;


  .left {
    width: 40%;
    position:relative;

      .box1{
        position:absolute;
        top: 20% ;
        left:20%;
        z-index:0;
        width:400px;
        height:400px;
        border:30px solid yellow;
        overflow:hidden;
        transform: rotateZ(65deg);
      }
      .box2{
        position:absolute;
        top: 30%;
        left:10%;
        z-index:0;
        width:300px;
        height:300px;
        border:30px solid red;
        overflow:hidden;

      }
  }
  .right {
    width: 50%;
    padding: 10vh 20vh;
    // position:relative;
    h1 {
      font-size: 3vw;
      margin: 0;
    }
    p {
      font-size: 1.2rem;
      line-height: 28px;
    }
  }
}

我想我已经按照文档中的所有步骤进行了操作，但是我在滚动时没有发现任何问题，在控制台上也没有错误。

这里是 laxxx.js 的 github 文档https://github.com/alexfoxy/laxxx

Answer 1

我认为你只需要添加 lax 类

<div class="lax box2" data-lax-preset="spin-180"></div>