Un carrousel 3 D est un carrousel dont les glissières se déplacent en profondeur plutôt que sur un plan plat : en rotation, en mise à l'échelle ou en orbite pour que les glissières inactives se trouvent visiblement derrière celle active Dans Elementor, vous l'obtenez soit du Disposition du flux de couverture du widget Image Carousel(ou de une conception spécialement conçue.
Quatre styles valent votre temps Ils font des travaux différents, et l'un d'eux rendra votre page plus lente sans aucun avantage si vous la choisissez pour le mauvais contenu Démos en direct pour chacun, plus les paramètres qui séparent un carrousel 3 D lisse d'un bégaiement.
Couverture : celle que la plupart des gens veulent dire
Démo en direct Télécharger Widget JSON
La glissière centrale vous fait face à l'équerre Les glissières de chaque côté tournent vers l'axe Y, rétrécissent légèrement et s'atténuent. Votre œil n’a nulle part où aller sauf le milieu.
C'est tout le truc, et c'est pourquoi coverflow a survécu à la mort d'iTunes Les diapositives périphériques sont suffisamment visibles pour prouver qu'il y en a plus, assez floues pour que vous ne puissiez pas les lire Les gens cliquent sur la flèche pour résoudre la tension.
Trois paramètres font l'essentiel du travail :
- Faire pivoter: jusqu'où le côté glisse tourne Tout au-delà de 50° et les voisins deviennent des éclats illisibles. 30 à 40° est la plage qui se lit comme profondeur plutôt que distorsion.
- Profondeur: jusqu'où ils sont assis en arrière Poussez-le trop loin et les glissières latérales rétrécissent en imagettes, et la composition perd son équilibre.
- Diapositives par vue: coverflow a besoin d'au moins trois visibles ou il n'y a pas de “flow.” Réglez-le sur 3 sur le bureau, 1 sur mobile et sautez le 2 gênant.
Vous n'avez pas besoin de Pro pour celui-ci Le widget Carrousel Image gratuit a une disposition de couverture intégrée.
Bon pour: études de cas, pièces de portfolio, collections de style album.
Mauvais pour: tout ce que les gens doivent comparer Le Coverflow est construit pour vous faire regarder une chose.
Flip : cartes recto-verso
Démo en direct Télécharger Widget JSON
La carte tourne de 180° sur son axe vertical Face avant vers l'extérieur, face arrière vers l'intérieur Les deux faces contiennent un contenu réel.
La plupart des effets 3 D sont de la décoration Celui-ci ne l'est pas Il double le contenu par diapositive, c'est pourquoi il gagne sa place sur une page d'équipe Photo et nom sur le recto, rôle, bio et liens sur le verso Même empreinte, deux fois l'information.
Le décor que les gens se trompent est visibilité backface. Laissez-le allumé et vous verrez un fantôme en miroir de la face avant saigner à mi-rotation C'est assez subtil pour manquer dans l'éditeur et évident sur un écran de rétine Éteignez-le.
Deuxième chose : gardez le flip sous 600 ms. Un flip est une révélation, et une révélation qui prend une seconde complète arrête de se sentir réactif et commence à se sentir comme un état de chargement.
Bon pour: grilles d'équipe, avant/après, cartes de spécifications, tarification avec un retournement de détails.
Mauvais pour: tout ce qui est à l'endroit où la face arrière serait vide Un flip sans rien derrière est un clic gaspillé.
Vous voulez la même révélation bilatérale comme une carte debout plutôt qu'une diapositive de carrousel ? c'est le Widget de boîte à feuilles élémentrice's travail.
Arc : glisse sur une courbe
Démo en direct Télécharger Widget JSON
Les diapositives chevauchent le bord d'un cercle dont le centre se trouve sous le pli. Chacun arrive debout au sommet de l'arc et s'éloigne au fur et à mesure de son déplacement.
Arc est le style 3 D le moins courant sur les sites WordPress, ce qui est la plupart de sa valeur Un visiteur a vu un coverflow cent fois Ils n'ont pas vu cela.
Cela vous coûte quelque chose en retour : le mouvement de basculement signifie que les diapositives ne sont entièrement lisibles qu'en haut de l'arc. Le contenu qui doit être lisible en périphérie (prix, dates, spécifications) combattra le design. Les images et les titres courts ne le seront pas.
Bon pour: catalogues, listes de spécimens, menus, collections d'articles similaires.
Mauvais pour: données. Si les gens ont besoin de lire trois diapositives à la fois, utilisez une grille.
Orbite : mouvement circulaire autour d'un centre
Démo en direct Télécharger Widget JSON
Les objets parcourent un cercle complet autour d'un centre fixe L'objet en haut est actif et pleine grandeur ; le reste descend en passant derrière.
Orbit dit quelque chose de structurel qu'aucune autre mise en page ne dit : ce boucle Un processus en quatre étapes qui revient véritablement à son début se lit parfaitement Un flux d'intégration en cinq étapes qui se termine ne le fait pas Un cercle promet un retour, et si votre contenu ne revient pas, les gens attendent quelque chose qui ne vient jamais.
Utiliser l'orbite lorsque le contenu est un cycle Utilisez coverflow quand c'est une liste.
Bon pour: roues de processus, diagrammes d'écosystème, cartes de capacités, cycles de service.
Mauvais pour: séquences avec un début et une fin.
Comment faire un carrousel 3 D qui ne bégaie pas
Les transformations 3 D sont bon marché sur le GPU et coûteuses si vous vous trompez Quatre choses séparent un carrousel lisse d'un branlant, dans l'ordre où ils vous mordront :
- N'animer que transformation et opacité. Animer la largeur, la hauteur, le haut ou la gauche force un recalcul de mise en page sur chaque image La transformation et l'opacité vont directement au compositeur Chaque conception ici s'en tient à ces deux-là.
- Cap la taille de l'image. Un carrousel 3 D tient plusieurs diapositives en mémoire à la fois car elles sont toutes visibles Six diapositives à 400 Ko chacune font 2,4 Mo avant que quoi que ce soit ne bouge Les obtenir sous 200 Ko et servir WebP.
- Ne pas empiler la 3 D à l'intérieur de la 3D. Une carte à clapet à l'intérieur d'une piste de coverflow crée des contextes 3 D imbriqués, et les navigateurs gèrent cela de manière incohérente Safari en particulier aplatit la transformée interne à des moments imprévisibles Choisissez-en un.
- Respectez le mouvement réduit. Certaines personnes ont des troubles vestibulaires, et l'animation en profondeur est un déclencheur courant Chaque conception ici tombe à un fondu simple quand
prefers-reduced-motionest défini Si vous construisez le vôtre, faites de même.
Testez sur un téléphone Android de milieu de gamme, pas dans l'émulateur d'appareil du navigateur L'émulateur redimensionne la fenêtre mais conserve le GPU de votre bureau C'est de là que vient l'“ was fine sur ma machine”.
Un carrousel 3 D nuit-il à la vitesse de la page ?
Pas tout seul L'animation basée sur Transform s'exécute sur le fil du compositeur et ne bloque pas le fil principal, donc elle ne déplacera pas beaucoup votre Interaction vers Next Paint.
Qu'est-ce qui fait mal : les images Un carrousel au-dessus du pli avec six diapositives pleine grandeur est six demandes d'image bloquant le rendu en concurrence avec votre plus grande peinture contente Chargez paresseusement tout au-delà de la première diapositive, définissez la largeur et la hauteur explicites pour que rien ne se déplace et gardez l'image de la première diapositive sous 150 Ko.
La 3 D n'est pas votre problème La charge utile est.
Si le carrousel n'anime pas du tout, plutôt que de mal s'animer, Swiper ne parvient généralement pas à s'initialiser au lieu d'un problème de transformation. Le guide de dépannage Swiper couvre ce qui l'arrête de charger.
Questions fréquemment posées
Elementor a-t-il un carrousel 3 D ?
Pas nativement Le Media Carousel (Pro) d'Elementor a une peau de couverture qui donne un léger effet 3 D, mais il n'y a pas d'option de retournement, d'arc ou d'orbite Pour ceux que vous avez besoin d'un addon gratuit de Master Addons Carrousel d'images comprend une disposition de flux de couverture et les quatre conceptions Pro de cette page couvrent le reste.
Comment faire un carrousel de couverture dans Elementor ?
Lâchez le Widget Carrousel d'images sur la page, ajoutez vos images, puis sous Paramètres du carrousel basculez la disposition de la norme à la couverture Définissez les diapositives par vue sur 3, tournez à environ 35° et activez les diapositives centrées pour que l'image active se trouve au milieu plutôt que de rincer à gauche.
Quelle est la différence entre un coverflow et un carrousel 3 D ?
Le Coverflow est un type de carrousel 3 D : celui où les glissières latérales tournent sur l'axe Y et reculent Le retournement, l'arc et l'orbite sont aussi des carrousels 3 D ; ils utilisent simplement des axes et des chemins différents Tous les quatre se déplacent glisse à travers la profondeur plutôt que sur un plan plat.
Les carrousels 3 D fonctionnent-ils sur mobile ?
Oui, avec les ajustements Le flux de couverture devrait tomber à une diapositive par vue en dessous de 768 px ou les panneaux latéraux deviennent des slivers inutilisables Le retournement fonctionne inchangé L'arc et l'orbite ont besoin d'une fenêtre plus large pour lire correctement, donc les deux retombent à une diapositive horizontale standard sur les téléphones.
Pourquoi mon carrousel 3 D scintille-t-il dans Safari ?
Presque toujours la visibilité de la face arrière Safari rend l'inverse d'un élément tourné à moins que vous ne le cachiez explicitement, qui apparaît comme un scintillement ou une image miroir fantomatique à mi-rotation Définir backface-visibility: hidden sur l'élément rotatif et il s'arrête.
Lequel choisir
Coverflow si vous n'êtes pas sûr C'est le style que les gens comprennent déjà, et le widget gratuit Image Carousel vous le donne sans licence Retournez si votre contenu a véritablement deux faces Arc si vous voulez quelque chose que personne d'autre sur la première page de votre niche n'a Orbit que si la chose que vous montrez fait réellement des boucles Si la section ne veut peut-être pas du tout de carrousel, carrousel contre curseur règle cela avant que le style de mouvement n'ait d'importance.
Huit des vingt dessins de l'ensemble importer sur le plugin gratuit. Aucun des huit gratuits n'est en 3 D, bien que le Keystone Feature Slider s'en rapproche : la promotion d'un élément exécute une animation de position FLIP plutôt qu'une transformation de profondeur.
Les vingt modèles sont construits avec le Constructeur de widgets(en), qui est aussi l'outil que vous utiliseriez pour construire le vôtre Si vous pesez la licence, le page de tarification répertorie ce que chaque niveau déverrouille.
Tous les quatre ont des démos live sur le Widgets de carrousel d'éléments page, à côté des seize autres modèles Si vous préférez voir l'ensemble complet côte à côte en premier, les vingt modèles de curseurs sont collectés en un seul endroit avec le même traitement.
Chacun des vingt est un Widget ou extension Master Addons1, donc ils installent de la même manière que les widgets de stock. Pour un galerie vignettes-bandes plutôt qu'une piste 3 D, le Galerie Widget Slider est l'option toute faite.
