Galerie d'images défilantes

Salut Alscacreateurs,

Je souhaiterais réaliser un defilement au survol de la souris pour éviter le changement de page tel qu'il existe aujourd'hui.

L'idée étant de ne pas créer une usine a gaz et d'obtenir un defilement fluide des "disques" de la galerie.
Voici la base actuelle www.fluideweb.com, et au besoin je pourrais naturellement fournir le code.

Merci d'avance de vos interventions.
Au plaisir!

©Fluideweb

Merci Edenpulse,

Tu m'apparaît être très sympathique et ta réponse digne d'une communauté d'entraide.

Mon précédent message est pourtant limpide aussi devrais-tu le relire
Il n'ai en aucun cas question d'une demande de bénévolat, mais bien de conseils.
Aussi, pour ceux qui souhaiterons répondre, ou les esprits buttés et les bêtes à manger du foin, s'il en est, et que je n'espère pas comme nous tous je pense, voici un résumé :

Après nombres de recherche, je souhaite une piste pertinente pour créer un défilement fluide des disques de ma galerie; et ce sans pedaler dans des JQuery et autre outils pré-conçus, au demeurant trés bien étudiés; une méthode évitant l'usine à gaz.

Voici donc le lien vers le site concerné (www.fluideweb.com) et mes sincères remerciements aux fins esprits flânant sur cette superbe plateforme d'échange.

Encore merci à tous et bon webdesign!
©Fluideweb

Petit détail car comme beaucoup d'Alscacréateurs, je suis autodidacte dans le web et dans différents domaines liés au design et allant de l'architecture au deign industriel.

Thx a lot for all…
Modifié par Fluideweb (22 Aug 2014 - 15:10)

Fluideweb a écrit :

je souhaite une piste pertinente pour créer un défilement fluide des disques de ma galerie; et ce sans pedaler dans des JQuery et autre outils pré-conçus, au demeurant trés bien étudiés; une méthode évitant l'usine à gaz.

Hello,

En fait j'ai du mal à comprendre ce que tu recherches malgré les deux messages j'en conclus donc que je dois faire parti des bêtes à manger du foin. Si tu veux un truc loin des outils tout faits, concretement il va falloir le coder à la mano. Donc si tu nous demandes de t'écrire un script sur mesure, c'est normal qu' Edenpulse te réponde que non on ne fera pas le boulot à ta place

En pistes sinon tu as le choix entre :
- coder des transitions CSS3
- coder des transitions en jQuery
- coder des transitions en Vanilla JS
- un slider en JavaScript

Par contre ton slider est sur plusieurs pages, du coup il va falloir tout mettre sur la même page. Dernière chose évite les transitions au survol et préfère au clique sinon ça va être insuportable.

Merci de ta réponse Stephanie.

Sois rassurée, loin de moi l'idée de vous mettre l'un comme l'autre, dans une étable
J'avoue que je ne sais pas vraiment quelle piste privilégier et ma demande va d'avantage dans ce sens que dans une demande d'un code rédigé par vos soins.

Pour étayer ma demande, je voudrais qu'en déplaçant la souris vers la droite les disques se déplacent de la droite vers la gauche et inversement.
Et, plus précisément qu'au survol du disque de l'extrémité droite tous les disques glissent vers la gauche, faisant apparaitre les suivants, si l'on garde la position et s'arrêtant si la souris est déplacer vers la gauche.(quantité évoluant avec l'temps j'espère

Je pensais en effet d'avantage à du JavaScript…

Comprends tu mieux ma demande et qu'en penses-tu?
Merci d'avance à tous deux et votre équipe.

©Fluideweb

Oui c'est un effet en JavaScript. Mais c'est pas top du point de vue expérience utilisateur : à chaque fois que l'utilisateur va survoler ça va bouger, ça risque d'être perturbant voir exaspérant s'il survol par mégarde. Quid également de la navigation au clavier ? Sur mobile quand pas de survol ? Tout ça pour dire qu'à mon avis un effet au clique sur un bouton vaut mieux (JavaScript aussi)

Merci Stephanie,
Mais ne pouvons-nous pas envisager un méthode qui éviterait que cela ne bouge dans tout les sens au survol?
Idée > Le slide ne se déclenche que sur le derniers disque incluent un régulateur pour la vitesse de défilement…
Ta réponse me renvoie avant mon post sur le forum, ce qui m'avance…pas!

En plus, question subsidiaire à ton niveau (tu me pardonneras je l'espère le "tu"); après avoir placé un gif animé sur mon logo et malgré la boucle définie à la génération, celle-ci ne tourne pas. Aurais(iez)-tu une piste?

Au plaisir, et bonne journée à toi!
©Fluideweb
Modifié par Fluideweb (24 Aug 2014 - 04:32)

Bah après c'est juste des conseils. D'un point de vue ergonomie les gens s'attendent pas forcement à ce qu'un survol déclenche un changement de slider car le survol est une action qu'on ne fait pas forcement volontairement "aka je balade ma souris n'importe où en lisant". Du coup ça peut surprendre. Après si tu as vraiment envie de le faire, je vais pas t'en empêcher hein ^^
Au final que ça soit survol ou clique c'est la même technique : TOUS les slides sont sur ta page, une partie des slides est "masquée" et on les affiche en déclenchant un event (clique ou survol). Si tu cherches un exemple y a le slider sur mon folio (qui finira par dégager un jour mais là j'ai la flemme )
Et pour un script tout fait, fiouuu je pense que les sliders et carrousels doivent être les trucs où tu trouves le plus de ressources en JS, du coup tu devrais pas avoir trop de mal à en trouver un qui te plaise.

Pour le logo c'est au moment de la génération du gif, après ça dépend avec quoi il a été généré je sais que Photoshop propose l'option boucle ou non. Là il est pas en mode boucle.

Salut Stephanie,

J'avoue que j'hésite.
Pour détailler encore voici un exemple, que je souhaiterais moins rapide, sur le site d'une photographe (voir slide en pieds de page des galerie) : http://www.carlamonaco.co.uk/?gallery=fashion

Penses-tu que ce soit si contraignant pour l'utilisateur?

Retour sur logo gif : Etrangement le gif est bouclé, as-tu une idée de l'origine du problème?
http://www.fluideweb.com

À bientôt et bonne après-midi.

©Fluideweb
Modifié par Fluideweb (26 Aug 2014 - 14:17)

Merci a Dongdong25 pour son "message privée" et son courage évident…