ScrollReveal2

有什么技术性的问题 欢迎大家留言 !

< ! ---------- HTML ------------ >

<ul>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
    <li class="sr"></li>
</ul>

< ! --------- Style -------------- >

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        list-style-type: none;
    }

    body {
        padding-top: 100px;
        background-color: #000;
    }

    ul {
        width: 980px;
        margin: 0 auto;
    }

    ul .sr {
        float: left;
        width: 50px;
        height: 50px;
        margin: 10px;
    }
</style>

< ! --------- JavaScript ------- >

<script>
    window.onload = function () {

        // 设置参数
        var config = {
            reset: true, // 滚动鼠标时，动画开关
            origin: 'left', // 动画开始的方向
            duration: 1000, // 动画持续时间
            delay: 0, // 延迟
            rotate: {x: 0, y: 0, z: 0}, // 过度到0的初始角度
            opacity: 0, // 初始透明度
            scale: 0.2, //缩放
            easing: 'linear', // 缓动'ease', 'ease-in-out'，'linear'
        }

        var lis = document.getElementsByTagName('li');
        var r = 0, g = 0, b = 0;

        function randomColor() {
            for (var i = 0; i < lis.length; i++) {
                r = parseInt(Math.random() * 255);
                g = parseInt(Math.random() * 240);
                b = parseInt(Math.random() * 245);
                lis[i].style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
            }
        }
        // 引用
        window.sr = ScrollReveal();
        // 后面的50那个参数是代表每隔50毫米出现一个li,最后一个参数是调用随机颜色函数
        sr.reveal('.sr', config, 50, randomColor());
    }
</script>

< ! --------- 效果展示 ---------- >

• 这个小案例是结合前面给大家分享的那个随机颜色一起实现的

**scrollRevea 案例2**