WebCssDesign

Si vous avez déjà eu envie de créer une animation simple, rapide et sans l’utilisation de Flash alors ce tuto est fait pour vous.
Une simple animation alliant diaporama d’images et courtes phrases de transition avec effet d’élargissement sur le texte. Cela est possible avec jQuery!


Démonstration par l’exemple:
Le code HTML

<div id="theater">
	<div id="movieoverlay">
	<img src="images/play.png" alt="Play" class="playbutton" />
	<div id="overlaybg"></div>
	</div>
	<div class="preview prevtext">
	<p>In a world,<br />where fruits dominate the earth</p>
	</div>
	<div class="preview prevtext">
	<p>Action</p>
	</div>
	<div class="preview previmgwide">
	<img src="images/preview_04.jpg" alt="Preview 04" />
	</div>
</div>
	<div class="preview previmgwide">
	<img src="images/preview_06.jpg" alt="Preview 06" />
	</div>
	<div class="preview prevtext">
	<p>Paris Hilton<br />as <em>&#8220;The Cherry&#8221;</em></p>
	<p>June 2010</p>
	</div>
	</div>

La partie CSS

#theater {
border:5px solid #222;
height:400px;
overflow:hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color:#111;
}

.playbutton {
position:absolute;
margin:130px 0 0 320px;
}
#movieoverlay {
height:100%;
cursor:pointer;
}
#overlaybg {
background-color:#000;
height:100%;
width:100%;
background:url("../images/preview.jpg");
}

.preview { display:none; }
.preview p {
margin-top:150px;
text-align:center; f
ont: bold 40px/35px Helvetica, Arial, Sans-serif;
color:#bbb; width:780px;
line-height:60px;
}

.movietitle {
font-size:70px !important;
color:#EF9824 !important;
font-transform:uppercase !important;
text-shadow: 0px 2px 6px #333;
}

Et le plus important le javascript:

/* Time to preview a preview */
var PREVIEWTIME = 3000;

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
	// Set the opacity for the movie overlay (start screen)
	$("#overlaybg").fadeTo(0, 0.1);

	$("#movieoverlay").click(function(){
		$(this).fadeOut(function(){
			setTimeout("animatePreviews()", 500);
		});
	});
});

/* Variable to store which preview is currently viewed */
var currentPreview = -1;

/**
* Animates the previews
*/
function animatePreviews() {
	currentPreview++;

	if( $(".preview:eq("+currentPreview+")").hasClass("prevtext") ) {
		animateTextPreview($(".preview:eq("+currentPreview+")"));
	} else if ( $(".preview:eq("+currentPreview+")").hasClass("previmgheight") ) {
		animateImagePreviewHeight($(".preview:eq("+currentPreview+")"));
	} else {
		animateImagePreviewWide($(".preview:eq("+currentPreview+")"));
	}
}

function animateTextPreview(previewElement) {
	$(previewElement)
		.fadeIn("slow")
		.animate({
			letterSpacing : "3px"
		}, PREVIEWTIME)
		.fadeOut("slow", function(){
			animatePreviews();
		});
}

function animateImagePreviewWide(previewElement) {
	$(previewElement)
		.fadeIn("slow")
		.animate({ marginLeft : "-100px"} , PREVIEWTIME)
		.fadeOut("slow", function(){
			animatePreviews();
		});
}

function animateImagePreviewHeight(previewElement) {
	$(previewElement)
		.fadeIn("slow")
		.animate({ marginTop : "-100px"} , PREVIEWTIME)
		.fadeOut("slow", function(){
			animatePreviews();
		});
}

Explications:
* previewElement – Déclaration de l’élément previewElement qui peut être animé.
* .fadeIn – Au départ, l’élément preview est sur position fade in.
* .animate – Ensuite, l’élément preview est animé. – le texte change sa propriété letter-spacing et les images peuvent de déplacées.
* .fadeOut – Finir, l’élément preview est sur position fade out.
* animatePreviews() – A la fin, il appelle la fonction animatePreview().

Cela crée une boucle pour manipuler l’élément preview.

Le résultat est plutôt pas mal et prometteur.

Voir la démonstration en action : Démo animation jQuery
Sources à télécharger sur cette page : Télécharger fichiers sources (zip 718ko)

Catégories: Ajax, Css
Tags: animation, diaporama, jquery