rellax-纯js轻量级滚动视觉差特效插件

当前位置:主页 > jQuery库 > 视觉差滚动效果 > rellax-纯js轻量级滚动视觉差特效插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
rellax-纯js轻量级滚动视觉差特效插件
分享:

    插件介绍

    rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871个字节,在手机等小屏幕设备中,插件会自动限制视觉差特性。

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-10
    阅读:
简要教程

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871个字节,在手机等小屏幕设备中,插件会自动限制视觉差特性。

安装

可以通过npm来安装rellax.js视觉差插件。

npm install rellax                  
                

使用方法

在页面中引入rellax.min.js文件。

<script type="text/javascript" src="js/rellax.min.js"></script>                  
                
HTML结构

为你需要设置视觉差效果的元素添加.rellax class类。然后通过data-rellax-speed属性来设置该元素的相对滚动速度。数值越大,滚动的越快。

<div class="rellax">
  I’m that default chill speed of "-2"
</div>
<div class="rellax" data-rellax-speed="7">
  I’m super fast!!
</div>
<div class="rellax" data-rellax-speed="-4">
  I’m extra slow and smooth
</div>
                
初始化插件

在页面的底部,<body>标签之前添加下面的代码来初始化rellax.js视觉差插件。

<script>
  // Accepts any class name
  var rellax = new Rellax('.rellax');
</script>                  
                

rellax.js视觉差特效插件的github地址为:https://github.com/dixonandmoe/rellax

网友评论