使用jQuery和CSS3创建一个全屏幕幻灯效果


介绍来自于tympanus的一个全屏幻灯特效教程,在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效,你将看到每一个幻灯都从水平或者垂直中间断开然后消失,使用不...

介绍来自于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="25" data-cut1-scale="2" data-cut2-scale="1">
<div class="sl-deco" data-icon="I"></div>
<h2>Donna nobis pacem</h2>
<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
</div>

<div class="sl-slide sl-slide-color-3" data-orientation="horizontal" data-cut1-rotation="-5" data-cut2-rotation="10" data-cut1-scale="2" data-cut2-scale="1">
<div class="sl-deco" data-icon="t"></div>
<h2>Acta Non Verba</h2>
<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
</div>

</section>

</div>

Javascript代码

(function( $, undefined ) {

/*
* smartresize: debounced resize event for jQuery
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery.smartresize.js
*
* Copyright 2011 @louis_remi
* Licensed under the MIT license.
*/
var $event = $.event, resizeTimeout;

$event.special.smartresize = {
setup: function() {
$(this).bind( "resize", $event.special.smartresize.handler );

更多 css 相关资讯

Cufon, jQuery和CSS3实现的超强飞出菜单

这里教程通过使用cufon类库实现比较酷的的字体,如果你不知道什么是cufon请参考其它文章。Cufon现在的使用可能不如以前了,更好的选择是使用Google font,但是很可惜,中文

HTML5 CSS3 jQuery制作视频播放器完全指南

导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器,但在各大本土浏览器厂商的努力

jQuery和CSS3定制HTML5视频播放器

目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的。现在,只需要有支持H

jQuery插件实现css3效果

jQuery插件实现css3效果

css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松

更多 jquery特效 相关资讯

分享5个超酷flash样式的jQuery导航和菜单

分享5个超酷flash样式的jQuery导航和菜单

当年风光无限的Flash特效,大家肯定在自己的项目和网站上应用过,现在看来依然非常的炫目,随着web技术的发展,我们现在可以使用Javascript开发出类似绚丽的应用,今天我们介

0基础接触html5之jquery(一)简介

本人之前做as的,对html真的是0基础,都是这几天自己摸索的,所以肯定有很多考虑不到,或说的不对的地方。欢迎拍砖 html5离不开js编程,而进行js编程就不得不说Jquery,那么什么是Jque

更多 css3动画 相关资讯

Cufon, jQuery和CSS3实现的超强飞出菜单

这里教程通过使用cufon类库实现比较酷的的字体,如果你不知道什么是cufon请参考其它文章。Cufon现在的使用可能不如以前了,更好的选择是使用Google font,但是很可惜,中文