如何在元素單擊時禁用 parallax.js

Question

我希望這些 class 元素在單擊時在它們當前的協調位置（不重置位置）停用。

<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);

我看到了“parallax.disable();” wagerfield的 github 頁面中的方法。 但我不知道如何使用它。

Answer 1

將事件偵聽器添加到視差（場景變量）用於“單擊”的元素，然后使用disable方法將其禁用。

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

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

如果您打算禁用子元素，則必須為要使用的視差分配一個選擇器，例如*:not(.inactive)對於非非活動元素，然后將非活動 class 分配給單擊的元素； 然后為視差調用 updateLayers。

<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();
    });
}