Des anim sur un site responsive

Bonjour,

Un client me demande d'intégrer un site en responsive avec des animations.

Je n'ai encore pas intégré d'anim, à part du swf il y a quelque temps. Je mets en place des site WordPress.

Sur sa maquette Psd, il y a par exemple un oiseau immobile sur une photo, qui à un moment s'anime (vu sur un fichier .mov de la maquette), puis s'envole jusqu'à sortir de la page.
Il y a aussi par exemple un bandeau lumineux qui fait défiler des titres (comme dans un aéroport). Toute la page est une image maquettée sur Photoshop, contenant quelques éléments dont certains s'animeront.

Chaque page de son site est designée ainsi, en Psd. Il a créé ses anim sur Photoshop apparemment (je pratique Photoshop mais je ne savais pas qu'on pouvait faire des anim !).
Il a généré ses anim en .mov.

Et en gros il aimerait savoir si je peux faire tout l'intégration, en site Wordpress.

J'en viens à me poser des tas de questions,
Comment ça se passe aujourd'hui l'anim sur le web ? c'est quoi les fichiers ? ça reste léger pour du web ? comment ça se gère avec du Html5 ?
Est-ce qu'un intégrateur 'de base' peut s'en sortir avec ça (des .mov fournis par un client) ou faut-il forcément connaitre un langage nouveau ?
je ne connais pas encore l'anim, voilà pourquoi je ne comprends pas comment répondre à sa demande, et comment ses éléments animés peuvent être compatibles avec un site responsive.
Et qu'en est-il des tablettes etc ?

Merci d'avance pour vos lumières !

bonjour
Je pense que la question est vaste large .....
la question est elle :
1- est il possible de convertir un site non responsive en un site responsive ?
2-est il possible de convertir un site non wordpress en un site wordpress ?
3-comment réécrire les animations exporté en vidéo ( .mov) en animation HTMLS JS CSS ?
4-comment de savoir le comportement de la zone d affichage d'un widget player d'un fichier .mov dans un design RWD ?
5- quelles versions couplesOS/Browser/player supporte format *.mov ?
6- quelles sont les techniques actuelles d'animations pour un page web ?
7- comment définir la taille d une image dans un design responsive pour adapter la taille de l image à la taille de l'écran ?

Aujourd'hui on évite les technologies propriétaires fustigé par Apple (1) :silverlight , flash , java , "3DUnity" ( quicktime VRML) et les environnement et language de développement qui vont avec ( OS apple - Xcode - objective C// Mono Windows - -VStudio- C#Sharp // ....) - . Ces technologies ont/sont tous capables d'animation ( jeux 2d 3d ) mais n'utilise pas CSS HTML JS ( Unity3D utilise un language proche d'EmacScript ). En CSS il y a les propriétés selector { animation-name: anim1 ; } associer a @keyframes anim1 { }.Je n 'aborde pas les CSS transition qui sont des animations simple (CSS property compatible with animatable ) . Sinon il y a balise HTML <canvas> qui utilise WebGL et OPENGL ce qui revient pour moi a du Direct3D ( API 3D microsoft sans microsoft ) .

Sinon pour les library Framework javascript ( notre sujet ) il y a GSAP ,velocity , createJS ,easeJS , TweenJS voir http://davidwalsh.name/css-js-animation

Sinon pour les outils d animation javascript qui pourraient remplacer Flash il y a : Adobe Edge et Google Web Designer .. voir http://blog.templatemonster.com/2014/07/18/html5-animation-tools/ .

Donc actuellement si vous voulez de la vidéo il faut tout coder au format vidéo compatible HTML 5 video player /widget ( gérer implémenter par le browser en CSS javascript ) voir http://tassedecafe.org/2073-responsive-redimensionner-videos-conservant-ratio.html et voir aussi si un standard/norme concernant l'animation existe/émerge auprès des organismes de normalisation comme le W3C http://www.w3.org/TR/web-animations/ . voir aussi http://caniuse.com/#feat=video
.




Vbscript ActionScript TypeScript CoffeScript tous sont des languages basé sur EmacScript ( typage très faible ) : Changer de langage implique de changer d 'environnement de développement et de libraries framework ( qui en gros font tous les mêmes choses mais avec des nom de fonctions méthodes différentes ) .

Un intégrateur n'est pas un développeur mais doit comprendre le code pour le modifier . Chaque problèmes à une solution DRY !
a- Pour l 'affichage de texte type aéroport voir http://www.jqueryscript.net/text/Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap.html .
b- animation avant de fermer une page http://stackoverflow.com/questions/20505277/animation-before-leave-the-page-jquery
c-trajectoire d'un objet http://stackoverflow.com/questions/27640842/jquery-animate-smoothing
d- animation d'un objet immobile a plusieurs état http://minimalmonkey.com/fun-animations-with-css3/
f- animation finale sur codepen http://codepen.io/tag/bird/

Cordialement

NB comment une oiseau ( image ) dans un fichier mov peut il s'échapper de la vidéo ? Quel est la technique utilisée pour obtenir cet effet ? La video est elle situé/collé sur un bord de la page ? une image reste dans la zone d affichage du player !!!
Modifié par 75lionel (02 Jul 2015 - 12:54)