Bit This 视觉差滚动效果分析

adamed

浏览: 183826 次

最近访客更多访客>>

离氺的鱼

icnd

lenglian666

2102476624

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术类

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

div{

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

}

</style>

</head>

<body>

</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>

这里最最重要的一个属性是：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" );
    } );

分享到：

localStorage、sessionStorage用法总结 | jQuery源码历代记5

2012-07-06 11:44
浏览 2890
评论(0)
论坛回复 / 浏览 (1 / 4073)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论