建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

Enllax.js 超轻量级jQuery视差滚动效果插件

来源:易助科技网浏览量:21收藏

简介


Enllax.js是一个超轻量级(压缩后约1kb)和超易用的插件,用于将视差滚动效果应用于任何滚动元素。可以将视差滚动效果设置为前景元素和背景元素,也可以设置为两个方向(垂直或水平)。

(下载的附件中附有DEMO)


用于在滚动时产生平滑的视差效果的jQuery插件enlax.js



使用


1.  引入文件


<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.enllax.min.js"></script>


2.  HTML


使用 data-enllax-ratio 属性为背景元素指定不同的滚动速度


<div class="bg-1" data-enllax-ratio=".5"></div>
<div class="bg-2" data-enllax-ratio=".7"></div>
<div class="bg-3" data-enllax-ratio=".3"></div>


将所需的数据 data-enllax-type="forground" 属性添加到前台元素中


<div class="fg-1" data-enllax-ratio=".5" data-enllax-type="forground"></div>
<div class="fg-2" data-enllax-ratio=".7" data-enllax-type="forground"></div>
<div class="fg-3" data-enllax-ratio=".3" data-enllax-type="forground"></div>


指定方向


<div class="fg-1" data-enllax-ratio=".5" data-enllax-direction="horizontal"></div>
<div class="fg-2" data-enllax-ratio=".7" data-enllax-direction="vertical"></div>


3.  调用


初始化插件以启用视差滚动效果


//very simple activation
$(window).enllax();

//or
$('#some-id').enllax();  
// This selector should be parent of parallax scrolling elements


您也可以在初始化期间通过选项对象传递参数


$('#SELECTOR').enllax({
  ratio: 0.5,
  type: 'background' //foreground
});



视差元素


如果你想让你的元素以不同的速度滚动,或者你可以说滚动有视差效果,那么这个插件让这变得非常容易。您所要做的就是在元素上使用数据属性,在其中添加视差滚动效果。

视差滚动效果可以有两种类型。一种是背景滚动效果,另一种是前景元素以不同的速度滚动。在这两种类型中,都可以在两个方向(垂直和水平)应用效果。


1. 背景视差:


要允许背景图像以不同的速度移动,只需使用具有数值的数据属性作为滚动速度的倍数。较少表示较慢,1表示正常。以下是一个示例:


<div data-enllax-ratio="0.5">...</div>



2. 前景要素视差:


要为任何前景元素添加不同的滚动速度,必须添加另一个数据属性。并且,此属性的值应为“foreground”。默认值为“background”。以下是一个示例:


<img src="path/to/image" data-enllax-ratio=".5" data-enllax-type="foreground" />



3. Direction ware上的视差:


视差效果现在可以应用于垂直和水平方向。您必须另外添加另一个数据属性。此数据属性的值可以是“垂直”或“水平”。并且,默认值为“垂直”。


<!-- background -->
<div data-enllax-ratio=".5" data-enllax-direction="horizontal">...</div>

<!-- foreground -->
<img src="path/to/image" data-enllax-ratio=".5" data-enllax-type="foreground" data-enllax-direction="horizontal" />



您也可以为所有视差滚动元素使用一些默认值


$(window).enllax({

//default values

// type can be defined as it is background parallax scrolling element or foreground scrolling element.
type: 'background',  // another value for type is 'foreground'.

ratio: 0.5,  // multiplier for scrolling speed. Less is slower. Default: '0'.

direction: 'vertical' // another value for direction is 'horizontal'.

});



相关链接


GitHub 地址:  https://github.com/mmkjony/enllax.js

易助科技网效果演示地址 :  http://demo.easyzone.net.cn/plugin/enllax/index.html