Bit This 视觉差滚动效果分析

最新推荐文章于 2022-10-12 17:48:09 发布

adamed

最新推荐文章于 2022-10-12 17:48:09 发布

阅读量228

点赞数

分类专栏：技术类

技术类专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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" );
    } );