滚动动画库scrollReveal

最新推荐文章于 2024-09-01 02:07:48 发布

weixin_40367377

最新推荐文章于 2024-09-01 02:07:48 发布

阅读量85

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_40367377/article/details/133622045

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="scrollreveal.min.js"></script>

</head>
<body>
<h1 class="aaa">111111111111</h1>
<h1>22222222222</h1>
<h1>333333333333</h1>
<h1>444444444</h1>
<h1>5555555555555</h1>
<h1>6666666666</h1>
<h1>777777777777</h1>
<h1>888888888</h1>
<h1>99999999999</h1>
<h1>10101010</h1>
<h1>111111111</h1>
<h1>121212121212121212</h1>
<h1>13131313131313</h1>
<h1>141414141414</h1>
<h1 class="aaa" data-scroll-reveal="">151515151515</h1>
<h1>16161616</h1>
<h1>1717171717</h1>
<h1>1818181818</h1>
<h1>1919191919</h1>
<h1>202022020220</h1>
<h1>2121212121</h1>
<h1>2121212121</h1>
<h1 class="aaa">2222222</h1>
<h1>23232323232323</h1>
<script>
    let sr = new ScrollReveal({
        reset: true,
        duration: 1000,
        delay: 0,
        // rotate: {x: 0, y: 0, z: 45},
        opacity: 0,
        scale: 1,
        distance: "100px",
        origin: "bottom",
        easing: "ease"
    });
    sr.reveal(".aaa");
</script>
</body>
</html>