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

　　最近有一个需求，是让我把一个效果优化一下。这个效果是页面加载完后，会有一个向上滑动的文字提示动画效果，如下图

　　注：下面的例子我都会附上完整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上是鼠标滚轮向下滚动时），超过一屏时，在显示向上滑的文字动画提示，

　　然后我就在上面 CSS3 动画效果的基础上结合 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;
                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>

　　承接上面，我理解错了需求，不是滚动的时候触发，而是页面加载完，就要根据页面内容是否超过一屏而判断是否显示向上滑动文字提示

　 一时，我真的有点蒙蔽，不知道应该怎么去实现。后来冥思苦想，突然茅塞顿开。

　　获取到body或者页面内容最外层div的可视区域高度，然后和设备可视区域高度做对比，

　　如果<=设备可视区域高度，就不显示向上滑动文字提示，反之显示。代码如下：

<!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>

有需要的朋友可以领取支付宝到店红包，能省一点是一点

发表于 2018-12-12 22:52 你不知道的巨蟹阅读(701) 评论(0) 编辑收藏举报

刷新页面返回顶部