前几天偶然间看到了Adham Dannaway的网站，首页的效果狠感人，让人耐不住冲动想研究研究，这不，昨天把它抠了出来，分享给大家。为了简化问题，阉割了浏览器检测和响应式布局，sorry，感兴趣的朋友可以自行找Adham Dannaway研究。

大家可以看demo，或是下载。

下面来看看具体的实现方法。

主要效果的html文档部分如下，主要分为两个部分，文字显示，图片动画。div#designer和div#coder用来显示文字，img#face-img用来显示初始的图片，div#designer-img、div#designer-bg和div#coder-img、div#coder-bg用来实现鼠标移动时的图片切换效果。

  

	

		
			

				

					
designer
					
User Interface Designer with a passion for designing 
	beautiful and functional user experiences. Minimalist who believes that less is more.
				
			
		
		
			

				

					

					
Front End Developer who focuses on writing clean, elegant and efficient code. Love HTML5, CSS3, WordPress  and a touch of jQuery.
				
			
		
		

		

		

		

	
  

加入css和js，这个是关键。

css实现布局

.face {
	width: 1040px;
	height: 600px;
	margin: 0 auto;
	cursor: pointer;
	position: relative
}
.face .coder, .face .designer {
	width: 520px;
	height: 600px;
	top: 0;
	position: absolute
}
.face .coder .description, .face .designer .description {
	position: absolute;
	top: 160px;
	width: 270px
}
.face .coder p, .face .designer p {
	display: block;
	font-size: 16px;
	font-size: 1.6rem;
}
.face .coder {
	text-align: left;
	right: 0
}
.face .coder .description {
	right: 0
}
.face .designer {
	left: 0
}
.face .designer .description {
	left: 0
}
.face .designer-img, .face .coder-img {
	width: 420px;
	height: 600px;
	position: absolute;
	top: 0;
	background: url(sprite-home.png) 0 0 no-repeat;
	display: block;
	z-index: 1
}
.face .designer-img {
	background-position: 0 -600px;
	left: 100px
}
.face .coder-img {
	background-position: 100% 0;
	right: 100px
}
.face .designer-bg, .face .coder-bg {
	width: 420px;
	height: 200px;
	position: absolute;
	bottom: 0;
	background: url(sprite-home.png) 0 -1300px no-repeat;
	display: block
}
.face .designer-bg {
	left: 100px
}
.face .coder-bg {
	right: 100px;
	background-position: 100% -1300px
}

/* 
* 页面初始化动画
*/
$.fn.animateHome = function() { 
	$('#content').animate({'opacity':'1'}, 500, 'easeOutExpo');
	$('#designer-img').css({'left':'-500px'}).stop().animate({'opacity':'1', 'left':'100px'}, 1000, 'easeOutExpo');
	$('#coder-img').css({'right':'-500px'}).stop().animate({'opacity':'1', 'right':'100px'}, 1000, 'easeOutExpo');
	$('#designer-bg').css({'left':'-500px'}).stop().animate({'opacity':'1', 'left':'100px'}, 1500, 'easeOutBack');
	$('#coder-bg').css({'right':'-500px'}).stop().animate({'opacity':'1', 'right':'100px'}, 1500, 'easeOutBack');
	$('#designer').delay(1500).animate({'opacity':'1'}, 500, 'easeOutExpo');
	$('#coder').delay(1500).animate({'opacity':'1'}, 500, 'easeOutExpo', function(){ animateFace(); });
}; 

/* 
* 图片动画
*/
function animateFace() {
	//获取页面元素
	var designerImg 	= $('#designer-img');
	var coderImg 		= $('#coder-img');
	var designerHover	= $('#designer');
	var coderHover		= $('#coder');
	var designerDesc	= $('#designer-desc');
	var coderDesc		= $('#coder-desc');	
	var designerArrow	= $('#designer-arrow');
	var coderArrow		= $('#coder-arrow');		
	var designerBg		= $('#designer-bg');
	var coderBg			= $('#coder-bg');
	var face 			= $('#face');
	var section 		= $('#section');
	var duration 		= 500;

	var mouseX = 0;
	var relMouseX = 520;
	var xp = 520;
	frameRate =  30;
	timeInterval = Math.round( 1000 / frameRate );		

	section.mouseenter(function(e){

		// Get mouse position
		section.mousemove(function(e){

		   	// 获取鼠标位置
		   	mouseX = e.pageX;

		   	// 相对于div.face的位置
		   	relMouseX = mouseX - face.offset().left;

		});
		
		// 基于鼠标运动的动画
		loop = setInterval(function(){

			// 一定距离分步走完，类似缓动效果
			xp += (relMouseX - xp) / 12;

			designerImg.css({width:420 + (520 - xp) * 0.5, left: 100 + (520 - xp) * 0.1});
		    coderImg.css({width:420 + (xp - 520) * 0.5, right: 100 - (520 - xp) * 0.1});

		    designerBg.css({left: 100 + (520 - xp) * 0.05, opacity: ((1040 - xp)/520)});
		    coderBg.css({right:  100 + (xp - 520) * 0.05, opacity: (xp/520)});

		    designerDesc.css({opacity: ((1040 - xp)/520)});
		    coderDesc.css({opacity: (xp/520)});

		}, timeInterval );

	}).mouseleave(function(e){ 

		// 鼠标离开时复原操作
		clearInterval(loop);
		xp 			= 520;
		mouseX 		= 0;
		relMouseX 	= 520;

		designerImg.hoverFlow(e.type, {width: 420, left: 100}, duration, 'easeOutQuad');
		coderImg.hoverFlow(e.type, {width: 420, right: 100}, duration, 'easeOutQuad');
		coderDesc.hoverFlow(e.type, {opacity: 1}, duration, 'easeOutQuad');
		designerDesc.hoverFlow(e.type, {opacity: 1}, duration, 'easeOutQuad');
		coderBg.hoverFlow(e.type, {right:100, opacity: 1}, duration, 'easeOutQuad');
		designerBg.hoverFlow(e.type, {left:100, opacity: 1}, duration, 'easeOutQuad');
	}); 
};

完工！感谢牛人Adham Dannaway
---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------