很酷的jQuery页面滚动3d倾斜布局插件tiltedpage-scroll

很酷的jQuery页面滚动3d倾斜布局插件tiltedpage-scroll1659
使用这个插件,您将需要包括最新的jQuery库可用,jQuery.tiltedpage_scroll.js和tiltedpage_scroll.css。
现在,准备你的HTML标记如下所示:
<body>
  ..
  <div class="main">
  <section class="page1">
    ...
  </section>
  <section class="page2">
    ...
  </section>
  ...
  <section class="last-page">
    ...
  </section>
</div>
 
  ..
</body>
各个部分的类名称不是强制性的,但它将帮助你用CSS样式每个部分更容易。每个部分将代表每一页里面将动画和任何内容。一旦完成,调用的函数如下:
$(".main").tiltedpage_scroll({
    sectionContainer: "> section",    
    angle: 50,                        
    opacity: true,                    
    scale: true,                      
    outAnimation: true               
  });
上面的设置将会给你一个默认配置,让你在几分钟内启动并运行。提供一些选项:
sectionContainer:如果你不想使用section,你可以定义自定义标记在CSS选择器。例如,如果你想要一个级别的所有div容器低于“main”容器,然后使用“> div”。默认值是“>section”。
angle:如果你想要一个更微妙的影响,尽量将值减少10。默认值为50。
opacity:当section内的部分出现不透明也会逐渐增加。您可以通过设置这个选项切换了false。默认值为true。
scale:section的规模也逐渐增加滚动。切换这个false如果你想禁用这个动画。默认值为true。
outAnimation:这个选项将允许您启用/禁用退出动画节时的section对面(部分向上消失)。切换为false时只有动画节进来了。默认值为true。
这个插件的所有选项。你现在有一个超级简单的,但优雅的布局在几分钟内为您的网站。我希望你会发现这个插件非常有用,如果你有任何疑问,建议或想说话,随意问我在下面的评论中。

也许你还喜欢