L’animation 3D sur worldisbeautiful.net


Aurélien, le 2 août 2013 à 13H37

Worldisbeautiful.net est un de mes sites internet (je vais l'appeler WIB), il s'agit d'un espace qui propose une belle photographie d'un paysage chaque semaine. Je me suis laissé tenter par une petite animation 3D sur ce site qui permet de faire pivoter une photographie de 180 degrés pour afficher des informations, à la manière d'une photographie sur support papier que l'on retourne de la main.

Pour réaliser cette animation j'ai utilisé plusieurs propriétés CSS3 relativement récentes pour l'animation et un tout petit bout de code Javascript comme déclencheur. Nous cherchons à reproduire, une photographie qui pivote avec au verso la même photographie inversée et un texte. Notez que je fais tous mes développements en me basant sur Firefox et que j'adapte aux autres navigateurs si nécessaire.


Nous sommes
au verso
de la photographie !


Nous utilisons une structure HTML basique avec un conteneur global (cadre), un second conteneur qui va pivoter (panneau) et dernier niveau de conteneur pour le recto (photographie) et le verso (information).

<div id="cadre">
	<div id="panneau">
		<div id="photographie"></div>
		<div id="informations">
			<div id="photographie_verso"></div>
			<div id="texte"><br>Nous sommes<br>au verso<br>de la photographie !<br></div>
		</div>	
	</div>
</div>


Pour l'exemple, je me suis limité à un conteneur global de taille limité dans lequel les conteneurs inférieurs sont positionnés de façon absolue de taille 100% en largeur et hauteur.

#cadre {
	position: absolute;
	overflow: hidden;
	width: 300px;
	height: 200px;
	border: 20px solid #DDD;
	margin: 50px;
	background: #EEE;
}
#panneau,
#informations {
	width: 100%;
	height: 100%;
	cursor: ew-resize;
}
#photographie {
	position: absolute;
	width: 100%;
	height: 100%;
}
#photographie,
#informations #photographie_verso {
	background: url('photo.jpg') no-repeat center center;
	background-size: cover;
}
#informations #texte {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('texture.png') repeat top left;
	text-align: center;
}
#informations #photographie_verso {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	filter: alpha(opacity=80);
}


Pour l'animation 3D il faut indiquer au conteneur global une perspective pour donner du réalisme, sinon l'animation se fait de face et nous ne verrons rien.

#cadre {
	-webkit-perspective: 1000px;
	   -moz-perspective: 1000px;
		-ms-perspective: 1000px;
		 -o-perspective: 1000px;
			perspective: 1000px;
}

Sur le conteneur qui va pivoter il faut appliquer la transition sans quoi l'effet sera instantané. Il faut également indiqué à ce conteneur et à ses enfants que nous sommes dans un environnement 3D.

#panneau {
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-transition: all 1s linear;
	   -moz-transition: all 1s linear;
	    -ms-transition: all 1s linear;
	     -o-transition: all 1s linear;
	        transition: all 1s linear;
}

Nous ne touchons pas au conteneur de la photographie recto, par contre nous allons appliquer une rotation de 180° sur le conteneur des informations (photo verso et texte) pour que tout soit dans le sens inverse (puisqu'il est retourné). Nous utilisons le conteneur des informations comme cache ainsi, lorsque nous affichons le recto nous ne voyons pas le texte et vice versa.

#informations {
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	     -o-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
	    -ms-transform: rotateY(180deg);
	     -o-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

Nous appliquons une rotation de 180° à la photographie sur le verso puisque nous souhaitons qu'elle soit inversée par rapport au recto, sinon elle aura la même orientation et l'effet sera raté.

#informations #photographie_verso {
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
	    -ms-transform: rotateY(180deg);
	     -o-transform: rotateY(180deg);
	       transform: rotateY(180deg);
}

Et enfin, nous préparons une class qui sera appliquée via une fonction Javascript sur le conteneur que nous souhaitons faire pivoter.

.verso {
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
	    -ms-transform: rotateY(180deg);
	     -o-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}


Il ne reste plus qu'à ajouter la fonction Javascript et son déclencheur HTML. La fonction va appliquer la class "verso" sur le conteneur si elle n'est pas déjà appliquée sinon elle va appliquer la class "recto". De la sorte, la class "verso" va demander une rotation de 180° et la transition va s'effectuer en 1 seconde dans les conditions 3D ; puis le fait de retirer la class "verso" (ou de la remplacer par "recto") va supprimer la rotation de 180° ce qui aura pour conséquence de faire le mouvement inverse via la transition de 1 seconde et nos conditions 3D.

function pivoter(id) {
	document.getElementById(id).className = (document.getElementById(id).className != 'verso' ? 'verso' : 'recto');
}
<div id="panneau" onClick="pivoter('panneau');">

Télécharger l'animation (archive 7zip)



Comment allez plus loin ?


Sur WIB la construction et la logique sont exactement les mêmes mais les contraintes d'accessibilité et de portabilité m'ont obligé à aller plus loin.

Le visiteur du site peut très bien utiliser un navigateur qui ne supporte pas les technologies récentes utilisées ou il peut tout bêtement bloquer le Javascript. Dans les 2 cas, le visiteur va se retrouver avec un site inopérant et/ou présentant des problèmes graphiques. J'ai donc donné à WIB un comportement par défaut (sans Javascript, sans CSS3) puis en fonction du support du Javascript et des CSS3 j'active mon effet 3D dans un second temps.

J'ai utilisé Modernizr pour pouvoir vérifier le support des technologies et donc proposer mon effet 3D aux visiteurs disposant des navigateurs permettant d'afficher cet effet.

Par ailleurs, tous les navigateurs n'ont pas les mêmes comportements avec ces technologies, dans notre cas il faudra ruser un peu pour avoir notre effet 3D à peu près identique sur les navigateurs qui supportent ces technologies.

Pour connaître le support des technologies CSS3, je vous conseille ce site internet :
http://caniuse.com/#search=transform
http://caniuse.com/#search=transition

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *