Question

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

我正在学习HTML，CSS和JS，我决定尝试制作一个数字翻书：一个简单的动画，可以在用户的滚动上播放（即一帧一帧地加载）。

我想我会将所有图像添加到HTML中，然后使用CSS来＃＆＃34;堆叠它们＆＃34;在相同的位置，然后使用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"会删除您的初始类frame，这将删除一堆属性。为了解决这个问题，至少以一种简单的方式，我们可以做frame0.className = "frame frameShow"等。另一个问题是frame0在frame1后面呈现，可以通过多种方式修复。即。在 frame0之后放置<img>＆＃39; frame1 ，或将frame0的CSS设置为{{1}然后将z-index:2;的课程设置为frame0，以便它不会显示开始。我还使用CSS从身体中删除了边距和填充，因为它会干扰图像的位置。我已经按照我理解的方式使您的代码工作，这里是JSFiddle。

Answer 2

这取决于您的情况，例如，在此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--;
  }
});

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

滚动显示一系列图像

2 个答案: