Défilement horizontal d'une image au passage de la souris

Bonjour à tous,

Je suis tombé sur un site qui m'a beaucoup plus il y a quelques jours où il y a un système de défilement d'image superposée avec fond transparent, et au passage de la souris de gauche à droite les différents éléments se superposent et passent de gauche à droite.

Je vous laisse consulter l'exemple: http://www.fatboy.fr/products/

Ma question est simple: quel est la technique utilisée ? et est-il possible de faire ça en HTML5 ou CSS, voir Javascript ? Le flash et moi nous sommes pas amis du tout... D'une part pour la réputation lié aux problèmes du référencement et également parce-que je suis un n00b3 en Flash

Merci pour vous lumières !

Salut dimsnet67

Oui c'est possible. En javascript ou jquery. Mais plus simple en Flash : d'ailleurs l'exemple que tu nous donne est en Flash.

Il s'agit ici d'objet placer sur deux ou trois ou quatre niveaux. Chaque niveau défile à des vitesses différentes. Quand je dis niveau, je fais mention de la profondeur. En CSS nous dirions z-index.

Les objets du premier plan défile plus rapidement que les objets du deuxième plan et ceux du deuxième plan défile plus rapidement que ceux du troisième plan etc. Tout ça pour montrer un déplacement globale des objets qui nous rapproche de la réalité. Suffit de se promener en voiture sur une route de campagne pour constater. Les objets les plus proche défilleront plus rapidement et les objets les plus éloigner défileront plus lentement

Tu n'est pas un ami de Flash et je te comprend. Par contre un script Flash et puis nommé « scrolling différentielle » gère ce genre d'animation et ce, depuis la génération MX6. Voire même Flash 5. Voir sur - Bible Micro Application Flash MX. Ouf c'est vieux ça.

Ce qu'il faut comprendre ici sont les plans « niveau de profondeur » et la vitesse de défilement, différente à chacun des plans. Évidemment ce genre particulier exige une image transparente comme un .png.

Mais je ne saurais te guider vers d'autre possibilité pour l'instant. Je crois donc que c'est possible en javaScript. Ce langage appartient au même norme ECMA que actionScript. Il gère les évènements à la souris et gère la notion d'objet en programmation. Alors pourquoi pas !

++
Modifié par zardoz (29 Sep 2010 - 03:47)

Merci Zardoz pour cette réponse très claire, je vais me pencher vers cette direction de "scrolling différentiel", mais plutôt du côté du jQuery / Ajax ...

En réalité c'est un peu le même principe qu'un diaporama photo qu'on voit partout sur le web, en fonction du positionnement de la souris, les images défilent de gauche à droite.

Sinon, je t'avouerais franchement que pour flash, tu m'as parlé chinois, mais ce n'est pas ta faute, c'est moi

Merci à toi,

+++

Hello,

Effet très interessant, et je crois que j'ai ce que tu cherches : http://www.tutomania.com/viewtuto-23-ScriptsJquery-502-Animer_votre_Background.html

melhi a écrit :
Hello,

Effet très interessant, et je crois que j'ai ce que tu cherches : http://www.tutomania.com/viewtuto-23-ScriptsJquery-502-Animer_votre_Background.html

Melhi, merci pour ce script, il est tout aussi intéressant à la seule différence que le scrolling n'est pas inversé (l'image "s'attache" au curseur de la souris).

Sinon, j'ai déniché un second tutorial, qui explique bien l'idée avec jQuery, j'en fais part à tout le monde: http://webdev.stephband.info/parallax.html

Il s'agit de Parallax, qui est tout de même assez compliqué à mettre en place... mais incroyablement beau!

Pour celles est ceux qui font la gueule à l'Anglais, y'a la version Française simplifiée ici:
http://www.webinventif.fr/jparallax-pour-donner-un-effet-parallaxe-via-jquery/

Et la démo: http://webdev.stephband.info/parallax_demos.html

A voir absolument,

Voilà pour ceux qui ont la même envie... je vous épargne des recherches multiples sur le nouvel api de recherche G gle

A bientôt les z'amis !
Modifié par dimsnet67 (29 Sep 2010 - 16:20)

Salutation domsnet67

Permet moi de te dire que c'est quand même melhi qui a trouvé et selon la question telle que posée au tout début du topic.

Celui que melhi a trouvé répond à 100% à ce que tu cherchais.
Bon j'avoue que parallax est très bien aussi. Mais l'horizon est fixé d'où son nom parallax.

Si tu imagine un défilement automatique (sans intervention Mouse), seule la proposition de melhi te donnerais une lecture en continue réaliste. Parallax agirais comme un battement d'ailes, des brins d'herbes au vent, vue de haut.

En terme d'animation (lecture en continue), nous pouvons en conclure que la caméra de parallax est fixe tandis que la caméra de celui de melhi est en mouvement.

++
Modifié par zardoz (29 Sep 2010 - 17:20)

zardoz a écrit :


Permet moi de te dire que c'est quand même melhi qui a trouvé et selon la question telle que posée au tout début du topic.

Celui que melhi a trouvé répond à 100% à ce que tu cherchais.
Bon j'avoue que parallax est très bien aussi. Mais l'horizon est fixé d'où son nom parallax.

C'est pas faux du tout zardoz, je m'incline et j'ajouterais même que le script que melhi a trouvé est encore plus cohérent avec ce que je recherchais précisément

Je vous enverrais mon maquette finalisée dans un délais proche...

Merci à vous deux pour votre aide!

Ok d'accord. ++

Veux bien voir ta maquette une fois finie, je suis curieuse.
Et ravie d'avoir pu t'aider