码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2018-12-12 23:43:36      阅读：316      评论：0      收藏：0      [点我收藏+]

标签：str   第三方   16px   动画   结合   element   tran   屏幕   rip   

 

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

 

　　技术分享图片

　　

 

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

 

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

标签：str   第三方   16px   动画   结合   element   tran   屏幕   rip   

原文地址：https://www.cnblogs.com/tu-0718/p/10111477.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！