向上滑動的文字提示效果探索

時間  2019-11-08
標籤 向上 滑動 文字 提示 效果 探索 简体版
原文   原文鏈接

 

　　最近有一個需求，是讓我把一個效果優化一下。這個效果是頁面加載完後，會有一個向上滑動的文字提示動畫效果，以下圖html

 

　　

　　

　　注：下面的例子我都會附上完整demo，以供有須要的小夥伴測試和借鑑測試

 

　   以前是後臺同事用 JS 實現的，代碼以下：優化

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .tips {
                position: fixed;
                bottom: 0;
                z-index: 999;
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #fff;
                font-size: 16px;
                text-align: center;
                background-color: #000;
            }
        </style>
    </head>

    <body>
        <div class="tips">
            ↑↑↑ 向上滑動熒幕查看更多支付通道 ↑↑↑
        </div>

        <script>
            var initOpacity = 1,
                positionBottom = 0,
                tips = document.getElementsByClassName("tips")[0];

            var fadeOutIntel = setInterval(function() {
                initOpacity = (initOpacity - 0.02).toFixed(2);
                positionBottom += 0.05;
                if(positionBottom <= 4) {
                    tips.style.bottom = positionBottom.toString() + "rem";
                }
                if(initOpacity <= 0) {
                    tips.style.display = "none";
                    clearInterval(fadeOutIntel);
                }
                //console.log(initOpacity);
                tips.style.opacity = initOpacity;
            }, 30);
        </script>
    </body>

</html>

 

　　而後，我用純 CSS3 作了優化，代碼以下：動畫

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .tips {
                position: fixed;
                bottom: 0;
                z-index: 999;
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #fff;
                font-size: 16px;
                text-align: center;
                background-color: #000;
                opacity: 0;
                animation: tips_animate 2s linear;                
            }
            
            
        
            @keyframes tips_animate {
                0%
                 {
                    opacity: 0;
                    transform: translateY(0);
                }
                20% {
                    opacity: 0.2;
                    transform: translateY(-10px);
                }
                40% {
                    opacity: 0.4;
                    transform: translateY(-20px);
                }
                60% {
                    opacity: 0.6;
                    transform: translateY(-30px);
                }
                80% {
                    opacity: 0.8;
                    transform: translateY(-40px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(-50px);
                    display: none;
                }
            }
        </style>
    </head>

    <body>
        <div class="tips">
            ↑↑↑ 向上滑動熒幕查看更多支付通道 ↑↑↑
        </div>

        <script>
        
        </script>
    </body>

</html>

 

　　後來有一個需求是，當用戶向上滑動（PC上是鼠標滾輪向下滾動時），超過一屏時，在顯示向上滑的文字動畫提示，spa

　　而後我就在上面 CSS3 動畫效果的基礎上結合 JS 進行了修改，代碼以下：scala

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .tips {
                position: fixed;
                bottom: 0;
                z-index: 999;
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #fff;
                font-size: 16px;
                text-align: center;
                background-color: #000;
                opacity: 0;
                animation: tips_animate 2s linear;
            }
            
            .tips-none {
                display: none;
            }
            
            @keyframes tips_animate {
                0% {
                    opacity: 0;
                    transform: translateY(500px);
                }
                20% {
                    opacity: 0.2;
                    transform: translateY(-10px);
                }
                40% {
                    opacity: 0.4;
                    transform: translateY(-20px);
                }
                60% {
                    opacity: 0.6;
                    transform: translateY(-30px);
                }
                80% {
                    opacity: 0.8;
                    transform: translateY(-40px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(-50px);
                    display: none;
                }
            }
        </style>
    </head>

    <body>
        <div class="tips-none" id="tips">
            ↑↑↑ 向上滑動熒幕查看更多支付通道 ↑↑↑
        </div>

        <div class="">
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打
            發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第
            三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方
            的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩 打發打發打發第三方第三方的所得稅範
            德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩 打發打發打發第三方第三方的所得
            稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩 打發打發打發第三方第三方的所得稅範
            德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第
            三方的所得稅范德薩 打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發
            打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩 
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
            打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅範
        </div>
        </div>

        <script>
            window.onscroll = function() {
                var tips = document.getElementById("tips");
                //  獲取可視區域高度
                var tips_client = document.documentElement.clientHeight || document.body.clientHeight;
                //  獲取滾動的距離
                var tips_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                if(tips_scrollTop < tips_client) {
                    tips.className = "tips-none";
                } else {
                    tips.className = "tips";
                }

            }
        </script>
    </body>

</html>

 

　　承接上面，我理解錯了需求，不是滾動的時候觸發，而是頁面加載完，就要根據頁面內容是否超過一屏而判斷是否顯示向上滑動文字提示code

　   一時，我真的有點矇蔽，不知道應該怎麼去實現。後來左思右想，忽然茅塞頓開。orm

　　獲取到body或者頁面內容最外層div的可視區域高度，而後和設備可視區域高度作對比，htm

　　若是<=設備可視區域高度，就不顯示向上滑動文字提示，反之顯示。代碼以下：blog

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .tips {
                position: fixed;
                bottom: 0;
                z-index: 999;
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #fff;
                font-size: 16px;
                text-align: center;
                background-color: #000;
                opacity: 0;
                animation: tips_animate 2s linear;
            }
            
            .tips-none {
                display: none;
            }
            
            @keyframes tips_animate {
                0% {
                    opacity: 0;
                    transform: translateY(500px);
                }
                20% {
                    opacity: 0.2;
                    transform: translateY(-10px);
                }
                40% {
                    opacity: 0.4;
                    transform: translateY(-20px);
                }
                60% {
                    opacity: 0.6;
                    transform: translateY(-30px);
                }
                80% {
                    opacity: 0.8;
                    transform: translateY(-40px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(-50px);
                    display: none;
                }
            }
        </style>
    </head>

    <body id="main">
        <div class="tips-none" id="tips">
            ↑↑↑ 向上滑動熒幕查看更多支付通道 ↑↑↑
        </div>

        <div class="">
            
            <!-- 這裏註釋的文字用來測試頁面顯示內容沒有超過一屏時，不顯示向上滑的文字提示效果 -->
            
            <!--打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方
            第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩-->
            
            
            <!-- 用來測試頁面內容超過一屏幕時，顯示向上滑動的文字提示效果 -->
                打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方
            第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩
                打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方
            第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩
                打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方
            第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩
                打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方
            第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩
                打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發
            第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩打發打發打發第三方
            第三方的所得稅范德薩打發打發打發第三方第三方的所得稅范德薩
            

        </div>

        <script>
            onscroll();

            function onscroll() {
                var tips = document.getElementById("tips");
                //  獲取到body的可視區域高度
                var main = document.getElementById("main").clientHeight;
                //  獲取可視區域高度
                var tips_client = document.documentElement.clientHeight || document.body.clientHeight;

                if(main <= tips_client) {
                    tips.className = "tips-none";
                } else {
                    tips.className = "tips";
                }

            }
        </script>
    </body>

</html>

 

　　附：上面用純 CSS3 實現的向上滑動顯示文字提示的動畫效果，稍微修改以後，增長了回彈效果

　　

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .tips {
                position: fixed;
                bottom: 0;
                z-index: 999;
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #fff;
                font-size: 16px;
                text-align: center;
                background-color: #000;
                opacity: 0;
                animation: tips_animate 3s linear;                
            }
            
        
            @keyframes tips_animate {
                0%
                 {
                    opacity: 0;
                    transform: translateY(0);
                }
                10% {
                    opacity: 0.2;
                    transform: translateY(-10px);
                }
                20% {
                    opacity: 0.4;
                    transform: translateY(-20px);
                }
                30% {
                    opacity: 0.6;
                    transform: translateY(-30px);
                }
                40% {
                    opacity: 0.8;
                    transform: translateY(-40px);
                }
                50% {
                    opacity: 1;
                    transform: translateY(-50px);
                    display: none;
                }
            }
        </style>
    </head>

    <body>
        <div class="tips">
            ↑↑↑ 向上滑動熒幕查看更多支付通道 ↑↑↑
        </div>

        <script>
            
        </script>
    </body>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程