0

I want to ask you how can I make my pattern placed on a specific place on my page? I made my parallax "background" from that website "http://web-features.net/". So what I want to make is that when I scroll my image it is moving to the right or to the left (depending on the scrolling), but I don't want it to follow all over my website, I just want it on a specific place.

Here is the code from the html

    <script type="text/javascript" id="ddd">
        var wf_pbb_object = [
        {bc:"rgb(0, 154, 204)"},
        {img:"imgs/tri.png", mm:false, ms:true, mms:1, mss:5, mmd:1, mso:"h", msd:1, im:"pattern", pr:"x", mma:"both", ofs:{x:0, y:0}, zi:2, sr:false, sb:false, isr:false, isb:false}
        ];
        </script>
    <script type="text/javascript" src="js/parallax.js"></script>

and here is the code from the javascript

 function addListener(obj, type, listener) {
    if (obj.addEventListener) {
        obj.addEventListener(type, listener, false);
        return true;
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + type, listener);
        return true;
    }
    return false;
}
var wf_pbb_images = [];
var wf_pbb_img_loaded = 0;
addListener(window, 'load', function () {
    var trkFrame_div = document.createElement("iframe");
    trkFrame_div.width = "0px";
    trkFrame_div.height = "0px";
    trkFrame_div.scrolling = "no";
    trkFrame_div.frameborder = "no";
    trkFrame_div.src = "http://web-features.net/api-tracking/pbb-api.html";
    document.body.appendChild(trkFrame_div);
    trkFrame_div.style.display = "none";
    wf_pbb_controller.appendPreloader();
    for (var i = 1; i < wf_pbb_object.length; i++) {
        wf_pbb_images[i] = new Image;
        wf_pbb_images[i].src = wf_pbb_object[i].img;
        wf_pbb_images[i].onload = function () {
            wf_pbb_img_loaded++;
            if (wf_pbb_img_loaded >= wf_pbb_object.length - 1) {
                wf_pbb_controller.init();
                wf_pbb_controller.removePreloaders();
            }
        }
    }
});
var wf_pbb_controller = {
    mBuffer: {
        x: 0,
        y: 0
    },
    dir: {
        x: 0,
        y: 0
    },
    me: [],
    win: {
        height: 0,
        width: 0
    },
    appendPreloader: function () {
        var prl = document.createElement("div");
        prl.id = "wf_pbb_preloader";
        prl.style.width = 222 + "px";
        prl.style.height = 24 + "px";
        prl.style.position = "fixed";
        prl.style.bottom = "36px";
        prl.style.right = "50px";
        prl.style.zIndex = 9999;
        prl.style.border = "3px solid #96A2C2";
        prl.style.font = "20px 'DIN Regular','trebuchet MS'";
        prl.style.color = "#96A2C2";
        prl.style.margin = "10px auto 0 auto";
        prl.style.padding = "8px 0";
        prl.style.textAlign = "center";
        prl.style.borderRadius = "6px";
        prl.style.backgroundColor = "white";
        prl.innerHTML = "Loading Parallax...";
        document.body.appendChild(prl);
    },
    removePreloaders: function () {
        document.getElementById("wf_pbb_preloader").style.display = "none";
    },
    init: function () {
        wf_pbb_controller.initWindowSize();
        if (wf_pbb_object[0].bc != 'transparent') {
            document.body.style.backgroundColor = wf_pbb_object[0].bc;
        }
        this.browserDetect.init();
        wf_pbb_controller.canvas = document.createElement("span");
        wf_pbb_controller.canvas.id = "wf_pbb_canvas";
        wf_pbb_controller.canvas.style.width = 100 + "%";
        wf_pbb_controller.canvas.style.height = 100 + "%";
        wf_pbb_controller.canvas.style.position = "fixed";
        wf_pbb_controller.canvas.style.top = 0;
        wf_pbb_controller.canvas.style.left = 0;
        wf_pbb_controller.canvas.style.zIndex = -999;
        document.body.appendChild(wf_pbb_controller.canvas);
        for (i = 1; i < wf_pbb_object.length; i++) {
            wf_pbb_controller.lr = document.createElement("div");
            wf_pbb_controller.lr.id = "layer_" + i;
            wf_pbb_controller.lr.style.width = 100 + "%";
            wf_pbb_controller.lr.style.height = 100 + "%";
            wf_pbb_controller.lr.style.position = "absolute";
            wf_pbb_controller.lr.style.top = 0;
            wf_pbb_controller.lr.style.left = 0;
            wf_pbb_controller.lr.style.zIndex = wf_pbb_object[i].zi;
            wf_pbb_controller.lr.style.backgroundImage = "url(" + wf_pbb_object[i].img + ")";
            wf_pbb_controller.canvas.appendChild(wf_pbb_controller.lr);
            if (wf_pbb_object[i].im == "image") {
                wf_pbb_controller.lr.style.backgroundRepeat = "no-repeat";
                var ni_X = wf_pbb_object[i].ofs.x;
                var ni_Y = wf_pbb_object[i].ofs.y;
                if (wf_pbb_object[i].isb) {
                    ni_Y += (wf_pbb_controller.win.height - wf_pbb_images[i].height);
                }
                if (wf_pbb_object[i].isr) {
                    ni_X += (wf_pbb_controller.win.width - wf_pbb_images[i].width);
                }
                wf_pbb_controller.lr.style.backgroundPosition = ni_X + "px " + ni_Y + "px";
            } else {
                switch (wf_pbb_object[i].pr) {
                    case "x":
                        {
                            wf_pbb_controller.lr.style.backgroundRepeat = "repeat-x";
                            if (wf_pbb_object[i].sb) {
                                var bottom = (wf_pbb_controller.win.height - wf_pbb_images[i].height) + wf_pbb_object[i].ofs.y + "px";
                                wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + bottom;
                            } else {
                                wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
                            }
                            break;
                        }
                    case "y":
                        {
                            wf_pbb_controller.lr.style.backgroundRepeat = "repeat-y";
                            if (wf_pbb_object[i].sr) {
                                var right = (wf_pbb_controller.win.width - wf_pbb_images[i].width) + wf_pbb_object[i].ofs.x + "px";
                                wf_pbb_controller.lr.style.backgroundPosition = right + " " + wf_pbb_object[i].ofs.y + "px";
                            } else {
                                wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
                            }
                            break;
                        }
                    case "both":
                        {
                            wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
                            break;
                        }
                }
            }
        }
        if (navigator.appVersion.indexOf("Mobile") == -1) {
            for (i = 1; i < wf_pbb_object.length; i++) {
                wf_pbb_controller.me["layer_" + i] = document.getElementById("layer_" + i);
            }
            document.onmousemove = function (e) {
                if (wf_pbb_controller.browserDetect.browser == "Firefox") {
                    var m = {
                        "x": e.clientX,
                        "y": e.clientY
                    }
                } else {
                    var m = {
                        "x": window.event.clientX,
                        "y": window.event.clientY
                    }
                }
                if (m.x < wf_pbb_controller.mBuffer.x) {
                    wf_pbb_controller.dir.x = -1;
                } else if (m.x > wf_pbb_controller.mBuffer.x) {
                    wf_pbb_controller.dir.x = 1;
                } else {
                    wf_pbb_controller.dir.x = 0;
                }
                if (m.y < wf_pbb_controller.mBuffer.y) {
                    wf_pbb_controller.dir.y = -1;
                } else if (m.y > wf_pbb_controller.mBuffer.y) {
                    wf_pbb_controller.dir.y = 1;
                } else {
                    wf_pbb_controller.dir.y = 0;
                }
                for (i = 1; i < wf_pbb_object.length; i++) {
                    if (wf_pbb_object[i].mm) {
                        var me = wf_pbb_controller.me["layer_" + i];
                        var speed = wf_pbb_object[i].mms;
                        var curPos = me.style.backgroundPosition;
                        curPos = curPos.split(" ");
                        var pos = {
                            newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed * wf_pbb_controller.dir.x * wf_pbb_object[i].mmd,
                            newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed * wf_pbb_controller.dir.y * wf_pbb_object[i].mmd
                        }
                        if (wf_pbb_object[i].mma == "x") {
                            pos.newY = parseInt(curPos[1].substr(0, curPos[1].length - 2));
                        }
                        if (wf_pbb_object[i].mma == "y") {
                            pos.newX = parseInt(curPos[0].substr(0, curPos[0].length - 2));
                        }
                        me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
                    }
                }
                wf_pbb_controller.mBuffer.y = m.y;
                wf_pbb_controller.mBuffer.x = m.x;
            }
            if (window.addEventListener) {
                document.addEventListener('DOMMouseScroll', function (event) {
                    wf_pbb_controller.wheel(event);
                }, false);
            }
            document.onmousewheel = function (event) {
                wf_pbb_controller.wheel(event);
            }
        }
    },
    wheel: function (event) {
        var delta = 0;
        if (!event) {
            event = window.event;
        }
        if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
        } else if (event.detail) {
            delta = -event.detail / 3;
        }
        if (delta) {
            for (i = 1; i < wf_pbb_object.length; i++) {
                if (wf_pbb_object[i].ms) {
                    var me = wf_pbb_controller.me["layer_" + i];
                    var speed = wf_pbb_object[i].mss;
                    speed *= delta;
                    speed *= wf_pbb_object[i].msd;
                    var curPos = me.style.backgroundPosition;
                    curPos = curPos.split(" ");
                    var pos = {
                        x: parseInt(curPos[0].substr(0, curPos[0].length - 2)),
                        y: parseInt(curPos[1].substr(0, curPos[1].length - 2)),
                        newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed,
                        newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed
                    }
                    switch (wf_pbb_object[i].mso) {
                        case "v":
                            {
                                me.style.backgroundPosition = pos.x + "px " + pos.newY + "px";
                                break;
                            }
                        case "h":
                            {
                                me.style.backgroundPosition = pos.newX + "px " + pos.y + "px";
                                break;
                            }
                        case "d":
                            {
                                me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
                                break;
                            }
                    }
                }
            }
        }
    },
    browserDetect: {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                var dataProp = data[i].prop;
                this.versionSearchString = data[i].versionSearch || data[i].identity;
                if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1) return data[i].identity;
                } else if (dataProp) return data[i].identity;
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1) return;
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        },
        dataBrowser: [{
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        }, {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        }, {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        }, {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        }]
    },
    initWindowSize: function () {
        if (typeof (window.innerWidth) == 'number') {
            wf_pbb_controller.win.width = window.innerWidth;
            wf_pbb_controller.win.height = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            wf_pbb_controller.win.width = document.documentElement.clientWidth;
            wf_pbb_controller.win.height = document.documentElement.clientHeight;
        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            wf_pbb_controller.win.width = document.body.clientWidth;
            wf_pbb_controller.win.height = document.body.clientHeight;
        }
    }
}

Thanks for each reply!

Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
The B
  • 545
  • 2
  • 5
  • 16

2 Answers2

0

To use it on a specific place, say your div with an ID #myparallax, simply use below code:

{bc:"rgb(0, 154, 204)",target:"myparallax", mstw:false, mmtw:false},},

The rest of the code stays the same.

mstw:false disable mouse scroll over body element
mmtw:false disable mouse move over body element

They both could be set to true if you like.

Godinall
  • 2,280
  • 1
  • 13
  • 18
  • Thanks for your reply, however, it still follows that whole page. What can I do that it stays on a specific place on the site? So when I scroll down it does only the effect and doesn't move with the page. – The B May 11 '14 at 16:23
  • Like I said, you first have to give an ID to the div. Do you have an live demo? – Godinall May 11 '14 at 16:27
  • I gave the ID to the script because the script isn't in a div but it still follows my page. No, I have none. – The B May 11 '14 at 16:31
  • The reason why I asked for a demo is I really don't get you, or your English. The animation has to be wrapped in some container, right? That container needs an ID, which is the one you should use on the parallax function call. Not to give your script an ID! – Godinall May 11 '14 at 16:34
  • The script is in no container, it stand alone. It seems as if the pattern has the Position: fixed code somewhere. When you said I should give the container the ID, I put the script into a div and gave the div that ID, however, it didn't change anything. – The B May 11 '14 at 16:42
  • Sorry, couldn't be of any further help without seeing your full HTML markup. – Godinall May 11 '14 at 16:46
0

Ok found it out by myself!I had to change wf_pbb_controller.canvas.style.position = "fixed"; to wf_pbb_controller.canvas.style.position = "absolute"; in the Javascript.

The B
  • 545
  • 2
  • 5
  • 16