Bit This 视觉差滚动效果分析
Bit This 是一家位于西班牙马德里的代理公司。他们用视觉差滚动效果以展示公司的规制度和行为准则。5个简单的原则就将其品牌和客户包括你们紧密相连。
网站地址：http://www.bit-this.com/eng.html
该网站实现效果基础原理：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 100%; height: 1200px; margin: 0 auto; overflow: hidden;
}
</style>
</head>
<body>
<div style="background-color: #33CCFF; display: block; ">a</div>
<div style="background-color: aqua; ">a</div>
</body>
</html>
这段代码没有任何复杂的地方，就是2个长的很高的div。
但是添加上图片以后~~
<div style="background-color: #33CCFF; display: block;
background: url('http://www.bit-this.com/files/fondo_bit_this.gif') no-repeat fixed 50% 50% transparent;">a</div>
<div style="background-color: aqua; background: url('http://www.bit-this.com/files/fondo_femina.gif') no-repeat fixed 50% 50% transparent;">a</div>
这里最最重要的一个属性是：background-attachment属性将其设置为fixed。表示把图片保留在背景中的固定位置上。
Bit This页面中的所有的JS都是用来做自动滚动效果的。
jQuery ( function( $ ) {
$.Body = $ ( 'body' );// body对象封装
$.Window = $ ( window );// window对象封装
// 根据浏览器类型获取一个html或body对象，具体作用在下面。
$.Scroll = ( $.browser.mozilla || $.browser.msie ) ? $ ( 'html' ) : $.Body;
/*
* 具有data-controller属性的对象（也就是页面中：<body data-controller="MainBody">
* 与最后一个section <section class="story" id="story-contact"
* data-controller="contact" ）进行封装。 在该对象上执行下方定义的自定义方法：Instantiate
*/
// 根据源码剖析，此方法未做任何操作
$ ( '[data-controller]' ).Instantiate ( );
/*
* 该对象供easing插件使用 http://jqueryui.com/demos/effect/easing.html
*/
var _opt = {
duration : 1200,// 时间
easing : "easeInOutExpo"
};
/*
* 当前纵向滚动条距离页面顶部距离 例如：6378
*/
console.log ( $.Scroll.scrollTop ( ) );
/*
* 根据绝对计算当前处于第几个场景 例如：5.815
*/
console.log ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
/*
* 场景数 例如：5
*/
$current = Math.floor ( ( $.Scroll.scrollTop ( ) + 600 ) / 1200 );
console.log ( "场景数:" + $current );
console.log ( "窗口高度:" + $.Window.height ( ) );
var $newY = $current * 1200 - ( $.Window.height ( ) - 1200 ) / 2;
console.log ( "new Y：" + $newY );
//**********这个地方实现了刷新时自动回到当前场景初始状态***********
$.Scroll.animate ( {
scrollTop : $newY
} , _opt );
$first = $ ( "#story-welcome" );
$first.show ( "slow" );
} );