切图网

为您的设计寻找专业的网页切图服务!

web前端入门:滚动视差效果Parallax 制作分享

切入口 取自 切,入口,意思是前端的入口。
我尽可能以不小于2个小时写一篇的速度来做文章。

web前端入门:滚动视差效果Parallax 制作分享 - qietuwang - 切图网

起源
我们公司 [ 切图(武汉)网络技术有限公司:qietu.com简称切图网 ] 最近11月份当中的一个项目,需要用到滚动视差效果,于是我想到了很久以前的做的项目用到了滚动视差效果插件。


公司的前端妹纸已经做好的静态html雏形演示
http://www4.qietu.com/html/craft/

首先我想到了,滚动视差插件parallax
jquery.parallax-1.1.3.js

以及轨迹滚动视差插件
skrollr.min.js

但是这些效果都不适合这个项目后来找到了一款同样是滚动视差,但是更符合这个项目的插件
jquery.localscroll-1.2.7-min.js


演示地址
http://bbs.qierukou.com/html/jquery.localscroll-1.2.7/

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.     <title>分享一款页面视差滚动切换jquery.localscroll插件 - 切图网qietu.com</title>
  5.     <link href="http://qietuwang.blog.163.com/blog/css/global.css" rel="stylesheet" type="text/css">
  6.     <script src="http://qietuwang.blog.163.com/blog/js/jquery-1.7.2.min.js" type="text/javascript"></script>
  7.     <script src="http://qietuwang.blog.163.com/blog/js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
  8.     <script src="http://qietuwang.blog.163.com/blog/js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
  9.     <script src="http://qietuwang.blog.163.com/blog/js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
  10.     <script src="http://qietuwang.blog.163.com/blog/js/default.js" type="text/javascript"></script>
  11. </head>

源代码剖析
用到了 js/jquery-1.7.2.min.js
是一个jquery类文件,1.7.2是jquery版本号,min是压缩版本的标识

用到了 js/jquery.parallax-1.1.3.js
parallax 是一个局部的滚动视差效果插件,可以给每个单独的局部定义不同的滚动速率,实现视差效果

用到了 js/jquery.localscroll-1.2.7-min.js
本章文章要讲到的重点,是页面大篇幅滚动视差效果核心插件

用到了 js/jquery.scrollTo-1.4.2-min.js
scrollTo 插件是比较常见的插件,用途是将生硬的锚点跳转变得圆滑,体验更好

最后
附使用方法,文字描述太生硬,我决定用10分钟短视频的方式

http://pan.baidu.com/s/1kVBFyEN


关注
微信:qietuwang
微博: http://weibo.com/qietuwang

评论