Bit This 视觉差滚动效果分析

Bit This 是一家位于西班牙马德里的代理公司。他们用视觉差滚动效果以展示公司的规制度和行为准则。5个简单的原则就将其品牌和客户包括你们紧密相连。

网站地址：http://www.bit-this.com/eng.html

---

该网站实现效果基础原理：

div{

  width: 100%;  height: 1200px;  margin: 0 auto;  overflow: hidden;

}

a

a

---

这段代码没有任何复杂的地方，就是2个长的很高的div。

但是添加上图片以后~~

      background: url('http://www.bit-this.com/files/fondo_bit_this.gif') no-repeat fixed 50% 50% transparent;">a

a

 

---

这里最最重要的一个属性是：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属性的对象（也就是页面中：
	 * 与最后一个section