Les secrets de notre carte de voeux 2012

Grâce à cet article, nous allons vous initier à l’utilisation de quelques balises HTML5, ainsi qu’à quelques propriétés CSS3, en nous inspirant de l’animation des vœux 2012 que nous avons envoyé à nos partenaires et à nos clients.Avant toute chose, et pour vous mettre dans le bain, voici une démonstration de ce que nous avons créé grâce au mélange HTML5 / CSS3 / Jquery. Sympa non ? Allez, on vous explique tout !

Utilisation du CANVAS

La principale balise HTML5 que nous avons utilisé dans notre animation est la balise « canvas ». C’est via cette balise que nous allons pouvoir dessiner. Imaginez ce bloc comme une feuille blanche. Sortez vos crayons de couleurs, nous allons faire du dessin !

Initialisation

Pour pouvoir dessiner, nous allons avoir besoin de Javascript. C’est notamment Javascript qui va nous permettre d’animer notre dessin. Pour commencer, il faut initialiser le contexte 2D grâce à l’id que nous avons donné à notre canvas. Afin de pouvoir faire appel à notre scène à tout moment, la variable « scene » sera globale.

var canvas = document.getElementById('canvas'); 
if (canvas && canvas.getContext) 
{ 
	scene = canvas.getContext('2d'); 
}

Ça y est, nous avons notre feuille. Pour dessiner, nous allons faire appel à des méthodes intégrées à la balise « canvas » telles que moveTo(x,y), lineTo(x,y), drawImage(image, x, y) ou encore fillRect(x1, y1, x2, y2).

Gardez en tête que l’origine de notre feuille reste le coin haut gauche du bloc. C’est à partir de ce coin que nous allons devoir penser tous les coups de crayon.

Dessiner un rectangle

Commençons par créer un fond noir. Nous pouvons le faire grâce à la méthode fillRect(x1, x2, y1, y2) qui nous permet de faire un rectangle. En précisant l’attribut fillStyle au préalable, nous allons définir la couleur de fond du rectangle :

scene.fillStyle = "#1f1f1d";
scene.fillRect(0, 0, 100, 100);
scene.stroke();
Scene.stoke() ? Oui, c’est cette methode qui veut dire : “C’est bon j’ai fini le dessin que je suis en train de faire ». Ici, elle indique que nous en avons terminé avec le fond noir.

Insérer une image

Et si je souhaite insérer une image ? Il y a la méthode drawImage() . Voici comment l’instancier :

var fond = new Image(); 
fond.src = 'images/fond.jpg'; 
fond.onload = function() { 
	scene.drawImage(fond,25,25); 
	scene.stroke(); 
};

Tracer un trait

La méthode moveTo(x,y), elle va vous permettre de déplacer la mine de notre crayon, et la méthode lineTo(x,y) nous permettra de tracer le trait entre les deux points.

scene.moveTo(10, 10); 
scene.lineTo(20,10);
scene.stroke();

Il est évidemment possible de changer la couleur du trait, l’épaisseur ou toute autre propriété, puis de recommencer l’opération. La seule condition est de terminer chaque action par un appel à la méthode stroke().

scene.strokeStyle = '#1f1f1d';
scene.lineWidth = 5;
scene.lineTo(30,10);
scene.stroke();

Vous savez désormais comment utiliser ces méthodes. A vous désormais de laisser libre cours à votre imagination pour faire les plus beaux dessins possibles grâce au canvas.

Sur notre animation, nous souhaitions exploiter au maximum les nouvelles propriétés CSS également. Durant le parcours du Pacman, deux questions s’affichent à l’écran.

Et la CSS dans tout ça ?

Si vous y prêtez un œil averti, vous observerez que les bords sont arrondis, que le fond est légèrement transparent et qu’il y a une ombre portée. Voici les astuces :

-webkit-border-radius: 10px;
-moz-border-radius: 10px; 
border-radius: 10px; 
box-shadow: 1px 1px 5px #26272b;
opacity: 0.9;

Mais en regardant encore de plus près, on se rend compte qu’une des polices utilisée n’est pas une police que l’on a l’habitude de voir sur Internet. Et c’est normal, puisque CSS3 nous l’autorise désormais.

Commencez tout d’abord par télécharger la police que vous souhaitez sur dafont.com par exemple. Ceci fait, pour maximiser la compatibilité entre tous les navigateurs, nous vous proposons d’utiliser ce générateur de police qui générera plusieurs types de fichiers aux extensions eot, woff, ttf et svg, ainsi qu’un code CSS à mettre en place pour pouvoir utiliser la police dans votre page.

Voici un aperçu du code généré :

@font-face { 
	font-family: 'SavedByZeroRegular'; 
	src: url('../fonts/saved_by_zero-webfont.eot');
	src: url('../fonts/saved_by_zero-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/saved_by_zero-webfont.woff') format('woff'),
	url('../fonts/saved_by_zero-webfont.ttf') format('truetype'),
	url('../fonts/saved_by_zero-webfont.svg#SavedByZeroRegular') format('svg');
	font-weight: normal; 
	font-style: normal;
}

Et l’affichage sur les Smartphones ayant une haute résolution ?

Dernière suggestion : porter l’animation sur les petits écrans. Nous tenions à mettre notre animation à disposition sur les Smartphones. Voici une balise meta à insérer entre les balises « head » de votre page html qui va permettre aux smartphones d’adapter la largeur de votre page. Dans notre cas, l’animation fait 640px de large :

Dernier petit effort : les mobiles n’interprétaient pas tous les tailles de police comme nous le souhaitions. Nous avons dû mettre en place un bout de CSS personnalisé pour les petits écrans. Voici comment :

@media handheld, only screen and (max-device-width: 480px) {
	#bouton_demarrer p {
		font-size: 10px;
	}
	.question { 
		height:370px; 
	} 
}

En conclusion

Cette animation est une petite bombe de nouveautés que nous avons souhaité vous proposer en utilisant au maximum les possibilités offertes par HTML5 et par CSS3. Nous espérons grandement qu’elle vous plaise !

© 2011 Copyright cigo-developpement.fr