練習視差滾動例子_byKL

wangbinke 發布于2019-08-21 15:26 / 1443人閱讀

摘要：練習視差滾動例子介紹一下視差指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。背景圖像會隨著頁面其余部分的滾動而移動。

練習視差滾動例子 介紹一下視差

指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。
通過前景與背景在場景移動時產生不同的視差，從而達到簡單的立體效果

說的簡單點就是網頁內的元素在滾動屏幕時發生的位置的變化，然而各個不同的元素位置變化的速度不同，導致網頁內的元素有層次錯落的錯覺,例如js的鼠標坐標移動實現

或者相對來說,一個動,另外一個不動,也能造成視覺落差的感覺,例如css的backgroud-attacthment實現

css的backgroud-attacthment實現

屬性:

background-attachment -- 定義背景圖片隨滾動軸的移動方式

取值: scroll | fixed | inherit
scroll: 默認值。背景圖像會隨著頁面其余部分的滾動而移動。
fixed: 當頁面的其余部分滾動時，背景圖像不會移動。
inherit: 規定應該從父元素繼承 background-attachment 屬性的設置。
初始值: scroll
繼承性: 否
適用于: 所有元素

效果:

例如,當向下滾動鼠標的時候,

背景圖像固定了位置(section1和2的背景圖會固定在當前瀏覽器顯示界面,并且section1會擋住section2,因為都在同一個位置,然后1比2的位置靠前),

然后頁面其他部分就會向上移動(所謂前景,就是section1和2的div dom元素),

向上移動的時候,section2的dom會跟著進入當前頁面,所以會慢慢打開section2的畫面,

所以看起來背景圖被固定住,這樣就會造成了一個視覺落差.

代碼:




    
    視差滾動
    
    



    啊啊啊啊


    噢噢噢噢

javascript實現(鼠標移動)

效果:

通過移動鼠標,不斷改變div的位置值來實現移動,并且通過2個不一樣的值的變化來實現落差,從而實現視差效果

html部分




    
    Title

css部分

        body{
            /*為了顯示需要*/
            width: 100%;
            /*因為瀏覽器的高度獲取會出現兼容問題,所以為了方便測試,固定一個值*/
            height: 800px;
            border: solid 1px blue;
        }
        #div1{
            /*為了顯示需要*/
            width: 100px;
            height: 100px;
            border: solid 1px black;
            position: absolute;
        }
        #div2{
            /*為了顯示需要*/
            width: 200px;
            height: 200px;
            border: solid 1px red;
            position: absolute;
        }

js部分

    //獲取兩個div
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    //獲取瀏覽器的body的寬和高,并且一般來說,body的大小就是瀏覽器顯示界面的大小
    var _w = document.body.clientWidth;
    var _h = document.body.clientHeight;
    //初始化兩個div的起始位置為瀏覽器界面的一半的位置
    div1.style.left = _w/2 + "px";
    div1.style.top = _h/2 + "px";
    div2.style.left = _w/2 + "px";
    div2.style.top = _h/2 + "px";


    var ex,ey, ex2,ey2;
    //綁定鼠標移動事件onmousemove,只要鼠標移動就會不斷接受事件
    document.onmousemove = function(e){
        //div1移動的距離值
        //除以5或者10是為了避免數值太大移出屏幕顯示,并且2個不同的數字能夠看出區別
        ex = e.clientX / 10; //鼠標當前的x坐標除以10
        ey = e.clientY / 10; //鼠標當前的y坐標除以10

        //div2移動的距離值
        ex2 = e.clientX / 5; //同上,除以5是為了看出區別
        ey2 = e.clientY / 5;

        //div1的left值等于body的一半加上div1的移動值,同類推top值
        //這樣就是從body的一半(屏幕中間)開始移動
        div1.style.left = _w/2 + ex +"px";
        div1.style.top = _h/2 + ey + "px";

        div2.style.left = _w/2 + ex2 + "px";
        div2.style.top = _h/2 + ey2 + "px";
    }

參考引用:

視差滾動(Parallax Scrolling)效果的原理和實現

云服務器 GPU云服務器滾動視差視差滾動視差滾動效果 _byKL

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88181.html

練習倒計時例子_v1.0-byKL

摘要：練習倒計時例子倒計時就是時間一秒秒的倒數一般都是目標時間跟現在時間進行比較部分結果部分對象的使用對象基于年月日世界標準時間起的毫秒數返回的是毫秒數傳入的參數表示日期的字符串值。練習倒計時例子倒計時就是時間一秒秒的倒數,一般都是目標時間跟現在時間進行比較 html部分 set 結果: js部分 Date對象的使用 Date 對象基于1970年1月1日（世...

heartFollower 2019-08-21 15:27 評論0 收藏0
用 Stellar.js 制作視差滾動效果

摘要：近些年討論得很熱烈的設計趨勢是視覺差滾動效果。在本教程中，我會介紹視覺差滾動和用插件來制作視覺差滾動效果。如果你想使用，可以通過以下命令下載好后，在頁面中引用完成后，開始給頁面添加視覺差滾動效果。在一個頁面運用創建一個視差滾動效果的示例。近些年討論得很熱烈的設計趨勢是視覺差滾動效果。不管你喜不喜歡，很多網站都在用它。在本教程中，我會介紹視覺差滾動和用jQuery插件Stellar.j...

Lin_R 2019-08-21 10:26 評論0 收藏0
es6學習筆記-let,const和塊級作用域_v1.0_byKL

摘要：考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。函數聲明語句函數表達式循環循環還有一個特別之處，就是循環語句部分是一個父作用域，而循環體內部是一個單獨的子作用域。聲明一個只讀的常量。 es6學習筆記-let,const和塊級作用域_v1.0 塊級作用域 javascript 原來是沒有塊級作用域的,只有全局作用域和函數作用域例子1 因為沒有塊級作用域,所以每次的i都是一...

Youngdze 2019-08-20 14:49 評論0 收藏0