Parallax

multi layer parallax

by Mostafa Zeinivand

HTML

<div id="base-layer">
    <div id="layer-one" class="layer">
        Layer One
        <div id="layer-two" class="layer">
            Layer Two
            <div id="layer-three" class="layer">
                Layer Three
                <section class="slider">
                    Yeaah :D
                </section>
            </div>
        </div>
    </div>
</div>

CSS

.layer {
    padding: 20px 20px 50px 20px;
    color: #F5F5F5;
}
#base-layer {
    overflow: hidden;
}

#layer-one {
    background: #2196F3;
}
#layer-two {
    background: #009688;
}
#layer-three {
    background: #607D8B;
}
.slider {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-top: 100px;
}
.slider img {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

$(document).ready(function () {
    $('#layer-one').mousemove(function (e) {
        parallax(e, this, 1);
        parallax(e, $("#layer-two").get(0), 2);
        parallax(e, $("#layer-three").get(0), 3);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};