Faire une bande-annonce de film avec JQuery

jquery-theatrical

Marcofolio propose sur son blog un tutorial JQuery pour créer un « theatrical movie trailer » (que j’ai librement traduit en « bande-annonce de film »). Le résultat final est assez bluffant, on croirait une vraei animation flash ! Avec des fondus enchainés, avec du texte qui bouge…

Je pense juste que le poids total de l’anim est plus lourd que si elle avait été fait en flash, mais elle disponible même sans le flash (sur l’Iphone par exemple).

Une démo est disponible sur le blog ainsi que le tutorial (tout le code est également dispo en téléchargement).

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

2 reponses a Faire une bande-annonce de film avec JQuery

  1. nicogiraud dit :

    « une vraie animation flash » ??? ça fait longtemps que t’as pas vu de flash mon bon monsieur. les animations à coup de jQuery (ou autre libs) me font penser aux effets « DHTML » de l’époque (d’ailleurs c’est exactement ça d’un point de vue technique).

    Attention en outre à ne pas essayer de trop comparer Flash et jQuery, ou alors, prenez soin de le faire sur tous les plans: vitesse & fluidité / poids des ressources / RAM allouée / CPU utilisé / accessibilité.

    Pour ce qui est du rendu, enfin, je trouve ça très bof: pas de rythme dans l’anim, pas d’amorti des mouvements, très linéaire. Tout ça n’est pas très fin.

    J’imagine par ailleurs que le recours à des interpolations (Tweens) sinusoidales, carrées ou cubiques mettrait le navigateur par terre assez vite.

    bisou

  2. Laurent dit :

    Personnellement je pense que l’avantage du jQuery est de pouvoir être indexé facilement alors que pour Flash c’est toute une affaire et pas toujours réalisable !

    Mais c’est vrai que pour une bande annonce, j’ai trouvé le rendu assez moyen et un peu trop saccadé au niveau des effets de texte.

    Mais l’idée en soi n’est pas mauvaise !

Laisser un commentaire

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