CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Nyo The Neko
{ Spécialiste }
Messages : 245
| Bonsoir tout le monde! Je me demandais s'il était possible de faire un carrousel d'images comme ceci: LIEN en CSS3.
En effet, j'ai vu plusieurs demos de carrousel, mais jamais en 3D comme ça, et bien sûr, plutôt que ce soit lorsque la souris bouge que les images bougent (c'est super chiant je trouve) je préférerais de loin que ce soit par clic! Or ça, c'est clairement possible en CSS3 (que le click cherche les images et les mène vers l'avant, comme ici), mais ce dont je ne suis pas sûre, c'est si, en CSS3, on pourrait disposer les images de cette même façon (en cercle quoi).
Est-ce que quelqu'un saurait comment faire pour disposer les images dans un tel rond? Et que, lorsque l'on clique sur n'importe quelle image de ce cercle, le carrousel tourne (comme dans le jQuery) sur lui-même pour amener cette image vers l'avant? Ou, le cas échéant, simplement utiliser les flèches pour tourner le carrousel dans un sens ou d'un autre, comme pour ce cube ?
Merci d'avance pour les réponses! =D |
Dernière édition par Nyo The Neko le Lun 02 Avr 2012, 07:53, édité 1 fois | |
| | | Anoobnyme GOD OF COOKIES
Messages : 1445
| Salut
Pour le caroussel, je ne pense pas que ça soit possible avec seulement le CSS3 Javascript ou jQuery sont de bons amis pour réaliser ce genre de choses. | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Au contraire, un carrousel EST possible uniquement en CSS3. Ce dont je ne suis pas sûre, c'est si CETTE disposition des images est possible. Parce que j'ai cherché sur Google, en français comme en anglais, il y a 45 milles exemples de carrousels d'images différents, mais jamais aucun ayant cette forme-ci. C'est justement là que je me demande, si je pourrais donner cette forme à mon carrousel? | | |
| | | Hiro
Ninja Codeur
Messages : 1179
| D'après ce que je sache, je ne crois pas que cela soit possible en css3 du moins si ça l'était, ce ne serait surement pas compatible tout nav etc (je me trompe peut-être hein). Par contre, je peut t'aider si tu souhaites continuer en utilisant les flèches, mais ce seras en js | | |
| | | Espeon
Administrateur
Messages : 1819
| Bonsoir,
Faire un carrousel de ce genre est tout à fait possible en CSS3 en utilisant les propriétés de transformation et d'animation.
Par contre, il sera impossible de faire bouger le carrousel en fonction de la position de la souris (ici il faudrait du javascript).
En revanche également, ce ne serait pas compatible avec tous les navigateurs. A moins d'en être parfaitement conscient (et consentant), il vaut mieux utiliser une solution javascript (jQuery) comme il en existe déjà un grand nombre sur la toile =)
Nota : c'est d'ailleurs assez clair dans l'exemple du cube où le cube est fait en CSS3, et l'animation en fonction des touches appuyées faites en javascript | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Donc selon toi il est possible de faire un carrousel de cette forme? Mais alors comment mettre les images dans cette position? Est-ce que tu aurais des conseils à me donner? | | |
| | | Kiwi
{ Membre }
Messages : 142
| Salut !
En fait, il faut simuler la 3D, donc en gros, tu dois voir en 2D comment créer la 3D. Tu as plusieurs étages en fait. Prends cet exemple : http://www.professorcloud.com/mainsite/carousel.htm
1er étage, 1 image, tout devant, 2ème étage, 2 images, léger décalage en hauteur, léger rétrécissement, léger décalage à gauche ou à droite selon l'image, et ainsi de suite.
Donc en clair, pour chaque image, selon la position initiale et la direction donnée, tu changes la taille, la position des x et des y, ainsi que le z (le z-index, l'étage), le tout en utilisant de transformations.
Il me semble que jen avais fait un en AS3 il y a longtemps en cours, et quon utilisait de la trigonométrie pour la trajectoire des éléments, pour que ça fasse davantage cercle. Si tu arrives à ce point et que les déplacements te conviennent pas, tu pourras creuser de ce côté.
Mais honnêtement, jai un gros doute pour le CSS3. Les transformations, ça, pas de souci, mais le comportement spécifique à chaque position me paraît plus problématique. Bon, après, jai pas une grande maîtrise du CSS3, alors s'il existe une solution pour ça, elle m'intéresse =D | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Effectivement Kiwi, présenté comme ça, le comportement à chaque position est bien plus facile à coder en javascript que en CSS3 (et je doute même d la possibilité du truc en CSS3). Je suppose donc que je vais devoir bien creuser ça, ou bien simplement utiliser du javascript. Au cas où je trouve comment faire en CSS3, je posterais sur CSS-Actif la solution! ^^
Edit: Problème résolu, je pense que j'ai bien assez d'avis et que je vois plus où moins où serait le problème en CSS3. Suffit que je fouille un peu pour bien trouver. En tout cas, merci à tous! | | |
| | | Murtagh
{ Modérateur }
Messages : 1492
| C'est bien noté, je déplace. Bon courage ! ^^ | | |
| | | Contenu sponsorisé
| | | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|