Parallax doesn't work

[kieryk123]

Hi, I use your library for some time. I have a problem with working. I will show you this problem on my website.

I built front page and I used parallax.js plugin, everything works: http://fireart.pl/pkieryk/skyestate/ I built similiar subpage and there your plugin doesn't work: http://fireart.pl/pkieryk/skyestate/onas.html

I don't know why this does't work, please help me. I had this problem twice in the past.

[wstoettinger]

hey @kieryk123 ! from looking at your subpage I would say, that the url of the image is incorrect. have a look at the console, the error gets printed there!

also please check out our new version https://github.com/pixelcog/parallax.js/tree/v2.0.0-alpha and let us know what you think!

[kieryk123]

This doesn't matter. I have tested a lot of ways to repair this and none works.

[wstoettinger]

okay, found 2 problems:

• please correct the image source as pointed out before, otherwise the library won't even be loaded: change: data-image-src="/images/parallax1-bg.jpg" to data-image-src="images/parallax1-bg.jpg"
  • the other problem is, that the main element has a background color .page-onas {background-color: #fafafa; } this needs to be transparent. in V2 you could move the parallax inside of the main element, but that's still experimental.

[kieryk123]

Thank you very much! Now I know where is a problem. Thats strange to change background color of my main tag. Do I need to change background of this element to transparent? Maybe Is there another way to resolve this problem :/

[kieryk123]

I found new issue. This subpage: http://fireart.pl/pkieryk/skyestate/kariera.html When user clicks on yellow button on the right of one of this panels, parallax is on wrong position. Is there any solution to fix this? P.S. I use bootstrap accordion collapse panel.

[wstoettinger]

please refer to the readme where both your problems are addressed under the notes section: https://github.com/pixelcog/parallax.js#notes

to your question: yes, this is necessary because the parallax happens in the root of the body element and is behind everything else in the body (having a z-index of -1000). As i already said, there is a possibility to change the container from body to main in the new V2 of the library. feel free to check it out!

your second problem can be solved with triggering a resize! (also in the readme!!) --> every structural change in the page size (apart from window resizing) needs to be followed by an update trigger of parallax. so if you change the content or dimensions of elements on your page, you need to tell parallax to refresh.

[kieryk123]

@wstoettinger I see, but this is not smooth at all. This looks horrible.

[wstoettinger]

i see! well, basically the size and position of the parallax element would need to be calculated 10-20 times a second in order to be smooth during the transition.

I would suggest to use a library like this: https://github.com/sdecima/javascript-detect-element-resize

[wstoettinger]

this would also work, but be aware, that it's not very performance efficient and could cause problems on weaker systems. You can tweak the timeout to your needs, values between 40 and 200 would be ideal. alternatively you could use window.requestAnimationFrame() instead of the timeout!

(function ($) {

$.fn.sizeChanged = function (handleFunction) {
    var element = this;
    var lastWidth = element.width();
    var lastHeight = element.height();

    setInterval(function () {
        if (lastWidth === element.width()&&lastHeight === element.height())
            return;
        if (typeof (handleFunction) == 'function') {
            handleFunction({ width: lastWidth, height: lastHeight },
                           { width: element.width(), height: element.height() });
            lastWidth = element.width();
            lastHeight = element.height();
        }
    }, 100);

    return element;
};

}(jQuery));

jQuery('body').sizeChanged(function() { jQuery(window).trigger('resize').trigger('scroll');});

[wstoettinger]

otherwise i would recomment to put the parallax above the rest of the content. that would also solve this issue!