上一集中我们把视差滚动的基本原理讲了下，简单的做下回顾性总结：视差滚动就是一些区域划分+元素堆叠+错落的动画过渡所形成的效果。(*._.*)。
下集了，这次要写些什么呢，好困惑自己研究得不是很透彻，明知原理是那样，可是垒着码的时候还是要考究一下下的。“跑题一下，我的垒码习惯是会先把运动的轨迹写出来，最后才会加运动事件。理由很简单，从表现到行为的垒码原则可以让你更清楚其中的原理，其实所有的行为都是在操作节点、类、属性等这样那样的东东。也只有在明白原理的时候才会垒自己需要的，而不是盲垒”。
好了，回归主题吧
其实这一次的分享是上一集的拓展，也就是上一集结尾时说到的另一种形式的视差滚动。
下面就来分解一下，同理少不了进行区域的划分————区域划分
1 2 3 4 5 |
<div class="article">
<div class="content content-1" id="first">区域1</div>
<div class="content content-2" id="second">区域2</div>
<div class="content content-3" id="third">区域3</div>
</div>
|
在每一个区域里都堆一些元素————元素堆叠
例：
1 2 3 4 5 6 |
<div class="content content-1" id="first">
<h1></h1>
<img class="animg" src="images/p1.jpg" alt="" />
<p class="detailtitle"></p>
<p class="detail"></p>
</div>
|
最后再给这么些个元素加一些过渡————错落的动画过渡
已把运动轨迹分离出来，这样做可以很明了自己的运动轨迹是怎样的，就不用那么麻烦去看一大段JS，只为找到运动了多少个像素，废时废力。
例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.animg{position:absolute;left:-1000px;top:200px;
-webkit-transition-duration:1s; /* 对象过渡的持续时间 1秒 */
}
.detail{position:absolute;left:2000px;top:620px;100%;font-size:16px;
-webkit-transition-duration:2s; /* 对象过渡的持续时间 2秒 */
}
.detailtitle{position:absolute;left:0;top:-100px;padding:10px 20px;background:#333;color:#fff;font-size:24px;
-webkit-transition-duration:3s; /* 对象过渡的持续时间 3秒 */
}
.detailtitle-1{top:550px;left:-1000px;} /* 拓展动画类 */
/* 运动轨迹 begin */
.content-focus .animg{left:0;top:200px;}
.content-focus .detail{left:0;top:620px;}
.content-focus .detailtitle{top:550px;}
.content-focus .detailtitle-1{left:0;}
/* 运动轨迹 end */
|
那么行为方面的代码跟上一集中用到的基本一致，一个滚动事件，一个点击事件，方法很简单，看看就明白了，这里就不垒了
好了，来看下这个DEMO的效果吧
DEMO
这个我又把它称为单区视差，PS:都自己拉称呼了。
所谓单区，我理解的是在单个区域里所完成的一系列动作，跟其它区域没太大关系。
再来，加一些修饰性的东东，体现错落的感觉，接着往下垒码
1 2 3 4 5 6 |
<div class="section section-1"> <span class="span-1"></span> <span class="span-2"></span> <span class="span-3"></span> <span class="span-4"></span> </div> |
注：这些修饰的东西是跟区域父级同级的
css就不多说了，如下：
1 2 3 4 5 6 |
.section{position:fixed;left:50%;960px;margin-left:-480px;}
.section span{position:absolute;z-index:1;display:block;50px;height:50px;background:#999;opacity:.5;border-radius:25px;}
.section-1 .span-1{left:400px;top:100px;}
.section-1 .span-2{left:700px;top:200px;}
.section-1 .span-3{left:750px;top:400px;}
.section-1 .span-4{left:1100px;top:250px;}
|
加了一小段函数
1 2 3 4 5 6 |
function parallax(){
var toped = $(window).scrollTop();
$('.section-1').css({top:(0-(toped*1.75))+'px'});
$('.section-2').css({top:(0-(toped*0.35))+'px'});
$('.section-3').css({top:(0-(toped*1.35))+'px'});
}
|
这个不多说，看DEMO
DEMO
休息一下下，在上一集还留有一个小尾巴哦————QQ浏览器官网的视差实现，很帅的说，这个是怎么办到的呢，下面来模拟其中的一个小模块，相信分解之后你就会明白了，首先来看下它的基本框架，跟上面说到的一样，都要先划区域
例：
1 2 3 4 5 6 7 8 9 10 |
<div class="wrap">
<div class="box">
<div class="cont"> <!-- 这里就是区域1 -->
<div class="bj"></div>
<div class="title">web前端漫游地</div>
</div>
...... <!-- 可以一直往下加 -->
......
</div>
</div>
|
这里只弄了一个区域做为例子。
这个效果实现的重点其实在布局上，在布局中必须要清楚下一步的动画应该要怎样去呈现才能达到更好的衔接，从而将整个动画贯穿起来。这里还有个很好玩的东西：这个页面是从上往下滚的，但是代码中改变的却不是top的值，而是left的值，这么说来这个页面其实是左右滚，而不是上下滚，但是为什么会让人产生这样的感觉呢，我想这就是视差滚动的魅力所在，在这个页面得到了很好的体现。接着往下看，你会找到你想要的答案。
让你产生这种感觉的疑点：
1.这个页面没有默认滚动条，这样一来方向感就可以不受拘束，从哪个方向来都行。
1 2 3 |
html{
overflow:hidden;
}
|
2.页面元素很big，充满整个屏幕，且相应元素都做了斜切扭曲变形skew。
PS：可以单独搞个很big的元素，那么变形一下，再滚个滚轮，运动轨迹就明了了。
1 2 3 |
.cont{
-webkit-transform:skewX(-36.87deg) scaleY(4); // 这个scaleY(4)是Y轴2D缩放原尺寸的4倍
}
|
优雅的转身==================================
在疑点1中，如果把滚动条hidden掉了，不管这个页面有多长，再怎么滚都是无谓的挣扎，所以这里就要借助鼠标的滚动插件mousewheel需下载最新插件版本，要不然不支持高版本的jquery库；当然也可以自己写个原生JS，大家有时间的可以去折腾。
这么一来主要的部件就准备好了，现在就要看你布局的功力了，像这种如此big的元素肯定会涉及到不好定位的困扰，给大家介绍个我的方法：将页面整体缩小来进行大体布局，可以一试，很不错哦。
代码张贴：
这里就不全贴出来了，贴个JS(希望大家交流下如果多元素运动时如何写能更优化)，实验demo在章末放出^_^
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var iSpeed = 1500;
var oCont = $('.cont');
var oTitle = $('.title');
function fnAnimate(iSpeed,oDiv){ // 第1个参数为滚动的长度， 第2个参数为元素
var vAnimate = parseInt(oDiv.css('left')) + iSpeed;
oDiv.css({left:vAnimate});
}
$('html').mousewheel(function (event, delta){
if(delta > 0){ // 上
fnAnimate(-iSpeed,oCont);
fnAnimate(iSpeed*0.85,oTitle);
}else if(delta < 0){ // 下
fnAnimate(iSpeed,oCont);
fnAnimate(-iSpeed*0.85,oTitle);
}
});
|
我这里的思路是获取到元素的坐标位置，然后再重新赋给它个新值。
为了能让大家把原理弄得更清楚，给大家一个代码增减运行的步骤，可通过Developer Tools来进行原理梳理：
1.将页面缩放到最小
2.去掉所有扭曲变形
用个图来说明，形象些
好了，就到这，剩下的就看你怎么折腾了