如何使用 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

很高兴看到更多的程序员尝试 vanilla JS。

您只有 2 个错误。首先，您需要确保在尝试访问文档内容之前已加载该文档。你把所有东西都包在里面：

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

秒

document.getElementsByClassName('js-parallax');

这不是 return 一个 HTML 元素，而是一个包含此 class 的元素数组。只有 1 个元素，但它仍然是一个数组。

写

就可以解决

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

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

How to make a parallax effect with Vanilla JavaScript ES5?

javascript

parallax