仿github404頁面特效

閱讀原文

---

  偶然看到github的404頁面，沒想到github的404頁面也是作的頗有心，就試着找了下源碼，打算仿一下這個效果。
  這個效果看上去是3d的，其實沒有用到css3裏邊的任何一個與3d有關的屬性，這個頁面應該在很早以前就被作出來了，可能那時的css3兼容性還沒如今這麼好。這個頁面是借用圖片錯位，以及圖片運動速度不一致，給人一種立體感。下邊先看下html結構：

<div id="wrapper">
    <div id="field">
        <img class="img_bg" src="field.jpg">
    </div>
    <div id="pictures">
        <img class="img_text" src="text.png" alt="This not the web page you are looking for">
        <img class="img_cat" src="cat.png">
        <img class="img_cat_shadow" src="cat_shadow.png">
        <img class="img_speeder" src="speeder.png">                        
        <img class="img_speeder_shadow" src="speeder_shadow.png">            
        <img class="img_building_1" src="buliding_1.png">
        <img class="img_building_2" src="building_2.png">                        
    </div>
</div>

  圖片從網站上下載，就放成這樣的結構。如今的圖片仍是平鋪在頁面上，咱們用position: absolate和z-index使得圖片放在一個合適的位置，肯定它們的先後順序。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#field {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 370px;
}
.img_bg {
    position: absolute;
    top: -11px;
    left: -20px;
    width: 120%;
    height: 425px;
}
.img_text {
    position: absolute;
    z-index: 8;
}
.img_cat {
    position: absolute;
    z-index: 7;
}
.img_speeder {
    position: absolute;
    z-index: 6;
}
.img_cat_shadow {
    position: absolute;
    z-index: 5;
}
.img_speeder_shadow {
    position: absolute;
    z-index: 4;
}
.img_building_1 {
    position: absolute;
    z-index: 3;
}
.img_building_2 {
    position: absolute;
    z-index: 2;
}

  背景圖片須要拉伸寬於屏幕一些，由於背景圖也是隨鼠標的移動而左右移動的。下邊是圖片的數據結構：

window.onload = function() {
    var window_width, window_height,
        field_width, field_height,
        rate_w, rate_h,
        field, text, cat, cat_shadow, speeder, speeder_shadow, buliding_1, building_2;

    window_width = document.body.clientWidth;
    window_height = document.body.clientHeight;

    field = document.getElementById('field');
    field_width = field.offsetWidth;
    field_height = field.offsetHeight;

    rate_w = field_width / window_width;
    rate_h = field_height / window_height;

    var imgArray = {
        bg : { left: -780, top: -200 ,scale: 0.06, isFont: false },
        text : { left: -500, top: -120, scale: 0.03, isFont: true },
        cat : { left: -200, top: -100 ,scale: 0.02, isFont: true },
        cat_shadow : { left: -189, top: 100 ,scale: 0.02, isFont: true },
        speeder : { left: -70, top: -40 ,scale: 0.01, isFont: true },
        speeder_shadow : { left: -70, top: 75 ,scale: 0.01, isFont: true },
        building_1 : { left: 20, top: -111 ,scale: 0.03, isFont: false },
        building_2 : { left: 300, top: -60 ,scale: 0.05, isFont: false },
    };
}

  首先咱們先將圖片放到起始的位置，即模擬鼠標放在屏幕中心位置的時候。頁面首次加載鼠標不在瀏覽器中時就以這種方式佈局圖片。

(function() {
    for( i in imgArray ) {
        var theImg = document.getElementsByClassName("img_" + i)[0];
        var offset_w = rate_w * window_width / 2 * imgArray[i].scale;
        var offset_h = rate_h * window_height / 2 * imgArray[i].scale;
        if( imgArray[i].isFont == true ) {
            theImg.style.left = field_width / 2 + offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 + offset_h + imgArray[i].top + "px";
        } else {
            theImg.style.left = field_width / 2 - offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 - offset_h + imgArray[i].top + "px";
        }
    }
})();

  圖片在場景中的位置是按照鼠標在瀏覽器中的位置來按比例移動的。鼠標移動的時候改變圖片的top和left值來使圖片移動。離咱們近的物體的移動方向和鼠標的滑動方向相同，離咱們遠的物體移動方向和鼠標滑動方向相反。並且離中間的點的距離越遠，移動速度越快，使其具備立體感。
  圖片的scale屬性就是用來設置圖片的移動速度的，即鼠標移動的距離乘以這個比例就是圖片移動的距離。isFont屬性是圖片移動的方向，肯定圖片與鼠標移向相同或相反。監聽鼠標移動事件，每次移動都從新定位圖片位置。

var picMove = function(pageX, pageY) {
    for( i in imgArray ) {
        var theImg = document.getElementsByClassName("img_" + i)[0];
        var offset_w = rate_w * pageX * imgArray[i].scale;
        var offset_h = rate_h * pageY * imgArray[i].scale;
        if( imgArray[i].isFont == true ) {
            theImg.style.left = field_width / 2 + offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 + offset_h + imgArray[i].top + "px";
        } else {
            theImg.style.left = field_width / 2 - offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 - offset_h + imgArray[i].top + "px";
        }
    }
}

document.body.onmousemove = function(e) {
    picMove(e.pageX, e.pageY);
};

  到這裏這個特效就算作完了，若是你有興趣，這裏是個人博客以及github地址，歡迎來訪。