一个像幻灯片一样工作的单页网站[关闭]答案

【问题标题】：A single-page website which works like a slideshow [closed]一个像幻灯片一样工作的单页网站[关闭]
【发布时间】：2014-09-04 03:26:08
【问题描述】：

这里是what I am trying to replicate。

这是一个单页网站。您可以使用键盘、鼠标、鼠标滚动或滑动来“向下”导航。还有一些向左/向右导航的轮播。每个“幻灯片”都适合折叠的全高页面。但是所有的幻灯片仍然是一个单独的 HTML 文档。

我可以尝试使用自定义代码重新创建它，但是有很多陷阱，例如检测屏幕尺寸、粘页脚、填充屏幕空间、调整图像大小等。

肯定有一个插件可以做到这一点，或者可能是一个很好的教程、示例......或“什么”？我正在使用 ASP.NET-MVC，但通用解决方案也是一个很好的起点！

更新以安抚“问题过于广泛”的编辑：
- 如何检测到达幻灯片的末尾？ ->jQuery Waypoints 插件
- 如何滚动到下一张“幻灯片”？我假设类似于 jQuery scrollTo 插件？
- 我如何进行左/右导航？
- 如何使用该示例中的动画向左/向右和向上/向下移动幻灯片？
- 我如何为页内链接添加书签/跳转（这是跳转到某张幻灯片的触发器）

【问题讨论】：

我不想做一个真正的“Powerpoint 风格”网站。有很多例子。这个网站比较简单，感觉不像 Powerpoint。
看来我可以使用 jQuery“Waypoints”插件来检测到达新幻灯片/页面，然后在脚本中移动内容。但过渡仍然是我正在努力解决的问题，以及屏幕/视口大小。
太宽泛/推荐查找工具或库/不费吹灰之力。
真的吗？你试试找一个工具，看看你想出了什么？没有！这就是我问这个问题的原因。不，它不是太宽泛。我正在就一个非常具体的 UX 范例寻求帮助。而且我想要的不是主流（就像现在的 Powerpoint 克隆一样）。
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow..

标签： javascript html asp.net web responsive-design

【解决方案1】：

这叫做视差滚动技术。

Tutorial Simple version

还有名为 Carusel 的幻灯片（如果您在 ASP .NET MVC 中使用默认的 boostrap）。

您可以制作自己的单页应用程序。你可以see这些网站。

【讨论】：

这些链接中有很多有趣的想法......谢谢。特别是航点插件会有所帮助。 但是，我想要做的不是视差。 视差是指，例如，当你有一个看似移动的背景，或者各种看起来分层的项目时。我只想做一个简单的幻灯片，就像我发布的那个例子一样。
转念一想，有些过渡类似于视差，但这不是问题的症结……
好吧，我明白了 :) 误会了抱歉。如果你想用航点渲染一些幻灯片，你可以使用这个工具:) JMPRESS。 Prezi 设计的工具，但它还有一些其他功能。