crea.sit.web – le.blog !

Le CSS3 permet énormément de fantastiques possibilités en matière d’animation. Aujourd’hui, nous allons explorer ensemble la possibilité de faire apparaître puis disparaître en fondu quelques textes, avec un bel effet de flou, en utilisant les propriétés d’animation du CSS3, et apporter un peu de vie à une page de démarrage de site.

Veuillez noter que ces animations ne fonctionnent que dans les navigateurs les plus modernes qui les intègrent : les dernières versions de Firefox, Safari et Google+. Elles ne fonctionnent ni dans Internet Explorer 9 ni dans Opera.

Afin de ne pas gonfler le tutoriel, il n’y a dans cet article que des extraits des codes HTML et CSS, mais vous les trouverez en intégralité dans les fichiers-source téléchargeables en fin d’article. Allez, c’est parti !

Que diriez vous d’une page de démarrage où apparaîssent quelques phrases choc les unes après les autres, avec un bel effet de flou ? Tout d’abord cliquez sur l’image ci-dessus pour voir la démo, avant de nous lancer dans le code ; vous allez voir, c’est bluffant !

Le code HTML

Nous allons avoir un conteneur et une div de contenu avec quelques vues (frames) à l’intérieur, une pour chaque phrase. En outre, nous aurons un globe et un élément de lien qui apparaîtront seulement à la fin de l’animation.

<div class="sp-container">
	<div class="sp-content">
		<div class="sp-globe"></div>
		<h2 class="frame-1">Ca detruit la planete</h2>
		<h2 class="frame-2">C'est du meurtre de masse industrialise</h2>
		<h2 class="frame-3">Tu peux l'arreter</h2>
		<h2 class="frame-4">Maintenant !!</h2>
		<h2 class="frame-5">
			<span>Sauve la planete.</span>
			<span>Aime la vie.</span>
			<span>Deviens vegetarien.</span>
		</h2>
		<a class="sp-circle-link" href="index2.html">Rejoins nous !</a>
	</div>
</div>

Le code CSS

Chaque phrase va être au centre de l’écran et nous ferons apparaître et disparaître chacune en utilisant l’animation blurFadeInOut :

.sp-container h2 {
	position: absolute;
	top: 50%;
	line-height: 100px;
	height: 100px;
	margin-top: -50px;
	font-size: 100px;
	width: 100%;
	text-align: center;
	color: transparent;
	animation: blurFadeInOut 3s ease-in backwards;
}

Définissons maintenant le délai pour chaque phrase :

.sp-container h2.frame-1 {
	animation-delay: 0s;
}
.sp-container h2.frame-2 {
	animation-delay: 3s;
}
.sp-container h2.frame-3 {
	animation-delay: 6s;
}
.sp-container h2.frame-4 {
	font-size: 200px;
	animation-delay: 9s;
}

La dernière vue composée de 3 phrases n’aura pas d’animation globale : ses spans seront animés séquentiellement :

.sp-container h2.frame-5 {
	animation: none;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
	animation: blurFadeIn 3s ease-in 12s backwards;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
	animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
	animation-delay: 14s;
}

Le globe est un élément avec une position absolue et une image de fond. Nous le ferons apparaître en fondu au bout de 14 secondes, lorsque toutes les animations précédentes serobt achevées. Il sera mis à l’échelle afin d’occuper tout l’écran :

.sp-globe {
	position: absolute;
	width: 282px;
	height: 273px;
	left: 50%;
	top: 50%;
	margin: -137px 0 0 -141px;
	background: transparent url(../images/globe.png) no-repeat top left;
	animation: fadeInBack 3.6s linear 14s backwards;
	opacity: 0.3;
	transform: scale(5);
}

Le lien « Rejoins nous ! » sera un rond que nous ferons apparaître avec un effet de rotation :

.sp-circle-link {
	position: absolute;
	left: 50%;
	bottom: 100px;
	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #fff;
	color: #3f1616;
	font-size: 25px;
	border-radius: 50%;
	animation: fadeInRotate 1s linear 16s backwards;
	transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
	background: #85373b;
	color: #fff;
}

Et maintenant, observons chacune des animations :

La première animation concerne toutes les phrases qui vont apparaître puis disparaître. Nous simulerons l’effet de flou grâce à l’ombre du texte et l’échelle :

@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
	}
}

L’animation suivante est presque la même, nous voulons juste que le texte ne disparaîsse pas (c’est pour la dernière phrase, qui reste à l’écran) :

@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}

Le globe aura une double animation : une mise à l’échelle qui le grossira et une diminution de son opacité :

@keyframes fadeInBack{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	50%{
		opacity: 0.4;
		transform: scale(2);
	}
	100%{
		opacity: 0.2;
		transform: scale(5);
	}
}

La dernière animation concerne le lien (qui dans le cas présent rejoue l’animation, mais qui devrait nous amener à une autre page avec un formulaire). Il apparaîtra en fondu tout en subissant une rotation :

@keyframes fadeInRotate{
	0%{
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

Vous pouvez télécharger tous les fichiers-source constituant cette page html en cliquant ici.

Cet article est l’adaptation partielle, la transposition et la traduction d’un tutoriel paru sur le site « Codrops » intitulé « Splash and Coming Soon Page Effects with CSS3 » par Mary Lou. Merci à eux !