[Javascript] 動畫: ScrollReveal.js

日期：
ScrollReveal
https://github.com/scrollreveal/scrollreveal

ScrollReveal web
https://scrollrevealjs.org/

scrollReveal.js – 頁面滾動顯示動畫JS
http://www.dowebok.com/134.html

ScrollReveal.js 是一款頁面滾動顯示動畫的 JavaScript，能讓頁面更加有趣，更吸引用戶眼球，且動畫可以設定播放一次或無限次，也不依賴其他任何文件。雖然 ScrollReveal.js 不依賴 animate.css 但確是用 CSS3 創建的，故不支持 IE9 以下流覽器。


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>ScrollReveal.js Demo</title>

    <!--使用jquery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!--使用lodash-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

    <!--使用scrollreveal-->
    <script src="https://unpkg.com/scrollreveal"></script>

    <style type="text/css">

        .imgalbum {
            margin-right: 20px;
        }

        .imgalbum_list {
            width: 750px;
            margin: 0 auto;
            overflow: hidden;
        }

            .imgalbum_list ul {
                float: left;
                width: 250px;
                margin: 0px;
                padding: 0px;
                list-style-type: none;
            }

            .imgalbum_list li {
                margin: 20px 0px 20px 20px;
                padding: 0px;
            }

            .imgalbum_list img {
                width: 100%;
                border-radius: 5px;
                vertical-align: top;
            }

    </style>

    <script type="text/javascript">

        $(function () {

            //產生html, 塞到div imgalbum內
            let c = '<div class="imgalbum_list">';
            _.each(_.range(1, 3 + 1), function (kul) {
                c += '<ul>';
                _.each(_.range(1, 11 + 1), function (kli) {
                    c += '<li><img alt=""></li>';
                });
                c += '</ul>';
            });
            c += '</div>';
            $('#imgalbum').html(c);

            //各圖給予src與設定顯示動畫
            let i = -1;
            $('img').each(function () {
                i++;

                //o
                let o = this;

                //src, 使用 www.taiwan.net.tw 的風景圖
                $(o).attr('src', 'https://www.taiwan.net.tw/resources/images/Attractions/000' + (i + 1092) + '.jpg');

                //sample, 隨機挑選origin與duration
                let origin = _.sample(['top', 'bottom', 'left', 'right']);
                let duration = _.sample([500, 750, 1000, 1250, 1500]);

                //reveal
                ScrollReveal().reveal(o, {
                    distance: '50px',
                    origin: origin,
                    duration: duration,
                    //reset: true,
                });

            });

        });

    </script>

</head>

<body style="margin: 0px; padding: 0px; font-family:微軟正黑體;">

    <h1 style="font-size: 50px; text-align:center;">ScrollReveal.js Demo</h1>

    <p style="margin-bottom:20px; text-align:center;">捲動頁面測試圖片顯示效果</p>

    <div id="imgalbum" class="imgalbum"></div>

</body>
</html>


載入後畫面為︰



#ScrollReveal.js, Javascript, css3, animate, 動畫

留言

張貼留言