偶然看到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);
};
到这里github404页面的效果就算是做好了，可以点击这里预览最终效果，你也可以在github直接查看源码。如果你有兴趣，欢迎在下方留言讨论。
本文作者： Kongcheng.LC
本文链接： https://kongchenglc.github.io/blog/github40420170720/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！
