摘要:Parallax.js是一款jQuery滚动视觉差插件。Parallax.js插件小于1kb,它能够在页面滚动时为指定的背景图片制作炫酷的视觉差效果,并提供参数来控制视觉差动画的延迟,方向和速度等。希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
简要教程
Parallax.js是一款jQuery滚动视觉差插件。Parallax.js插件小于1kb,它能够在页面滚动时为指定的背景图片制作炫酷的视觉差效果,并提供参数来控制视觉差动画的延迟,方向和速度等。
使用方法
在页面中引入jquery和jquery.parallax.js文件。
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.parallax.js"></script>
HTML结构
使用一个块级元素作为视觉差效果的容器,并在里面放置一个用于制作图片背景的元素。
<section class="parallax-wrapper"> <figure class="parallax-demo"></figure> </section>
CSS样式
为背景图片添加一些样式。
.parallax-demo { position: relative; background-image: url(img/demo.img); background-size: cover; height: 1203px; }
另外视觉差容器需要有一个固定的高度。
.parallax-wrapper { position: relative; height: 400px; overflow: hidden; }
初始化插件
在页面DOM元素机制完毕之后,通过parallax()方法来初始化该背景图片视觉差插件。
$(function(){ $(".parallax-demo").parallax(); });
配置参数
1、可以通过配置参数来设置滚动的速度。
$(function(){ $(".parallax-demo").parallax({ speed: '100' }); });
2、可以通过配置参数来设置滚动的方向。
$(function(){ $(".parallax-demo").parallax({ ascending: true, // false = bottom to top }); });
3、可以通过配置参数来设置视觉差滚动的延迟时间。
$(function(){ $(".parallax-demo").parallax({ delay: '1000' }); });
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号