Flash Info
Accueil > Webdesign > Orange s’anime pour le Tour De France avec un sprite de fou !

Orange s’anime pour le Tour De France avec un sprite de fou !

A l’occasion du Tour De France qui se déroule du 5 au 27 juillet 2014 et de son nouveau site de news sorti depuis quelques mois, Orange a mit en place un animation assez sympa pour indiquer la position des concurrents. L’ensemble est formidablement bien réalisé avec un sprite de malade…

L’animation montre les coureurs en mouvement en mouvement et le défilement du paysage. le tout n’est pas réaliser en Flash, ni en vidéo, ni avec d’autres moyens (flex, silverlight, …) !

Animation d'Orange pour le direct du Tour De France 2014

Tout simplement avec un sprite, du css et un javascript qui permet de déplacer l’image.

Pour rappel : La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d’affichage sur l’une ou l’autre image sera définie en CSS grâce à la propriété background-position.

C’est donc un enchaînement bien huiler de position de background qui permet de générer l’animation que l’on voit à l’œil.

Oui mais voilà, si l’on a quand même l’habitude de créer des sprites avec deux ou 3 images là le sprite de créer est tout simplement impressionnant !

Animation d'Orange pour le direct du Tour De France 2014

En tout cas, ce qui est sur c’est que l’animation est vraiment bien joué et qu’au niveau du poids image cela reste raisonnable avec finalement 3 grandes images qui se déplacent !

Retrouver tous les jours ces animations en accédant au direct de l’épreuve sur le site sport de Orange.

A propos TiteufLeKid

TiteufLeKid, MiniBoss du référencement ! A l'heure ou les autres jouaient au Playmobile, j'ai conçu ma propre GameBoy A l'heure ou les autres jouaient au Lego, j'ai composé ma première symphonie en HTML mineur A l'heure ou les autres se faisaient des calins, j'ai positionné en 1ère place mes premiers sites web. http://www.tooeasy.fr

Les commentaires sont fermés

Facebook Auto Publish Powered By : XYZScripts.com