Question

我在Vanilla JavaScript ES5中制作视差效果。

我想要实现的是设置数据属性，并设置我想要视差的速度。

以下是codepen：https://codepen.io/Aurelian/pen/vdQMYo?editors=0011

这是HTML：

<section class="page-intro">
    <div class="page-intro__img js-parallax" data-parallax-speed="-0.5" 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>
<section class="page-intro">
    <div class="page-intro__img js-parallax" data-parallax-speed="-0.2" 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>
<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：

window.onload = function() {
  var parallax = document.getElementsByClassName('js-parallax');
  var xScrollPosition;
  var yScrollPosition;

  console.log("Data speed is:" + dataSpeed);

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

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

      for(var i = 0; i < parallax.length; i++) {
        parallaxEl = parallax[i];
        var dataSpeed = parallaxEl.getAttribute('data-parallax-speed');
        setTranslate(0, yScrollPosition * dataSpeed, parallaxEl);

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

}

Answer 1

问题在于.getAttribute()与data-属性一起使用。访问这些的正确方法是通过HTMLElement的dataset地图。文档：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

这有效：https://codepen.io/anon/pen/zRMgyX?editors=0011

window.onload = function() {
  var parallax = document.querySelectorAll('.js-parallax');
  var xScrollPosition;
  var yScrollPosition;

//  console.log("Data speed is:" + dataSpeed);

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

  function scrollLoop() {
      xScrollPosition = window.scrollX;
      yScrollPosition = window.scrollY;
      parallax.forEach(p=>{
         var dataSpeed = p.dataset.parallaxSpeed; 
         setTranslate(0, yScrollPosition * dataSpeed, p);
      })
  }
    window.addEventListener("scroll", scrollLoop, false);

}

如何获取包含特定类的元素的数据属性？

1 个答案: