Carousel en CSS3? Bouton_activeCarousel en CSS3? Bouton_hoverCarousel en CSS3? Fb-hoverCarousel en CSS3? Fb-active
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!

Derniers sujets
» Système d'onglets simple et personnalisable
Carousel en CSS3? EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Carousel en CSS3? EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Carousel en CSS3? EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Carousel en CSS3? EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Carousel en CSS3? EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Carousel en CSS3? EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Carousel en CSS3? EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Carousel en CSS3? EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -25%
PC Portable Gamer 16,1” HP Victus 16 – 16 ...
Voir le deal
749.99 €

Partagez
 

Carousel en CSS3?

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://lower-theory.teamconvention.com/index.htm
Nyo The Neko
Nyo The Neko
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Carousel en CSS3? Empty
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
MessageSujet: Carousel en CSS3?   Carousel en CSS3? EmptyJeu 29 Mar 2012, 17:49
Revenir en haut Aller en bas
http://cssmania.com
Anoobnyme
Anoobnyme
GOD OF COOKIES

Masculin Messages : 1445



Carousel en CSS3? Empty
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.
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyJeu 29 Mar 2012, 17:56
Revenir en haut Aller en bas
http://lower-theory.teamconvention.com/index.htm
Nyo The Neko
Nyo The Neko
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Carousel en CSS3? Empty
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?
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyJeu 29 Mar 2012, 17:58
Revenir en haut Aller en bas
Hiro
Hiro
Ninja Codeur
Ninja Codeur

Masculin Messages : 1179



Carousel en CSS3? Empty
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 Wink
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyJeu 29 Mar 2012, 18:30
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Carousel en CSS3? Empty
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
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyVen 30 Mar 2012, 17:35
Revenir en haut Aller en bas
http://lower-theory.teamconvention.com/index.htm
Nyo The Neko
Nyo The Neko
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Carousel en CSS3? Empty
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?
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyLun 02 Avr 2012, 03:18
Revenir en haut Aller en bas
Kiwi
Kiwi
{ Membre }
{ Membre }

Féminin Messages : 142



Carousel en CSS3? Empty
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
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyLun 02 Avr 2012, 06:00
Revenir en haut Aller en bas
http://lower-theory.teamconvention.com/index.htm
Nyo The Neko
Nyo The Neko
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Carousel en CSS3? Empty
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!
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyLun 02 Avr 2012, 07:52
Revenir en haut Aller en bas
http://www.school-of-pub.net/forum.htm
Murtagh
Murtagh
{ Modérateur }
{ Modérateur }

Masculin Messages : 1492



Carousel en CSS3? Empty
C'est bien noté, je déplace. Smile Bon courage ! ^^
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? EmptyLun 02 Avr 2012, 12:20
Revenir en haut Aller en bas
Contenu sponsorisé




Carousel en CSS3? Empty
MessageSujet: Re: Carousel en CSS3?   Carousel en CSS3? Empty
Revenir en haut Aller en bas
 

Carousel en CSS3?

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» CSS3 Please!
» CSS3 Generator
» CSS3 Generator
» Problème CSS3
» Marquee en css3 pur

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit