滚动显示一系列图像

Show a series of images on scroll

本文关键字：图像 一系列 显示 滚动      更新时间：2023-09-26

我找到的最接近的解决方案是在800px后向下滚动显示div。

我正在学习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);
};

更大的问题之一是设置frame0.className = "frameShow"会删除初始类frame，这将删除一堆属性。为了解决这个问题，至少可以用一种简单的方法，我们可以执行frame0.className = "frame frameShow"等。另一个问题是，frame0在frame1之后呈现，这可以通过多种方式解决。例如，将frame0的<img>放在frame1之后，或者将frame0的CSS设置为具有z-index:2;，然后将frame0的类设置为class="frame frameHide"，使其一开始就不显示。我还使用CSS删除了正文中的边距和填充，因为它会干扰图像的位置。我已经让你的代码按照我所理解的方式工作了，这是一个JSFiddle。

这取决于您的情况，例如，在这个jsFiddle 1中，我将根据垂直滚动完整窗口的值显示下一帧（或上一帧）。

因此，对于我的情况，代码是：

var jQ = $.noConflict(),
  frames = jQ('.frame'),
  win = jQ(window),
// this is very important to be calculated correctly in order to get it work right
// the idea here is to calculate the available amount of scrolling space until the
// scrollbar hits the bottom of the window, and then divide it by number of frames
  steps = Math.floor((jQ(document).height() - win.height()) / frames.length),
// start the index by 1 since the first frame is already shown
  index = 1;
win.on('scroll', function() {
  // on scroll, if the scroll value equal or more than a certain number, fade the 
  // corresponding frame in, then increase index by one.
  if (win.scrollTop() >= index * steps) {
    jQ(frames[index]).animate({'opacity': 1}, 50);
    index++;
  } else {
    // else if it's less, hide the relative frame then decrease the index by one
    // thus it will work whether the user scrolls up or down
    jQ(frames[index]).animate({'opacity': 0}, 50);
    index--;
  }
});

更新：

考虑另一个场景，其中我们将帧放在一个可滚动的div中，然后将.frame图像包装在另一个div .inner中。

jsFiddle 2

var jQ = $.noConflict(),
  cont = jQ('#frames-container'),
  inner = jQ('#inner-div'),
  frames = jQ('.frame'),
  frameHeight = jQ('#frame1').height(),
  frameWidth = jQ('#frame1').width() + 20, // we add 20px because of the horizontal scroll
  index = 0;
// set the height of the outer container div to be same as 1 frame height
// and the inner div height to be the sum of all frames height, also we
// add some pixels just for safety, 20px here
cont.css({'height': frameHeight, 'width': frameWidth});
inner.css({'height': frameHeight * frames.length + 20});
cont.on('scroll', function() {
  var space = index * frameHeight;
  if (cont.scrollTop() >= space) {
    jQ(frames[index]).animate({'opacity': 1}, 0);
    index++;
  } else {
    jQ(frames[index]).animate({'opacity': 0}, 0);
    index--;
  }
});

**请注意在这两种情况下，所有框架都必须具有相同的高度。

相关文章：