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

Posted 2021-01-26 tu-0718

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了向上滑动的文字提示效果探索相关的知识，希望对你有一定的参考价值。

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

　　技术分享图片

　　注：下面的例子我都会附上完整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>

以上是关于向上滑动的文字提示效果探索的主要内容，如果未能解决你的问题，请参考以下文章

向上方向的jquery SlideToggle效果？

移动端的一个js效果：手滑动向上向下滚动li标签

h5向上滑动效果最后一页向上滑动时底部显示第一张怎么回事

css 向上滑动并向下滑动过渡效果

在一个片段中检测Recyclerview的上下滑动，我怎么做？

Android自定义View之上拉下拉列表头部元素跟随缩放平移效果的实现