javascript - 如何使用 Vanilla JavaScript ES5 制作视差效果？

Question

我正在使用 Vanilla JS ES5 制作视差效果，但我似乎无法使其工作。

这是代码笔:https://codepen.io/Aurelian/pen/XZyjXx?editors=0110

HTML:

<section class="page-intro">
    <div class="page-intro__img js-parallax" style="background-image: url(https://metrouk2.files.wordpress.com/2017/03/512366437.jpg?w=748&h=498&crop=1);">

    </div>
    <div class="page-intro__overlay"></div>

    <!-- Two Different Parts, big and small -->
    <div class="page-intro__content">
        <h1 class="page-intro__title">Puppy</h1>
        <span class="page-intro__sub-title">Explore how my design process can help your business grow and succeed.</span>
    </div>

    <div class="page-intro__content">

    </div>

</section>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JS:

    var parallax = document.getElementsByClassName('js-parallax');
    var xScrollPosition;
  var yScrollPosition;

    function setTranslate(xPos, yPos, el) {
        el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
    }

  function scrollLoop() {
      xScrollPosition = window.scrollX;
      yScrollPosition = window.scrollY;

      setTranslate(0, yScrollPosition * -0.2, parallax);

  }
    window.addEventListener("scroll", scrollLoop, false);

Answer 1

很高兴看到更多程序员尝试普通 JS。

您只有两个错误。首先，您需要确保文档已加载，然后再尝试访问其内容。您将所有内容都包含在其中:

document.addEventListener("DOMContentLoaded", ()=>{
    // content loaded
});

第二个

document.getElementsByClassName('js-parallax');

这不会返回 HTML 元素，而是返回包含此类的元素数组。虽然只有 1 个元素，但它仍然是一个数组。

可以通过写来解决

document.getElementsByClassName('js-parallax')[0];