Bicikli Fumic

Lotta Nieminen

Square up

Sawyer Hollens head

Berger Fohr

Mandrill

Jess and Russ

Jessica Hische

Patrick Algrim

Love and Lemons

Van Schneider

Lore

Symbolset

Solid Studio

Nicalis

Book of bear

D Day to Victory

Hill song

Black Negative

Disqus

Metafizzy

3 circles studio

Slvczch

Fuge

Franck Chimero

Monet

Pagodabox

Nest

Tag creative studio

Eephusleague

Roger Dubuis

Visit Philly

Tea Cake

Jeremy Cowart

Big Noise

White Board

Twenty 8 Twelve

Google Green

Hardudetideg

Andy Chak

Fruute

Visual Supply

Tawkon

Big Youth

Made in Haus

Swellcast

Crayons to Concept

Bonnes visites et à bientôt

Cowork Chicago

Bonaparte

Krystalrae

Oberhaeuser

Build Conf 2012

Blind barber

Indee Pop games

Parti socialiste – Bilan Sarkozy

Offscreen mag

Built with momentum

A story day

The great discontent

Swirls

Second Story

Teehanlax

Capitol Couture

Matchbox

Oberhaeuser

The Combine

Canvas

Entypo (font)

Fantomas (font)

Websymbols (font)

icomoon (font)

Pictos (font)

A suivre…

Soleil Noir (voeux)

Mezcal Buen Viaje

Beo Play

365 Awesome Designers

Fuzzco

Mandala (Flash)

Firefly

Making love to webkit (voir sur Chrome ou Safari)

Nkwiatek

Parallax Error Beheads You

Atto Partners

Air Lux

Arbeit Suva (Flash)

Sobe

Panoramic story

Planet Propaganda

Bon web!

Les sites avec une navigation intéressante :

The work cycle

Cheval blanc

10 years in type

xc travels

estudioagraph

graydenpoper

pauleka

Des sites aux contenus inspirants

Design by Rolf

Kyle Bean

With more air

Built by Moby

Des animations en CSS3 (les voir dans Chrome ou Safari!)

Image Transitions

Ipad

Photo stack

iPhone 4

Naturellement il est toujours délicat d’utiliser des effets comme ceux-là dans nos sites, mais c’est toujours une bonne source d’inspiration, et la révolution CSS3 n’est plus très loin!

La prochaine, nous verrons des outils très pratiques pour jouer avec CSS3.

Rally interactive

Le portfolio de Miguel Endara

Space 150

Edits Quarterly

James Silverman

Protest

Bike by me

Werkstatt

Pretty girl

Scozzese

Berik Ergali

Design Embraced

Ben Markowitz

(à visualiser dans chrome/Safari)

Dans cette liste on peut trouver autant du portfolio que du site ecommerce et d’autres secteurs. l’inspiration vient de partout et pas seulement des sites eux-mêmes, voici une vidéos bien pensée de ce à quoi pourrait ressembler les interfaces de demain :

Interface Microsoft

Le canvas affiche autant des formes vectorielles, comme vu dans l’article précédent, que des images ou des vidéos, l’intérêt principal étant qu’on peut interagir de façon très poussée avec ces images.

La méthode est semblable à celle utilisé avec CSS, on n’affiche que la zone du sprite souhaitée et on décale l’image pour créer une animation, seulement ici pas besoin de zone de masque, c’est le canvas qui gère tout.

Je passe rapidement sur les bases pour afficher une image dans la balise canvas :

$(document).ready(function(){
	var canvas = $('#myCanvas');
	var context = canvas.get(0).getContext("2d");

	var image = new Image();
	image.src = "exemple.jpg";
	$(image).load(function(){
		context.drawImage(image, 0, 0);
	});
});

Alors ici que fait-on ? Tout simplement nous déclarons une nouvelle image à laquelle nous attribuons une source, et une fois que cette image est chargée nous l’affichons dans le canvas la première valeur numérique étant la position horizontale et la seconde verticale.

Avec canvas il est très facile de n’afficher qu’une partie de l’image. Pour cela on utilise la ligne suivante :

	context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Pas de panique je vous indique à quoi correspondent ces valeurs.

• sx = la distance horizontale entre la coin haut gauche de l’image et le coin haut gauche de l’aperçu.
• sy = la distance verticale entre la coin haut gauche de l’image et le coin haut gauche de l’aperçu.
• sw = la largeur de l’aperçu
• sh = la hauteur de l’aperçu
• dx = la position horizontale du rendu de l’aperçu dans le canvas
• dy = la position verticale du rendu de l’aperçu dans le canvas
• dw = la largeur du rendu de l’aperçu dans le canvas
• dh = la hauteur du rendu de l’aperçu dans le canvas

Les 4 premières valeurs numériques servent à définir l’aperçu par rapport à la source et les 4 dernières à définir la position et la taille dans le canvas

A partir de là nous pouvons nous amuser. Dans mon exemple j’ai repris le sprite de mon petit bonhomme qui court tout nu… (Pas pris le temps de faire les habits…) Chaque ‘frame’ du personnage fait 100×100 pixel, j’y ajoute un élément qui servira pour le décor en le répétant.

Voici le résultat que nous allons atteindre avec le script qui suit :
Démonstration d’animation de sprites avec canvas

Je commence par vous montrer le script que je vais un peu détailler tout du long :

La partie un peu compliquée de ce script concerne l'animation du sprite en elle-même.
La première raison est que pour rendre la course fluide nous rechargeons très fréquemment l'animation (toutes les 33 millisecondes), or nous avons très peu de frames pour la gestuelle du personnage que nous souhaitons animer seulement toutes les 150 ou 160 millisecondes, soit environ 5 fois moins que l'animation de déplacement. Pour cela nous utilisons le compteur et toutes les 5 fois que l'animation se joue nous changerons l'affichage du personnage et afin de savoir à quel moment précis, nous utilisons une expression régulière qui analyse le compteur pour savoir si celui-ci est un multiple de 5. Si le compteur divisé par 5 donne un chiffre entier, alors c'est un multiple de 5 et donc on peu changer l'affichage.

J'ai pensé à cette méthode, ce n'est peut-être pas la plus efficace, mais elle marche, n'hésitez pas à proposer des alternatives.

La deuxième difficultés vient du fait que les animations de gestuelles n'ont pas le même nombre de frames, 3 pour immobile et 4 pour la course. Et en plus ne se déroule pas de la même manière. Pour la version statique, l'animation doit repasser par l'affichage du milieu pour faire une boucle, alors que pour la course, une fois à la 4ème frame, on retourne à celle du début.

Pour cela on utilise un autre compteur qui s'incrémente 5 fois plus lentement que le premier, qui permet de savoir où nous en sommes de l'animation de gestuelle du perso. Dans le cas immobile, une fois arrivé à la dernière frame, on indique qu'il faut retourner en arrière (décrémenter) puis repartir une fois revenu à la première frame. (ré-incrémenter) Dans le cas de la course, une fois arrivé à la dernière frame on se replace simplement sur la première.

Une fois que nous savons tout cela, il suffit tout de récupérer le contexte de l'animation, le personnage court-il? dans quelle direction... ? grâce un listener des touches gauche et droite et changer les variables.

J'espère avoir été assez précis dans mes explications, n'hésitez pas à me poser des questions ou suggérer d'autres méthodes.

Tout ceci n'est qu'un avant goût d'un projet bien plus gros, en chantier actuellement, mais qui s'annonce très excitant.

Je vous recommande chaudement le livre de robhawkes : Foundation HTML5 canvas.

A bientôt

Réaliser des dessins avec uniquement du CSS3, c’était déjà bien amusant et permettait de faire simplement des animations avec une petite couche de js.

Avec l’élément canvas on passe encore à la vitesse supérieure, car avec cette balise on entre encore dans une autre dimensions. A la fois plus simple car en quelques lignes on réalise des formes très complexes, et plus compliqué car il va falloir se replonger un peu dans ces cours de maths, pas bien méchant mais quand même.

En temps, je pense même avoir été plus vite à réaliser la version HTML5, alors que c’était mon premier vrai exercice.
Voici le résultat : HTML5 vs CSS3

Quelques techniques utilisées ici avec la balise canvas :

• Dessiner des rectangles
• Dessiner des cercles et arcs
• Faire des dégradés linéiares et radiaux
• Réaliser des courbes et d’autres formes plus complexes
• Et faire des masques de formes (comme pathfinder d’Illustrator)

Et ceci n’est qu’une petite partie des possibilités.

Pour le moment ces dessins sont statiques, mais très facilement il est possible d’animer ces éléments.

N’hésitez plus et amusez-vous avec la balise canvas, je vous recommande le livre de Rob Hawkes : Foundations HTML5

Have fun!