建立酷炫的3D倾斜布局

作一个既能带来视觉冲突的，又简单的布局并不简单，由于两者之间的特性是相互排斥的。利用先进的技术设计一个带有视觉冲突的效果，每每会牺牲简单的处理方法。今天，我决定作一个插件，让你作到既能保持简单性又能给你的网页添加酷炫的滚动效果。那么，如今就让我来介绍jQuery实现的倾斜页面滚动(jQuery Tilted Page Scroll)。 css

jQuery Tilted Page Scroll 是一个插件能够将你的html代码包装成带有倾斜页面滚动效果的3D布局。这个效果实现的概念相似于个人一个插件——One Page Scroll。但在这种状况下，它是原始的，因此它在不少设备上都是兼容的。 html

注意：jQuery Tilted Page Scroll这个插件已经在Chrome、Firefox、Safari，在桌面和手机测试过。但在IE上没有检测过。 jquery

(源代码请在原著的页面上下载啦~) git

使用Tilted Page Scroll github

它是如何运做的？ web

首先第一件事，这个插件会侦查何时每一个元素都出如今了视窗里。而为了实现这个，我必须绑定一个方法监听页面滚动，那么它就能够实现每一个元素的循环而且实时监测滚动条的位置。这个运算过程使用了$(window).scrollTop来跟踪滚动条所在位置，而且比较它和每一个元素的topOffset顶部偏移量。若是scrollTop的值大于元素的顶部偏移量，那么就意味着元素在这个视窗里，而后我将会为它添加类名来表示它。 api

一旦完成了上面的步骤，那就根据用户的页面滚动位置来计算透明度、尺寸以及倾斜角度。这个过程花了我好几个小时的来尝试，才找到完美的计算方法，但最终我找到了一个基于这个插件实现思想的解决方案。 app

首先，要完成的计算有：在方程式中，利用一个变量存放scrollTop()的值，以及倾斜角度、透明度和尺寸，而它们将由顶部偏移量、元素部分的高度和窗口的高度决定。我也必须定义一个最小的值，所以它们就不会超出有效的范围（例如，透明度opacity必须是0-1之间的值）。当全部的数据准备就绪，简单地使用CSS opacity和CSS3 tranform调用它。 iphone

那么，这个插件将会经过监听页面的滚动行为改变布局。函数

使用说明

为了使用这个插件，你须要在你的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>

每一个section的类名不是强制要求要写的，可是它能够方便你给它们添加CSS样式。每个section表明一页，而且在里面的任何内容将会动态变化。作完上述事情后，像下面那样调用函数：

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/