仿github404页面

发表于 2017-07-20 | 分类于 demo | 阅读次数

偶然看到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: 110%;
    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: -690, 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页面的效果就算是做好了，如果你有兴趣，欢迎在下方留言讨论。

本文作者： Kongcheng.LC
本文链接： https://kongchenglc.github.io/blog/github40420170720/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！

Kongcheng.LC

人海风起云涌

GitHub Weibo