前端的一些可爱的小插件之 wow.js & stellar.js

最近总是用到很多前端的小插件，用来实现一些看起来可爱的效果。插件繁杂并且调用方式各异，总是要不停的查看各种文档，今天就来总结一下最近常用的几款插件。

1.wow.js

作用：这是一个用来在页面滚动的过程中实现某些元素细小的动画效果的插件。它可以使我们的页面变得更加有趣。

依赖：这个插件只依赖与animate.css 而不依赖于jQuery.js；

兼容：由于这个插件依赖与animate.css所以使用这个插件的浏览器必须要支持CSS3动画，具体的兼容情况如图：

由于wow.js中也使用了jQuerySelectorAll的方法，在IE的低版本浏览器中会报错，因此如果需要兼容IE的低版本，最好使用脚本对浏览器的版本进行判断；

使用方法：

1.引入文件：

2.HTML

对于延迟和持续时间等效果选项，可以通过data-wow-delay=“0.1s”以及data-wow-duration=“1s” 这样的行内属性来进行限定；

例如：

3.Javascript

new WOW.init();

当我们需要对wow.js 的配置进行修改时，可以使用如下的代码进行修改：

 

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

配置项：

2.stellar.js

作用：用来实现视差滚动效果，尤其是前景和背景在页面滚动时移动速度不同，从而呈现出3D的效果的页面。这种效果需要背景图片为大图整版，会增加网站加载的资源，使得加载速度缓慢，不适合在网站上大批量使用，会使网站效果不优雅。。目前stellar.js官方已经停止了对他的维护。

依赖：依赖于jquery.js.

兼容： 暂时没有遇到兼容问题。。手动的测试了IE7和IE8 都没有问题。应该是可以放心用的

使用方法：

1.引入文件：

2.HTML :

div class="content" id="content3" data-stellar-background-ratio="0.3">

3.JavaScript：

$('#someElement').stellar();

如果是对于window对象，那么可以简化为如下的调用方法：

$.stellar();

这时 stellar.js将会在元素滚动时自动搜索设定的视差元素或他的背景，并对他重新定位。

配置项

如果需要对所有作用元素的某些属性进行配置可以使用如下方法：

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

如果要对某个元素的某个属性进行配置则要在该元素的行内通过添加 data-*属性进行设置，例如：

通常使用到的配置选项有：

1. horizontalScrolling 和 verticalScrolling  该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 琪值伟布尔值，默认为true；

2.responsive  该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false；

3.hideDistantElements   该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false；

4.data-stellar-background-ratio  该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置 

background-attachment：fixed；

具体的配置项可以参看stellar.js的官方github： 点击打开链接

另外，stellar.js不止可以针对position属性元素设置视差，也可以针对transform属性元素进行设置，在官方github中给出了针对没有position属性的元素的解决办法，具体可以点击上面的链接进行查看。