網頁視差效果精品教程:具有視差效果的標籤頁切換

webhek發表於2014-07-17

  今天要向大家分享的是一個簡單的具有視差效果的標籤頁切換技術。我們使用CSS動畫技術,控制標籤頁切換時產生的動畫動作,通過背景圖的移動,讓瀏覽者感覺到神奇的視差效果。

  本教程是受Kendo UI的啟發,它是一個HTML UI框架。在經過研究之後,我們最終決定仿製出這種效果。

  觀看演示

 工作原理

  顯示的內容由多個標籤頁組成,每個裡面都有一個H2元素,一個文欄位落,一個連結和一張圖片:

<div id="da-slider" class="da-slider lazy ">

	<div class="da-slide lazy ">
		<h2>Some headline</h2>
		<p>Some description</p>
		<a href="#" class="da-link lazy ">Read more</a>
		<div class="da-img lazy ">
			<img src="/lazy.gif?17c416" data-original="images/1.png" alt="image01" />
		</div>
	</div>
	
	<div class="da-slide lazy ">
		<!-- ... -->
	</div>
	
	<!-- ... -->
	
	<nav class="da-arrows lazy ">
		<span class="da-arrows-prev lazy "></span>
		<span class="da-arrows-next lazy "></span>
	</nav>
	
</div>

  關鍵是標籤頁切換時的動畫。我們通過給每個標籤頁一個“方向類”來控制它們。例如,如果我們要把當前標籤頁向右滑動,我們就給它一個“da-slide-toright”類。這裡有4個不同的css類,每個負責一種可能運動方向。

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-slide-toleft

  對於這些css類,我們設計出各種不同的動畫效果:

/* Slide in from the right*/
.da-slide-fromright h2{
	animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
	animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
	animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
	animation: fromRightAnim4 0.6s ease-in 0.8s both;
}

/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}

  動畫選項

  這些動畫是可以調整的,我們提供了一些引數選項:

$('#da-slider').cslider({

	current		: 0, 	
	// index of current slide
	
	bgincrement	: 50,	
	// increment the background position 
	// (parallax effect) when sliding
	
	autoplay	: false,
	// slideshow on / off
	
	interval	: 4000  
	// time between transitions
	
});

  視差效果是通過將背景圖向內容頁移動方向的反向移動獲得的。通過bgincrement引數,你可以控制移動的畫素點。

  觀看演示

  需要注意的是,我們的程式碼裡包含的對那些不支援CSS3動畫和變換的瀏覽器的應變處理。

  希望你能從我們的這個小例子中學到一些有用的東西!

相關文章