浏览原文

  有时看到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地点，迎接来访。