本文首發(fā)于我的博客烁巫，這是我的github，歡迎star蘑秽。
偶然看到github的404頁(yè)面饺著，沒(méi)想到github的404頁(yè)面也是做的很有心，就試著找了下源碼肠牲，打算仿一下這個(gè)效果幼衰。
??這個(gè)效果看上去是3d的，其實(shí)沒(méi)有用到css3里邊的任何一個(gè)與3d有關(guān)的屬性缀雳，這個(gè)頁(yè)面應(yīng)該在很早之前就被做出來(lái)了渡嚣，可能那時(shí)的css3兼容性還沒(méi)現(xiàn)在這么好。這個(gè)頁(yè)面是借用圖片錯(cuò)位俏险，以及圖片運(yùn)動(dòng)速度不一致严拒，給人一種立體感。下邊先看下html結(jié)構(gòu)：
<div id="wrapper">
<div id="field">
</div>
<div id="pictures">
</div>
</div>
圖片從網(wǎng)站上下載竖独，就放成這樣的結(jié)構(gòu)。現(xiàn)在的圖片還是平鋪在頁(yè)面上挤牛，我們用position: absolate和z-index使得圖片放在一個(gè)合適的位置莹痢，確定它們的前后順序。
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;
}
背景圖片需要拉伸寬于屏幕一些，因?yàn)楸尘皥D也是隨鼠標(biāo)的移動(dòng)而左右移動(dòng)的竞膳。下邊是圖片的數(shù)據(jù)結(jié)構(gòu)：
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 },
};
}
首先我們先將圖片放到起始的位置航瞭，即模擬鼠標(biāo)放在屏幕中心位置的時(shí)候。頁(yè)面首次加載鼠標(biāo)不在瀏覽器中時(shí)就以這種方式布局圖片坦辟。
(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";
}
}
})();
圖片在場(chǎng)景中的位置是按照鼠標(biāo)在瀏覽器中的位置來(lái)按比例移動(dòng)的刊侯。鼠標(biāo)移動(dòng)的時(shí)候改變圖片的top和left值來(lái)使圖片移動(dòng)。離我們近的物體的移動(dòng)方向和鼠標(biāo)的滑動(dòng)方向相同锉走，離我們遠(yuǎn)的物體移動(dòng)方向和鼠標(biāo)滑動(dòng)方向相反滨彻。而且離中間的點(diǎn)的距離越遠(yuǎn)，移動(dòng)速度越快挪蹭，使其具有立體感亭饵。
??圖片的scale屬性就是用來(lái)設(shè)置圖片的移動(dòng)速度的，即鼠標(biāo)移動(dòng)的距離乘以這個(gè)比例就是圖片移動(dòng)的距離梁厉。isFont屬性是圖片移動(dòng)的方向辜羊，確定圖片與鼠標(biāo)移向相同或相反。監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件词顾，每次移動(dòng)都重新定位圖片位置八秃。
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);
};
到這里github404頁(yè)面的效果就算是做好了，可以點(diǎn)擊這里預(yù)覽效果肉盹，如果沒(méi)翻墻可能訪問(wèn)不了喜德，你也可以在github直接查看源碼。如果你有興趣垮媒，歡迎在下方留言討論舍悯。
