2. 程式人生 > >向上滑動的文字提示效果探索

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

阿新 • • 發佈：2018-12-12

 

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

 

　　

　　

 

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

 

相關推薦

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

  　　最近有一個需求，是讓我把一個效果優化一下。這個效果是頁面載入完後，會有一個向上滑動的文字提示動畫效果，如下圖   　　 　　   　　注：下面的例子我都會附上完整demo，以供有需要的小夥伴測試和借鑑   　   之前是後臺同

Input框內的提示文字變化效果

大致效果如下: 點選前,黑色的placeholder的效果(其實不是寫在placeholder裡的) 點選後效果,變小 上移 程式碼如下: Html: (都是重複的這裡就貼了其中一行的) <div> <div class="f

jquery滑鼠hover事件文字內容滑動遮罩效果

效果圖 => 第一步，首先引入jquery.min.js檔案 第二步，寫html程式碼 <div class="item-wrap"> <div class="item"> <ul>

文字框下拉提示效果（模擬百度效果提示框）

實現思想：當用戶在文字框中輸入時，可以利用ajax方式將文字框內內容傳給後臺的實現類，在實現類中經過處理後將產生的結果獲取過來在前臺呈現。具體操作可通過ajax將文字框的值通過ajax實現框架傳遞給系統後端獲得提示結果集，然後在文字框下側一下拉框的效果顯示出來供使用者選擇。

Android : 類似UC的效果：向上滑動位址列隱藏

思路 要求 ScrollView 巢狀 位址列 和 WebView 手指滑屏向下滾動（網頁向上），如果網頁有滾動條，首先把 位址列 滾動到消失，然後 WebView 才開始滾動； 手指滑屏向上滾動（網頁向下），如果位址列隱藏，那麼 位址列 首先慢慢顯

HTML文字滾動效果<marquee>

spa down 開始 一次 alternate 設置 離開 rec sta <marquee></marquee> 屬性：(1)behavior：設置滾動方式 　　　　　　a)alternate：在邊框之間來回滾動 　　　　　　b)Scroll：循

H5手指滑動切換卡片效果

span 篩選 none pagex chm borde mui eset end <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><

文字打字機效果，可換字體樣式

back cnblogs time rand 是個 child 好日子 blog var <div id="text">你好，歡迎光臨，今天是個好日子！</div> <script> $(function() {

帶有縮略圖和文字提示的輪播圖

val back count mat text2 width 是個 timer 做了 這也是輪播圖做了好久，還是剛進入前端崗位工作不久，自己空余時間寫的。 下面是代碼： <!DOCTYPE html><html lang="en"><hea

【Dojo 1.10】筆記4 文字動畫效果

req pla cdn .org script 如果 fun htm ready 這個筆記，僅僅演示dojo/fx模塊的slideTo()方法的簡單使用。 有關該模塊的用法，見API；有關Dojo的動畫、效果，見頁面 效果 和 動畫 1. 頁面組織 html部分同筆記3

vue-awesome-swiper - 基於vue實現h5滑動翻頁效果

return wheel res 初始化 回調 param get export tick 說到h5的翻頁，很定第一時間想到的是swiper。但是我當時想到的卻是，vue裏邊怎麽用swiper？！ 中國有句古話叫：天塌下來有個高的頂著。 在前端圈裏，總有前仆後繼的仁人誌

vue-awesome-swiper極速快三平臺出租 - 基於vue實現h5滑動翻頁效果

www. 準備 其中 use 代碼 dsl 有時 module 大神 中國極速快三平臺出租【大神源碼論壇】dsluntan.com 【布丁源碼論壇】budingbbs.com 企娥3393756370有句古話叫：天塌下來有個高的頂著。 在前端圈裏，總有前仆後繼的仁人誌士相

文本框內容提示效果

element blur js實現 () 文本框 ext 消失 由於 顯示 文本內容提示效果，未輸入內容時顯示文本內容，點擊輸入時內容後消失，由於是IE8，所以無法利用placeholder實現效果：<input placeholder="提示語"/>，利用j

小程序自定義組件的制作的使用（文字流動效果示例）

osi ner nbsp js代碼 height 隱藏 hat min options 組件wxml代碼 <scroll-view class="container"> <view class="scrolltxt"> <v

HTML編程之滾輪滑動監聽效果的實現

false eve function dom 滾輪 event als 瀏覽器 html 在前端頁面制作過程中，我們經常會發現有時候某些動作需要滾動滑輪來實現，那麽對於初學者來說可能不明白是如何實現的，對於這個問題，下面就來跟大家分析一下，如何用滾輪滑動監聽效果的實現。 源

C語言——文字閃爍效果

今天就寫一個簡單的文字閃爍效果，實現的效果比較簡單，但也是值得學習的！ #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<graphics.h> #include<conio.h>

簡單實現Activity退出時向下滑動退出的效果

先放圖（順便吐槽一下，ubuntu下想錄制gif還真是麻煩......）                              

js文字滾動效果實現

<!doctype html> <html> <head> <meta charset="utf-8"> <title>字幕橫向滾動</title> <script src="http://libs.baidu.com/jqu

css帶有文字提示的開關按鈕

程式碼展示 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>css編寫開關按鈕(帶文字提

PopupWindow+GridView設定網格邊框不能滑動，Spinner效果

如圖PopupWindow+GridView設定網格邊框不能滑動，Spinner效果 <net.xy.demo.widget.NoScrollGridView android:id="@+id/gridview" android:layout_width