Question

我试图弄清楚如何在带有两个框的html部分中使用Laxxx.js。这是我的代码。

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 https://github.com/alexfoxy/laxxx

的github文档

Answer 1

我认为您只需要添加lax类

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

如何使用Laxxx.js动画框？

1 个答案: