超棒的视觉效果jQuery插件 – FractionSlider

JS or jQuery, 转自点点 10 年前 回复

, , ,

应领导要求,在给公司做专题的时候,需要给专题加上slider里文字图片等的飞入飞出淡入淡出等效果,google之,发现FractionSlider ,DEMO请移步http://jacksbox.de/stuff/jquery-fractionslider/

使用非常简单,先引入css和js,如下:

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.fractionslider.js"></script>

<div class="slider">
<!-- your slider container -->
<div class="slide"><!-- all elements for the first slide --></div>
<div class="slide"><!-- all elements for the second slide --></div>
<!-- and so on -->
<div class="fs_loader"><!-- shows a loading .gif while the slider is getting ready --></div>
</div>

需要使用动画的元素示例如下:

<img src="path/to/image" alt="" data-position="100,100" />

调用FractionSlider插件

jQuery(window).load(function(){
$('.slider').fractionSlider();
});

下载地址:https://github.com/jacksbox/jquery.fractionslider

Via:http://leapsoul.com/great-parallax-effects-jquery-plugin-fractionslider/

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)