How to disable parallax.js on element click

Question

I want these class elements to be deactivated in their current coordinated positions (without resetting the position) when clicked.

<div id="scene" data-relative-input="true">
    <div class="back" data-depth=".2"><img src=".../jc-box.png"></div>
    <div class="front" data-depth=".6"><img src=".../jc-bottle.png"></div>
</div>

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

i saw "parallax.disable();" method in wagerfield's github page. But i don't know how to use it.

Nora Söderlund · Answer 1 · 2022-12-28T18:48:36.993

Add an event listener to the element that is used by parallax (scene variable) for "click" and then use the disable method to disable it.

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

scene.addEventListener("click", () => {
    parallax.disable();
});

If you mean to disable the children elements, then you must assign a selector for parallax to use, e.g. *:not(.inactive) for elements that are not inactive and then assign the inactive class to the clicked elements; and then call updateLayers for parallax.

<div id="scene" data-relative-input="true" data-selector="*:not(.inactive)">
    <div class="back" data-depth=".2"><img src=".../jc-box.png"></div>
    <div class="front" data-depth=".6"><img src=".../jc-bottle.png"></div>
</div>

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

const children = scene.children;

for(let index = 0; index < children.length; index++) {
    const child = children[index];

    child.addEventListener("click", () => {
        child.classList.add("inactive");

        parallax.updateLayers();
    });
}

For this to work, you must reassign the pointer-events of the scene element to initial (or any other value) and override the inline styling with !important. Whilst !important is bad practice, this is the way to override the inline styling from your CSS directly.

The inactive elements must also receive an absolute positioning, which overrides the relative positioning from the previously entered inline styling from parallax.

#scene {
    pointer-events: initial !important;
}

#scene > .inactive {
    position: absolute !important;
}

If you wish to instead toggle the child elements, you can use child.classList.toggle("inactive");.

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

const children = scene.children;

for(let index = 0; index < children.length; index++) {
    const child = children[index];

    child.addEventListener("click", () => {
        child.classList.add("inactive");

        parallax.updateLayers();
    });
}

#scene {
  pointer-events: initial !important;
}

#scene > .inactive {
  position: absolute !important;
}

/* irrelevant styling below */

.back {
  background: red;
  
  width: 100px;
  height: 100px;
}

.front {
  background: green;
  
  width: 50px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" integrity="sha512-/6TZODGjYL7M8qb7P6SflJB/nTGE79ed1RfJk3dfm/Ib6JwCT4+tOfrrseEHhxkIhwG8jCl+io6eaiWLS/UX1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="scene" data-relative-input="true" data-selector="*:not(.inactive)">
    <div class="back" data-depth=".2"><img src=".../jc-box.png"></div>
    <div class="front" data-depth=".6"><img src=".../jc-bottle.png"></div>
</div>

How to disable parallax.js on element click

1 Answers1