郑州网页设计培训
郑州网页美工培训
郑州UI设计培训
郑州淘宝美工培训
网页设计中创建倾斜布局与倾斜页面
发布时间:2014-04-28 10:43:31

  创建一个引人注目的和简单的布局并不容易,因为这两个功能相互矛盾。与先进的技术通常牺牲一设计夺人眼球的简单过程。今天,我决定创建一个插件,它会让你保持简单性而为你的网站添加一个很酷的滚动效果。让我来介绍给你jQuery倾斜页面滚动。

  JQuery倾斜页面滚动是一个插件,可以让你把你的HTML标记成一个三维布局与倾斜的滚动效果。这个概念类似于我的插件一个页面滚动,但在这种情况下,滚动是本地,所以插件将在大多数设备的兼容。

  注意:这个插件已经测试了Chrome,Firefox,Safari,无论是在桌面和移动。在IE尚未经过测试。

  使用倾斜页面滚动这是如何工作的呢?

  首先,插件将检测当视窗中的每个元素,为此我不得不将方法绑定到滚动事件,它遍历每个元素和实时检测到的位置。计算是通过使用来完成的$(window).scrollTop()跟踪滚动位置和与前抵消的每个元素进行比较。如果scrollTop值是多元素的偏移,这意味着现在的元素是在视窗,然后我可以添加一个类名称来表示它。

  一旦完成,现在是时候来计算透明度,规模和倾斜角度,根据用户的增加/减少滚动的位置。这花了我很多时间通过反复试验才能找到完美的计算但最终我找到了一个解决方案,能够很好地处理这个插件的概念。

  基本上,是用什么计算scrollTop()值作为一个变量的方程,加上顶部偏移,部分的高度,和窗口的高度来确定倾斜的程度,不透明度和规模。我也必须定义地板值,这些值不出去的有效范围(例如,透明度应该在0和1之间),一旦所有的数字都准备好了,我只是使用CSS透明度和CSS3转换申请规模和倾斜角度。

  现在,这个插件将反应滚动行为,并相应地改变布局。

  使用这个插件,您将需要包括最新的jQuery库可以在这里,jQuery.tiltedpage_scroll。js和tiltedpage_scroll。css,可以在这里找到在你的文档的.

  制性的,但它将帮助你用CSS样式每个部分更容易。每个部分将代表每一页里面将动画和任何内容。一旦完成,调用的函数如下:

  这是它!上面的设置将会给你一个默认开箱即用配置,让你在几分钟内启动并运行。对于那些正在寻找一种方式来定制这个插件,不出汗。我为你提供一些选项在:

  sectionContainer:如果你不想使用部分在你的布局,你可以定义自定义标记在CSS选择器。例如,如果你想要一个级别的所有div容器低于“主要”容器,然后使用“>div”。默认值是“>节”。

  角度:您可以定义多少容器将倾斜时出现在这里的视窗。如果你想要一个更微妙的影响,尽量减少值10。默认值为50。

  透明度:当视窗内的部分出现不透明也会逐渐增加。您可以通过设置这个选项切换了假的。默认值为true。

  规模:节的规模也逐渐增加滚动。切换这个假如果你想禁用这个动画。默认值为true。

  outAnimation:这个选项将允许您启用/禁用退出动画节时的视口对面(部分向上消失)。切换为false时只有动画节进来了。默认值为true。

联系地址

郑州金水区东风路文化路向西200米路北汇宝大厦5楼501

联系电话

0371-63218905 13613841515(徐老师)

CopyRight 2005--2013 © xueweb.cn 版权所有:郑州清新教育电脑设计培训学校 Tel:0371-63218905 13613841515 客服QQ:800060586