html - 需要有关 "float in from sides"元素的指导？

Question

我正在尝试制作一个具有以下效果的网站:

1. 加载页面时，没有显示任何内容
2. 然后，当您向下滚动时，图片会从浏览器窗口的两侧 float ，然后堆叠在窗口中间。 (喜欢位置:固定)
3. 当您进一步滚动时，更多图片会浮出并添加到中间的堆栈中。

很难解释也很难找到，但这里有一个非常高级的例子of the effect .

我真的希望你能帮上忙。

Answer 1

首先，将所有元素设置为显示:无；在你的CSS中。使用 jquery 制作动画:

• 使用scroll()决定何时开始的事件
• 使用animate()去做实际的工作。

例如:

$('#element').animate({
  opacity: 1,
  left: '+=50',
  top: '+=200'
}, 2000, function() {
  // Animation complete.
});

这将导致 id 为“element”的元素淡入，同时在 2 秒内向右移动 50px 并向下移动 200px。