28172 sujets

CSS et mise en forme, CSS3

[Résolu] 2 div qui défilent dans une autre div 'fenêtre'

Bonjour à tous !
Je suis parti dans l'idée de faire défiler 3 div alignées horizontalement (qui contiennent du HTML <span> etc.) dans une autre div qui joue le rôle de fenêtre.
Mieux que des mots, j'ai préféré faire un schéma :
upload/54081-visionneus.jpg
Pour animer la chose j'utilise jquery avec la propriété animate qui fait évoluer le left de 0 à-X sur la DIV 'annonce1'. Ça fonctionne très bien avec une seule annonce et je pensais utiliser la propriété CSS float pour que les autre div suivent naturellement le déplacement de l'annonce1.

Comme l'explique mon schéma, les DIV annonceX, qui sont en fait de la même taille que la fenêtre, se placent évidemment en dessous l'une de l'autre (propriété float:left)... par contre avec deux annonces de tailles suffisamment petites, l'effet est bien là quand je déplace la DIV annonce1 vers la gauche, si ce n'est que l'annonce2 est visible...

Bref, j’espère que le schéma est assez clair parce que j'ai peur de vous embrouiller en rentrant trop dans le détail...
Merci à tous de vos idées ou coups de main

ps: j'aimerais si possible développer moi même mon slideshow en comprenant le fonctionnement plutôt qu'en utilisant un code tout fait.
Modifié par Brizio (03 Feb 2015 - 17:45)
Désolé pour l'apparence du message, il semble que mes 'retours' n'aient pas été pris en compte...
Après quelque tests, je me rends compte que ce qui résout mon problème grâce à ton lien est totalement géré par le plug in. Sans le plug in, les éléments de la liste (ou les div, puisque le plugin gère les deux sans souci) se retrouvent empilés verticalement selon la largeur du viewport, au lieu d'être alignés horizontalement.

Ça ne répond donc pas à mon problème puisque je ne souhaite pas utiliser de plug in Smiley decu

Alors bien sûr, il se peut que finalement je ne puisse pas faire ce que je souhaite uniquement avec du CSS ?

Merci de vos lumières Smiley cligne
Modifié par Brizio (30 Jan 2015 - 16:49)
Aucune possibilité de trouver une solution uniquement avec du CSS, même avec une Iframe ?
Si quelqu'un pouvait me l'affirmer, ça m'éviterait une perte de temps.

Merci d'avance pour votre aide Smiley bawling
Modifié par Brizio (02 Feb 2015 - 11:30)
Alors... à défaut d'avoir trouvé une solution sans plug in pour faire ce que j'indiquais sur le schema de mon 1er post (positionnement et définlement horizontal des annonces), j'ai trouvé une petite alternative assez simple avec un défilement vertical.
J'aurais vraiment voulu utiliser la propriété de float qui permettrait que les div d'annonce 2, 3, etc. suivent les mouvements de la div1 sans pour autant être animés eux-même par ma fonction (en l'état elle déplace toute div contenu par la div "annonces", mais j'ai l'impression que cet "écoulement" des div avec float n'est pas dynamique (si je bouge la div 1, les div 2, 3, etc. ne se recalent pas selon cette nouvelle position).

Bref, vu le nbre de réponses je me demande si je suis bien clair !! Allez, je me fends de mon premier lien jsfiddle :
http://jsfiddle.net/endikoa/re16tr3d/

A noter que l'appel à anim est normalement fait par un 
setInterval('anim();', 1);

A noter aussi que si je ne spécifie pas "linear" l'animation se fait avec une sorte de easin très sympathique, mais qui provoque un décalage affreux affreux affreux au bout d'un certain nombre de va et vient.
edit : en fait le décalage à lieu aussi avec "linear" en paramètre... c'est fatiguant Smiley decu


Si vous avez des idées d'optimisations je suis preneur Smiley smile

bonne journée à tous !
Modifié par Brizio (03 Feb 2015 - 14:26)
A titre purement théorique, ce que tu veux peut se faire en CSS.

- un premier div avec un "overflow:hidden" et la largeur/hauteur voulu (ex : width:500px) ainsi qu'un position:relative
- un second div (dans le premier div) qui a la largeur cumulé de TOUS les divs qu'il contient (ex: width:2000px) qui doit avoir un "position:absolute; top:0; left: $variable" ($variable selon le div qu'on veut afficher)
- c'est ce second div qui doit se déplacer (via css left et le javascript)
- et enfin, dans ce second div, tu peux y mettre les différents div/image qui doivent défiler via float:left / display:inline-block ou encore display:table > display:table-row, bref comme ça t'arrange.

Et evidemment, je parle de JS, mais tu peux aussi, via une animation CSS3 changer le left pour animer le tout.

Bon courage Smiley smile
Modifié par kenor (03 Feb 2015 - 16:30)
Brizio a écrit :
Salut,
parce que je ne souhaite pas utiliser de plug in, autre que Jquery évidemment Smiley smile


Les carousel / slider que tu trouves à foison sont en javascript...
kenor a écrit :
A titre purement théorique, ce que tu veux peut se faire en CSS.

- un premier div avec un "overflow:hidden" et la largeur/hauteur voulu (ex : width:500px) ainsi qu'un position:relative
- un second div (dans le premier div) qui a la largeur cumulé de TOUS les divs qu'il contient (ex: width:2000px) qui doit avoir un "position:absolute; top:0; left: $variable" ($variable selon le div qu'on veut afficher)
- c'est ce second div qui doit se déplacer (via css left et le javascript)
- et enfin, dans ce second div, tu peux y mettre les différents div/image qui doivent défiler via float:left / display:inline-block ou encore display:table &gt; display:table-row, bref comme ça t'arrange.

Et evidemment, je parle de JS, mais tu peux aussi, via une animation CSS3 changer le left pour animer le tout.

Bon courage Smiley smile


A titre purement théorique, ce que tu me proposes me semble absolument excellent Smiley biggrin merci bcp ! (comment n'y ai-je pas pensé plutôt ?!! Grrrrrrr !!!!!)


Pedrothelion... en javascript, t'es sûr ??? Smiley err Merci quand même Smiley cligne
c'est bibi67 qui a fourni ce lien kenor Smiley cligne

Je ne suis à priori pas du tout compétent sur ce post, les carousel et les slider qui pullulent sur le net ne sont pas à base de jquery (bibliothèque JAVASCRIPT), je suis con ça doit être du flash ou du divx.

Adieu

;)
kenor a écrit :
A propos, le lien fournit par Pedrothelion a un schéma qui explique parfaitement ce que j'ai expliqué ci-dessus :

http://als.musings.it/index.php#instructions


Yep, mais tu l'as très bien expliqué je te rassure et sans toi j'aurais pas tilté sur ce qui permettait d'aligner les div horizontalement. Et pourtant je l'ai regardé ce beau schéma...

Pedrothelion, y a pas d'opposition entre plug-in et javascript. Enfin... faut qu'on m’arrête si je me trompe... Qu'il soit plus ou moins complexe, un code javascript tout fait est en soi un plug-in. Et pour dynamiser une page web, y a peu d'autres langages dispo (css of course). Bref, c'est pas le sujet, et encore une fois merci quand même Smiley cligne .

Je passe le sujet en [RESOLU] Smiley smile
Modifié par Brizio (03 Feb 2015 - 17:24)
kenor a écrit :


Le fait qu'il soit possible de le faire en jQuery (et c'est personnellement aussi mon choix) ne signifie pas que ce soit une obligation.

Si tu regardes la source, il n'y a pas une seule ligne de javascript, de flash etc. mais exclusivement du CSS.


Je n'ai jamais dit et avancé le contraire Kenor, ma réponse était ironique... Comme Brizio ne veut utiliser que du Jquery, j'ai simplement emis le fait qu'il en existe, en jquery... et donc en javascript, puisque le jquery est une bibliothèque javascript... et je ne fais aucune opposition entre plugin et javascript, je ne comprend pas ton propos Brizio.

Bref...
Brizio a écrit :
Salut,
parce que je ne souhaite pas utiliser de plug in, autre que Jquery évidemment Smiley smile

Pedrothelion : Les carousel / slider que tu trouves à foison sont en javascript...

----
Si tu fais pas d'opposition entre plugin, et javascript, alors je comprends pas bien ton post.

Mais franchement on s'en moque, c'est pas la peine de s’énerver. Smiley cligne
Sujet clos
Aller à