摘要：閱讀原文偶然看到的頁面，沒想到的頁面也是做的很有心，就試著找了下源碼，打算仿一下這個效果。這個頁面是借用圖片錯位，以及圖片運動速度不一致，給人一種立體感。頁面首次加載鼠標不在瀏覽器中時就以這種方式布局圖片。

閱讀原文

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

??圖片從網站上下載，就放成這樣的結構。現在的圖片還是平鋪在頁面上，我們用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地址，歡迎來訪。