人靠衣装,机靠壳装

jQuery超炫平滑过渡垂直滚动视觉差特效

2015-07-27 16:51 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

niuqiqi020834.jpg


jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 3D transitions在页面垂直滚动时制作非常平滑的过渡动画效果。


浏览器兼容

  • Chrome 30+

  • Firefox 34+

  • Safari 7.1+

  • IE 10+


属性

  • x:在X轴上的移动距离,单位像素。

  • y:在Y轴上的移动距离,单位像素。

  • z:在Z轴上的移动距离,单位像素。

  • rotateX:绕X轴旋转的度数,单位degrees。

  • rotateY:绕Y轴旋转的度数,单位degrees。

  • rotateZ:绕Z轴旋转的度数,单位degrees。

  • scale:全局缩放比例。(ratio)

  • scaleX:X轴缩放比例。(ratio)

  • scaleY:Y轴缩放比例。(ratio)

  • scaleZ:Z轴缩放比例。(ratio)


配置参数

  • from-scroll:动画开始时的垂直滚动位置,默认值是当元素可见时的位置。

  • distance:在垂直滚动位置上最后动画的距离,默认是窗口的可见高度。

  • to-scroll:动画结束时的垂直滚动位置,默认值时from-scroll + distance。

  • smoothness:动画的缓速因子,数值越大动画越平滑。默认值30。

  • perspective:父元素上的3d perspective,制作3D空间效果。默认值800。

  • easing:动画的easing效果(注意:duration参数是必须的,distanceto-scroll会被忽略)。使用这个参数必须引入jquery.easing.1.3.js。

  • duration:easing动画的持续时间。没有指定easing参数时,该参数被忽略。

  • easing-return:在你向上滚动的时候,返回的easing函数,默认值是easing。

  • duration-return:Duration 的返回值,默认是duration。


多重动画

你可以增加data-parallax属性来设置多重动画效果。

  • data-parallax

  • data-parallax2

  • data-parallax3

  • data-parallax...


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码