javascript - 在滚动条上显示一系列图像

Question

我找到的最接近的解决方案是 Show div on scrollDown after 800px .

我正在学习 HTML、CSS 和 JS，因此我决定尝试制作一本数字动画书:一种可以在用户滚动时播放(即逐帧加载)的简单动画。

我想我可以将所有图像添加到 HTML，然后使用 CSS 将它们“堆叠”在同一位置，然后使用 JS 或 jQuery 在滚动的不同点将一个淡化为下一个(即，增加像素距页面顶部的距离)。

不幸的是，我无法产生我正在寻找的行为。

HTML(只是动画的所有帧):

<img class="frame" id="frame0" src="images/hand.jpg">
<img class="frame" id="frame1" src="images/frame_0_delay-0.13s.gif">

CSS:

body {
        height: 10000px;
}
.frame {
    display: block;
    position: fixed;
    top: 0px;
    z-index: 1;
    transition: all 1s;
}
#hand0 {
    padding: 55px 155px 55px 155px;
    background-color: white;
}
.frameHide {
  opacity: 0;
  left: -100%;
}
.frameShow {
  opacity: 1;
  left: 0;
}

JS:

frame0 = document.getElementById("frame0");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    frame0.className = "frameShow"
  } else {
    frame0.className = "frameHide"
  }
};

window.addEventListener("scroll", myScrollFunc);
};

Answer 1

你的一个更大的问题是设置 frame0.className = "frameShow"删除您的初始类(class) frame ，这将删除一堆属性。要解决这个问题，至少以一种简单的方式，我们可以做 frame0.className = "frame frameShow"等。另一个问题是 frame0 在 frame1 后面呈现，可以通过多种方式修复。 IE。放frame0的 <img> 之后 frame1 ，或设置 frame0的 CSS 有一个 z-index:2; , 然后设置 frame0类到class="frame frameHide"所以它一开始就没有出现。我还使用 CSS 删除了正文的边距和填充，因为它会扰乱图像的位置。我已经使您的代码按照我理解的方式工作，这是一个 JSFiddle .