如何实现网页之间的平滑过渡？

Question

我正在尝试创建一个小网站（约5页，主要是静态的），并希望实现massivehealth.com中实现的转换效果。我试图搜索它但是徒劳无功。我发现该网站只使用了一个脚本，虽然链接表明它是一个多页面网站，但点击链接会将它们显示为/ #page而不是/ page，这表明它们实际上是一个大页面的一部分。

我想知道这背后是什么技术，以便我能够完美地学习和实现它。

Answer 1

首先，你肯定应该使用jQuery，因为它使动画创建更容易。以下是你应该如何去做的事情：

1. 将整个页面内容（所有这些内容，正如您所说的所有页面只有一页）放在包装器div中。
2. 此包装div应具有100％的最大宽度和溢出：隐藏
3. 在主包装器中创建第二个包装器div，但是这个包的宽度等于所有页面的总宽度（或者更好的说伪页面或其他）
4. 现在每个页面都是第二个包装器内的div，并且位置必须是绝对的（然后你应该为它们设置合适的左侧和顶部位置）。
5. 第二个包装的位置必须是绝对的
6. 并且第一个包装器的位置必须是相对的，否则绝对位置都不会按照您希望的方式工作。
7. 现在，当您想要更改页面时，请使用jquery为第二个包装器的x位置设置动画，并在y方向设置scrollTo。

如果我想给你代码，那将花费很长时间，但它背后的整个想法应该是这个（当然，我希望如此：D）。

如果你在实现这个想法时遇到任何问题，请告诉

Answer 2

同时我正在研究同样的问题。这个教程在这里解释了一切。 http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/