Effet js compliqué

Bonjour à toutes et à tous,

Voila j'aimerais tenter de reproduire l'effet (sur les blocs) qui se trouve sur ce template en javascript :

http://www.templatemonster.com/flash-templates/26032.html

Mais je n'ai pas ce genre de compétences poussées en javascript.

Y'a t-il un moyen simple de réaliser cet effet avec une bibliothèque comme jquery ou autre ?

Petite précision supplémentaire: je voudrais que les deux cadres qui s'inversent ne soient pas des img mais des div.

Merci pour votre aide.

Edit: il existe peut être un javascript similaire déja développé. Ces solutions m'intéressent également.
Modifié par ashesheart (22 Oct 2009 - 19:59)

ashesheart a écrit :
Y'a t-il un moyen simple de réaliser cet effet avec une bibliothèque comme jquery ou autre ?

Non.

Avec des images en PNG, en s'aidant d'une bibliothèque telle que jQuery, et en codant une fonction d'animation qui gère le déplacement des deux images et le passage de l'une devant l'autre (modification du z-index à un instant t), on doit pouvoir s'en approcher. Il y a un ou deux effets de lumière qu'on ne pourra à priori pas reproduire précisément.

On devrait pouvoir arriver à un résultat correct. Les démos de différents plugins jQuery ou Mootools montrent des choses relativement proches. Voir les démos de jQuery Cycle, par exemple.

Cependant, coder ce genre d'animation n'est pas simple, même avec l'aide des bibliothèques JS mentionnées. D'où ma réponse «non» ci-dessus.

Enfin, même en arrivant à reproduire cet effet, il faudra voir si on obtient une fluidité correcte dans les différents navigateurs. Avec les moins capables en JavaScript (IE...), ce n'est pas garanti.

ashesheart a écrit :
Petite précision supplémentaire: je voudrais que les deux cadres qui s'inversent ne soient pas des img mais des div.

Des DIV avec des images de fond (pas plus compliqué que des IMG), ou bien des DIV avec un contenu texte ou ce que l'on voudrait, et un effet penché appliqué par la suite en CSS ou JavaScript? Dans le deuxième cas, ça ne sera pas possible. JavaScript ne permet pas de modifier l'aspect d'un élément (on ne peut que modifier des propriétés CSS dynamiquement, c'est ainsi qu'on réalise des animations d'éléments en JS). Quant à CSS, il y a la possibilité en CSS3 d'incliner un élément, mais à ma connaissance ça n'est implémenté que par Mozilla (peut-être aussi par Webkit).

Je te remercie pour toutes ces précisions.

Pour les effets de lumière je ne compte pas les faire ou alors faire un effet de changement de couleur (ça ne devrait pas être trop compliqué). L'inclinaison non plus n'est pas primordiale.
Ce qui m'intéresse vraiment c'est l'effet du passage de l'un sous l'autre.

Jquery Cycle me semble adapté, après pour gérer les deux animations en parallèle, je peux utiliser prototype par exemple. Qu'en penses-tu ?

Enfin pour les différents navigateurs, seul une compatibilité IE7 et firefox sont nécessaires.

Merci encore pour ton aide.

ashesheart a écrit :
Jquery Cycle me semble adapté, après pour gérer les deux animations en parallèle, je peux utiliser prototype par exemple. Qu'en penses-tu ?

Que mélanger deux bibliothèques JS pour réaliser un effet graphique c'est détériorer sérieusement les performances d'un site pour pas grand chose. Et que ça peut être compliqué à gérer en amont, et à maintenir en aval. Donc plutôt à proscrire.

Les solutions:
- trouver un script qui fasse précisément ce que l'on souhaite, ou qui s'en rapproche... le script peut utiliser jQuery ou Prototype ou Mootools ou ExtJS ou autre, mais il vaut mieux s'en tenir à une seule bibliothèque JS utilisée;
- apprendre suffisamment de JS (et éventuellement l'une ou l'autre bibliothèque JS) pour coder soi-même ce dont on a besoin.

jQuery Cycle a un effet proche de ce que tu souhaites, mais n'est pas conçu pour se déclencher au survol. Si tu maitrises déjà les bases de JS et jQuery (voire un peu plus), tu peux plonger dans le code source et repérer les parties qui t'intéressent pour t'en inspirer. Si tu n'as pas ces bases+, mieux vaut chercher ailleurs.

Entendu, merci pour ces conseils. Je vais essayer de plonger dans le code. J'ai quelques bases donc je vais voir ce que ça donne. Je vous tiens au courant, on ne sait jamais, ça peut intéresser plusieurs personnes.

ce style a été réalisé avec adobe flash et action script 3 pas avec java script !! florent vercheld j'ai suivi votre formation elephorm xhtml css elle etait trop bien merci !!!