在线演示  本地下载

在今天这篇文章中，我们将介绍来自于tympanus的一个全屏幻灯特效教程，在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效，你将看到每一个幻灯都从水平或者垂直中间断开然后消失，使用不同的data-attributes属性来定义类型，旋转和角度等幻灯属性，这样我们可以创建非常独特的幻灯效果。

我们将使用到如下的插件：

• jQuery cond by Ben Alman：帮助你使用链式来书写if-then-else语句
• jQuery Transit by Rico Sta. Cruz：帮助你更见简单快捷的使用CSS3动画

浏览器支持：

主要代码

HTML代码：

<div class="container">

	<!-- Codrops top bar -->
	<div class="codrops-top">
		<a href="http://tympanus.net/Tutorials/CSS3BouncingBall/">
			<strong>&laquo; Previous Demo: </strong>3D Bouncing Ball with CSS3
		</a>
		<span class="right">
			<a href="http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/">
				<strong>Back to the Codrops Article</strong>
			</a>
		</span>
		<div class="clr"></div>
	</div><!--/ Codrops top bar -->
	<div class="ie-note">Not supported by your browser</div>
	
	<section id="sl-slider" class="sl-slider">
	
		<div class="sl-slide" data-orientation="horizontal" data-cut1-rotation="-25" data-cut2-rotation="-25" data-cut1-scale="2" data-cut2-scale="2">
			<div class="sl-deco" data-icon="6"></div>
			<h2>A bene placito</h2>
			<blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
		</div>
		
		<div class="sl-slide sl-slide-dark" data-orientation="vertical" data-cut1-rotation="10" data-cut2-rotation="-15" data-cut1-scale="1.5" data-cut2-scale="1.5">
			<div class="sl-deco" data-icon="q"></div>
			<h2>Regula aurea</h2>
			<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
		</div>
		
		<div class="sl-slide sl-slide-color-1" data-orientation="horizontal" data-cut1-rotation="3" data-cut2-rotation="3" data-cut1-scale="2" data-cut2-scale="1">
			<div class="sl-deco" data-icon="O"></div>
			<h2>Dum spiro, spero</h2>
			<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
		</div>
		
		<div class="sl-slide sl-slide-color-2" data-orientation="vertical" data-cut1-rotation="-5" data-cut2-rotation="