做一个既能带来视觉冲突的，又简单的布局并不简单，因为二者之间的特性是相互排斥的。利用先进的技术设计一个带有视觉冲突的效果，往往会牺牲简单的处理方法。今天，我决定做一个插件，让你做到既能保持简单性又能给你的网页添加酷炫的滚动效果。那么，现在就让我来介绍jQuery实现的倾斜页面滚动(jQuery Tilted Page Scroll)。
jQuery Tilted Page Scroll 是一个插件可以将你的html代码包装成带有倾斜页面滚动效果的3D布局。这个效果实现的概念类似于我的一个插件——One Page Scroll。但在这种情况下，它是原始的，所以它在很多设备上都是兼容的。
注意：jQuery Tilted Page Scroll这个插件已经在Chrome、Firefox、Safari，在桌面和手机测试过。但在IE上没有检测过。
(源代码请在原著的页面上下载啦~)
使用Tilted Page Scroll
它是如何运作的？
首先第一件事，这个插件会侦查什么时候每个元素都出现在了视窗里。而为了实现这个，我必须绑定一个方法监听页面滚动，那么它就可以实现每个元素的循环并且实时监测滚动条的位置。这个运算过程使用了$(window).scrollTop来跟踪滚动条所在位置，并且比较它和每个元素的topOffset顶部偏移量。如果scrollTop的值大于元素的顶部偏移量，那么就意味着元素在这个视窗里，然后我将会为它添加类名来表示它。
一旦完成了上面的步骤，那就根据用户的页面滚动位置来计算透明度、尺寸以及倾斜角度。这个过程花了我好几个小时的来尝试，才找到完美的计算方法，但最终我找到了一个基于这个插件实现思想的解决方案。
首先，要完成的计算有：在方程式中，利用一个变量存放scrollTop()的值，以及倾斜角度、透明度和尺寸，而它们将由顶部偏移量、元素部分的高度和窗口的高度决定。我也必须定义一个最小的值，因此它们就不会超出有效的范围（例如，透明度opacity必须是0-1之间的值）。当所有的数据准备就绪，简单地使用CSS opacity和CSS3 tranform调用它。
那么，这个插件将会通过监听页面的滚动行为改变布局。
使用说明
为了使用这个插件，你需要在你的html文档的<head>中引入最新的jQuery库，jQuery.tiltedpage_scroll.js以及tiltedpage_scroll.css，后两者可以在这里找到。
现在，准备好你的html标签，如下所示：
HTML:
<body>
..
<div class="main">
<section class="page1">
...
</section>
<section class="page2">
...
</section>
...
<section class="last-page">
...
</section>
</div>
..
</body>
JS:
$(".main").tiltedpage_scroll({
sectionContainer: "> section",
angle: 50,
opacity: true,
scale: true,
outAnimation: true
});
就是这样了！上述的设置可以让你有一个默认的格局，它可以让你运行好几分钟。对于那些正在寻找方法来定制这个插件的人，别急。我在下面提供了一些建议给你们：
- sectionContainer(section容器):如果你不想在你的布局里使用section，你可以用CSS选择器。例如，你想选择.main下的下一级div标签，可以使用">div"（选择子元素）。它的默认值是">section"。
- angle(倾斜度)：当你的容器出现在视窗内，你可以设置你的容器的倾斜度。如果你需要更加细微的效果，那就尝试着把它的值减小到10。它的默认值是50。
- opacity(透明度)：当section正出现在视窗内时，透明度会跟着逐渐增大。你可以设置它的值为false。它的值默认为true。
- scale(尺寸)：当你滚动页面的时候，section的尺寸会逐渐增大。如果你不想要这个效果，可以将它的值设置为false。它的默认值为true。
- outAnimation(离开动画)：这个选项可以允许你启用或者关闭离开动画，当section返方向离开视窗(section向上消失)。设置它的值为false，将实现只在section进入视窗时展现效果。它的默认值为true。
-----------------------------------------------------分割线-----------------------------------------------------
这个是我偶然在关注的一个微博账号里发现的一篇外国文章。这个插件能实现的效果，建议还是去原创文章那里看一下作者的DEMO
虽然我特地搜索了一下标题，看看是否有人已经翻译了。而我发现有一个网站已经将该文章翻译了（内心有点小失落），不过我很想尝试一下翻译一篇外国的技术文章，所以希望看到这篇翻译的人，如果觉得我翻译得不好，请及时指出~~~谢谢啦~~接下来，我也得尝试一下这个插件！
翻译：http://www.uedsc.com/create-a-cool-3d-tilted-layout-with-tilted-page-scroll.html
原创：http://www.onextrapixel.com/2014/03/13/create-a-cool-3d-tilted-layout-with-tilted-page-scroll/
5921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
