注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

切图网

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

 
 
 

日志

 
 
 
 

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

2016-11-30 15:33:10|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
切入口 取自 切,入口,意思是前端的入口。
我尽可能以不小于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
  评论这张
 
阅读(3)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017