CODEWITHSUNDEEP
javascriptjquerycssparallax
Allen Justin Quinto
Allen Justin Quinto

Reputation: 3

Plax.js not working when the window scrolled from middle to bottom

You can see here ( http://straightupstaging.com.au/uk-caravans/foxtail/ ) that the eagle image and plane image is working correctly with plax.js.

But when you scroll your browsers window unto middle to bottom the fish image doesn't working correctly with plax.js.

Upvotes: 0

Views: 128

Answers (1)

Bobev
Bobev

Reputation: 76

I have not used plax.js but reading the code I came across the following: Line 262: 

if (!inViewport(layers[0].obj[0].parentNode)) return;

It would seem that they check if the first element in your plaxify collection (in your case the eagle image) is still in view. If it is not then it does a return; and therefore does not carry on with the "animation".

This same behavior could be seen in their official demo: http://projects.cameronmcefee.com/plax-demo/ where if you make your browser window smaller and scroll down it stops working.

I have created a js fiddle with a slight rework of that if statement in order to check if any of the layers are in view

var elsInView = false;
$.each(layers, function(k,v) {
    if (inViewport(v.obj[0].parentNode)) {
        elsInView = true;
    }
});
if (!elsInView) return;

http://jsfiddle.net/Lo6qqg6x/1/

Or you could probably just comment it out. Hope this helps.

Upvotes: 2

Related Questions