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

2019-10-09 08:40:57 作者: 大梦 浏览: 9 [百度未收录] [搜狗已收录] [360已收录]

简要教程

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

浏览器兼容

  • Chrome 30+
  • Firefox 34+
  • Safari 7.1+
  • IE 10+

使用方法

使用该视觉差特效插件首先要引入jQuery和jquery.parallax-scroll.js以及jquery.easing.1.3.js(如果需要easing效果)文件。

1
2
3
<script src="js/jquery-2.1.3.min.js">script>
<script src="js/jquery.easing.1.3.js">script>
<script src="js/jquery.parallax-scroll.js">script>               

然后在你需要制作视觉差效果的元素上添加data-parallax属性。data-parallax属性的值使用json语法,里面的键值对是你想要制作的视觉差效果的属性和取值。

1
2
3
4
<article>
  <img src="img/paris.jpg" alt="Paris" data-parallax='{"y": 230}'/>
  <p>Paris est magiquep
article>               

属性

  • 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...

应用举例

下面以图片滚动视觉差为例子说明插件的使用方法。当浏览器窗口向下滚动,图片出现在浏览器窗口的底部,图片开始向下移动230像素,一直到图片消失在屏幕的顶部。就如同DEMO中的图片视觉差效果。

1
<img src="img/paris.jpg" alt="Paris" data-parallax='{"y" : 230}'/>               

下面是在滚动距离超过50像素的时候,以一个平滑过渡效果向右移动

  • 元素650像素。

    1
    <li data-parallax='{"x": 650, "from-scroll": 50, "distance": 0, "smoothness": 10}'>1li>               

    接下来的例子是在滚动距离超过90像素的时候,将

  • 元素向右移动650像素,然后在滚动距离超过400像素的时候,将
  • 元素向下移动500像素.它们之间的滚动距离时60像素。

    1
    <li data-parallax='{"x": 650, "from-scroll": 90, "distance": 0}' data-parallax2='{"y": 500, "from-scroll": 400, "distance": 60}'>3li>               

    最后一个例子是在将元素沿X轴旋转1000度。

    1
    <p data-parallax='{"rotateX":1000}'>!p>      
  • 版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
    2、本站永久网址:http://www.luopay.cn
    3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
    4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
    5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

    下载地址
    评论
    本文作者 阅读排行 文章推荐

    首页
    最新
    投稿
    精选
    我的