Trying to reset Parallax.js to handle a few instances of parallax situations

Question

I'm working on a project that utilizes [Parallax.js] (https://github.com/wagerfield/parallax) and has an issue that I can't seem to solve. There are no indication in the documentation to destroy/re-init the parallax.

In the documentation, it says that applying data-depth will determined the level of depth when parallax is applied. My web application has a switch button that can change these levels but I can't reapply the new level of depth and reapply the parallax.

I tried a few methods, such as applying the parallax constructor for the second time but that doesn't seem to work. I tried working through re-writing the DOM element and then applying the constructor, also doesn't work.

I tried assigning the parallax object constructor into a variable, and then null-ed it upon the second time but the parallax either didn't start or did not apply the new values.

Help!

Answer 1

Today I had the same problem with parallax that after regenerating the DOM elements I could not call the $("#someID").parallax(). But I found the solution and I hope it will help you too. You need to reference an other script (not just the jquery-parallax.js):

<script src="script/vendor/parallax.js"></script>

After that in the javascript file where you play with the DOM. Call this every time after the manipulation:

var pDiv = $('#animations')[0]; //parallax works with DOM elements -> unwrap it from the jquery element
var p = new Parallax(pDiv); //recreate the parallax on the element

After this you don't need to call anything else. It worked for me. I hope it will be a good solution to you too.