"Slideshow Scroll bloc de texte"

Par kamelzagger, il y a 9 ans

Les bases HTML/CSS

Salut à tous !

Comme vous l'avez remarqué j'ai mis des guimets au titre car je ne sais pas exactement comment s'appelle ce que je recherche. C'est dont pour ca que j'ai besoin de votre aide.

En fait ce que je recherche à faire sur mon site internet c'est un "slideshow-scroll" en continue. C'est surement pas très parlant comme ca, car comme je vous l'ai dis je ne connais moi même pas exactement l'appelation exact.

Mais voici un exemple de ce que je veux :

JUSTE ICI (sur le haut du site, le slider avec les logos)

C'est donc ceci que je recherche depuis maintenant plusieurs jours. Mais legerement différent.

En effet, ce ne sera pas des images deja qui défileront mais des bloc de texte.

Voici dabord une capture d'écran de la partie de mon site en question :

Vous vouillez le truc ? Je souhaite que ces différents bloc défilent en continue, donnant l'impression d'infinie (sans retour en arrière des classiques slideshow)

Et contrairement à l'exemple avec les logos :

  1. Je souhaite que ce slider prenne le 100% en largeur

  2. Qu'il soit responsive

  3. En utilisant que du CSS3 (si possible ?) Sinon bha JS.

Voila je fais donc appel a vous pour savoir si vous connaisser un systement ou quelque chose qui pourrai m'aider. Car j'ai deja longtemps cherché sur internet mais sans succès.

Merci à vous !

6 réponses

Benjamin Derepas, il y a 9 ans

Pour le coté responsive, je te conseille d'utiliser le module flexbox qui remplira parfaitement les besoins .
Ensuite pour ce qui est de l'animation ... Et bien je te conseille de regarder du coté des @keyframesdéjà en toute logique, et les transformaussi .
Ce lien pourra t'aider je pense . .

Car j'ai deja longtemps cherché sur internet mais sans succès.

Tu n'a pas du beaucoup cherché à mon avis ....

kamelzagger, il y a 9 ans

Salut Benjamin,

Merci pour ta réponse.

Tu te trompes, j'ai du faire minimum deux nuits de recherche. D'ailleurs, je suis déjà tombé sur le lien que tu m'a envoyé pendant que je faisait mes recherches. J'ai fait un test mais j'ai pas vraiment reussi, deja c'est prevu pour images et il y a un clignotement assez embetant à chaque rotation.

Bon si je ne trouve pas d'autres piste je referai un essai avec ce slideshow et tampis pour le cignotement.

Sinon merci de m'avoir mis sur la piste du module flexbox, je connai de nom mais j'aimais vraiment utilisé. Je vais voir tout ca !

Merci encore à toi ;-)

Lartak, il y a 9 ans

Bonjour.

Sinon merci de m'avoir mis sur la piste du module flexbox, je connai de nom mais j'aimais vraiment utilisé. Je vais voir tout ca !

Grafikart a justement réalisé un tutoriel concernant Flexbox : Tutoriel Vidéo HTML-CSS » Flexbox.

D'ailleurs, je suis déjà tombé sur le lien que tu m'a envoyé pendant que je faisait mes recherches. J'ai fait un test mais j'ai pas vraiment reussi, deja c'est prevu pour images et il y a un clignotement assez embetant à chaque rotation.

Les exemples portent bien leur nom, ils ne servent pas justent à être copier/coller, il te faut adapter leur contenu par rapport à l'utilisation que tu veux en faire.

kamelzagger, il y a 9 ans

Merci Lartak pour le tuto !

Oui totalement d'accord ! C'est juste que sur le moment j'ai pas vraiment réussi à faire ce que je voulais mais je vais ressayer et me creuser un peu la cervelle ^^

Merci encore !

kamelzagger, il y a 9 ans

Re,

Alors j'ai ressayé mais rien a faire. Je n'y arrive pas...

Je suis également tombé sur un autre code qui ma l'air plus simple (ICI) mais je ny arrive pas non plus.

J'ai édité ce code en essayant de faire cela sans les images (comme je le souhaite donc) mais sa ne marche pas. Les textes ne s'affichent ou ou si ce n'est que quelques secondes... Pourtant tout ca n'a pas l'air très compliqué mais j'ai tellement cherché que cette fois je donne ma langue au chat.

Si une gentil personne parmis vous pouvais me donner un coup de pouce ce serai génial. Le code que j'ai édité se trouve ici : https://jsfiddle.net/griffur/34tu9otd/

Merci à vous :)

kamelzagger, il y a 9 ans

J'ai reussi ! Enfin presque, le systeme n'est pas encore responsive. Mais bon pour le moment sa semble ok et pour le responsive sa ne doit pas être très dur à gérer.

Je vous laisse jeter un coup d'oeil au code ici : https://codepen.io/griffur/pen/jmOZRL

Redites moi ce que vous en pensez et si vous pensez que celui-ci peut-être amélioré !

Merci !