scrollReveal实现网页重复动画效果

时间:2022-07-24
本文章向大家介绍scrollReveal实现网页重复动画效果，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!doctype html>
<html lang="zh-CN">

<head>
    <title>scrollReveal.js</title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .row {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            width: 500px;
            margin: auto;
        }

        .row div {
            margin: 20px;
            width: 100px;
            height: 300px;
            background: lightseagreen;
        }
    </style>
</head>

<body>
    <div class="row">
        <div data-scroll-reveal="enter top"></div>
        <div data-scroll-reveal="enter left"></div>
        <div data-scroll-reveal="enter right"></div>
        <div data-scroll-reveal="enter bottom"></div>
        <div data-scroll-reveal="enter top over 1s"></div>
        <div data-scroll-reveal="enter left after 1s"></div>
        <div data-scroll-reveal="enter right and move 50px"></div>
        <div data-scroll-reveal="enter bottom over 1s after 1s and move 50px"></div>
        <div data-scroll-reveal="enter top  and move 300px after 0.3s"></div>
        <div data-scroll-reveal="enter left over 1s and move 50px after 0.3s"></div>
        <div data-scroll-reveal="enter right over 1s after 1s and move 50px after 0.3s"></div>
        <div data-scroll-reveal="enter bottom over 1s after 1s and move 50px after 0.3s  over 1s"></div>
    </div>
</body>
<script src="https://cdn.bootcss.com/scrollReveal.js/0.1.1/scrollReveal.min.js"></script>
<script>
    (function () {
        window.scrollReveal = new scrollReveal({ reset: true });
    })();
</script>

</html>

随机文章
本站知识点必读
最近更新