html - 需要有关“从侧面浮动”项目的指导吗？

Question

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

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

很难解释和找到，但这里有一个非常高级的效果示例。

我真的希望你能帮忙。

Answer 1

试试这个....

   $(文档).ready(函数(){


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

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

    $('#element').animate({
    不透明度：1，
    左：'+=50'，
    顶部：'+=200'
    }，2000，函数（）{
    // 动画完成。
    });

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

Answer 2

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

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

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

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

Answer 3

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

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

例如：

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

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

Answer 4

您也可以使用 jQuery，它具有良好的框架效果。