Boogie Parallax

DEMO #1

by vvv vvvv

HTML

<header>
     <h1>Something fabulous to write</h1>

    <p>The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts?</p>
    <p>The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts?</p>
    <p>The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts?</p>
</header>
<p>The documentation indicates that the default replaces all, and that "-1" also indicates to replace all, but it is unsuccessful. Any thoughts? The documentation indicates that the default replaces...

CSS

body {
    background-color: #EDF8F2;
}
header {
    padding: 80px;
    padding-right: 50%;
    background: url(http://i.imgur.com/MDDJ2tI.jpg) repeat 0 0;
    font-family: Helvetica, sans-serif;
    color: white;
}
h1 {
    text-shadow: 0 0 7px #000;
    font-size: 72px;
}
header > p {
    color: blue;
    background-color: white;
}

JavaScript

var boogieParallax = {
    init: function (target, strength, opposite) {
        this.target = target;
        this.movStrength = strength || 30; //Optional
        this.movOpposite = opposite || true; //Effect against the cursor movement? - Opt.
        this.active = true;

        var bgPos = $(this.target).css("background-position"),
            i,
            targetHeight = $(target).height();

        //Reverse the movements (or not)
        this.movOpposite = this.movOpposite ? 1 : -1;

        //
        this.movPointX = this.movStrength / $(window).width();
        this.movPointY = this.movStrength / $(window).height();

        //Prevent the occurence of a blank rim on top and left side
        this.bgPosTbl = bgPos.replace(/px/g, "").split(" ");
        i = this.bgPosTbl.length;
        for (i; i > 0; i--) {
            this.bgPosTbl[i] = -(this.movStrength);
        }

        $(window).on("scroll", $.proxy(function () {
            var scrollTop = $(window).scrollTop();
            this.active = scrollTop > targetHeight - 50 ? false : true;
        }, this));

        $("html").mousemove($.proxy(this.effect, this));
    },

    effect: function (e) {

        if (this.active) {

            var pageX = e.pageX - window.innerWidth / 2;
            var pageY = e.pageY - window.innerHeight / 2;

            var newvalueX = this.bgPosTbl[0] - this.movPointX * pageX * this.movOpposite;
            var newvalueY = this.bgPosTbl[1] - this.movPointY * pageY * this.movOpposite;

            $(this.target).css("background-position", newvalueX + "px " + newvalueY + "px");

        }

    }
};

boogieParallax.init("header",150);