Imitation github404 page effects

Read the original

Chance to see githubthe 404page, did not think githubthe 404page is doing very heart, and try to find the next source, we intend to imitate this effect .
This effect appears to be 3d, in fact, did not use css3any of the inside of the 3drelated properties, this page should then be made out before long, it may be that time of css3compatibility has not been so good. This page is borrowed pictures dislocation, as well as inconsistent picture movement speed, giving a three-dimensional. Look at the following htmlstructure:

<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>

Images downloaded from the website, put into such a structure. Now the picture is still flat on the page, we use position: absolateand z-indexmakes the picture on a suitable location, to determine their order before and after.

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;
}

Background image need stretched wider than the screen, because the background is also moved with the mouse and move around. Below is a picture of the data structure:

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 },
    };
}

First we first picture into the starting position, emulating mouse on the center of the screen time. The page is first loaded mouse is not in the browser when it is in the picture layout in this way.

(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";
        }
    }
})();

Picture position in the scene is to move proportionally in accordance with the position of the mouse in the browser. When moving the mouse to change the image topand leftvalues to make pictures move. And sliding the opposite direction from the moving direction of the mouse is the same as our near objects away from us in the direction of movement of the object and the mouse sliding direction. And the farther the distance from the intermediate point, faster moving, to have a three-dimensional sense.
The image scaleattribute is used to set the speed of the moving picture, i.e., mouse movement distance is multiplied by the ratio of the moving image distance. isFontProperty is the direction moving picture, the picture is determined mouse toward the same or opposite. Listen for mouse motion events, each time moving images are repositioned location.

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);
};

To this effect even done here, if you are interested, here is my blog and github address , welcomed the visit.

Guess you like