需要关于“从侧面漂浮”项目的指导？

Question

我正在努力创建一个具有以下效果的网站：

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

很难解释和找到，但这是一个非常高级的例子of the effect。

我真的希望你能提供帮助。

Answer 1

首先，将所有元素设置为display：none;在你的CSS。 使用jquery作为动画：

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

例如：

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

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

Answer 2

我建议您考虑使用JQuery动画以及搜索“无限滚动”或“无限滚动”。

JQuery UI可能是你最好的选择，看起来不错。有几种方法可以做到这一点，在这里写的太多了。

至于无限滚动，还有很多方法可以解决这个问题。

这是一个开始：http://masonry.desandro.com/demos/infinite-scroll.html

Answer 3

尝试这个......

   $(document).ready(function(){


    $("body").css("display","none");
    $("body").fadeIn(2000);
    });

在这一个中，首先整个页面都是空的...然后它会淡入....

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

使用上面的代码移动对象....

Answer 4

你也可以使用jQuery，它有很好的框架效果。