Un carrusel 3D es un carrusel cuyos deslizamientos se mueven a través de la profundidad en lugar de a través de un plano: girando, escalando u orbitando de modo que los deslizamientos inactivos se ubican visiblemente detrás del activo. En Elementor lo obtienes de cualquiera de los dos Diseño de flujo de portada del widget Image Carousel, sau din un diseño especialmente diseñado.
Vale la pena dedicarle tiempo a cuatro estilos. Hacen trabajos diferentes y uno de ellos hará que su página sea más lenta sin ningún beneficio si la elige por el contenido incorrecto. Demostraciones en vivo para cada uno, además de las configuraciones que separan un carrusel 3D suave de uno tartamudo.
Coverflow: el que más quiere decir la gente
La corredera central mira hacia usted de forma cuadrada. Las correderas a ambos lados giran hacia afuera en el eje Y, se encogen ligeramente y se atenúan. Tu ojo no tiene adónde ir excepto el medio.
Ese es todo el truco y es por eso que coverflow sobrevivió a la muerte de iTunes. Las diapositivas periféricas son lo suficientemente visibles como para demostrar que hay más, lo suficientemente borrosas como para que no puedas leerlas. La gente hace clic en la flecha para resolver la tensión.
Tres escenarios hacen la mayor parte del trabajo:
- Girar: hasta dónde giran las correderas laterales. Cualquier cosa que supere los 50° y los vecinos se conviertan en astillas ilegibles. 30 a 40° es el rango que se lee como profundidad en lugar de distorsión.
- Profundidad: qué tan atrás se sientan. Empújelo demasiado y las diapositivas laterales se encogen hasta convertirse en miniaturas, y la composición pierde el equilibrio.
- Diapositivas por vista: coverflow necesita al menos tres visibles o no hay “flujo”. Configure en 3 en el escritorio, 1 en el móvil y omita el incómodo 2.
No necesitas Pro para este. El widget de carrusel de imágenes gratuito tiene un diseño de flujo de cobertura incorporado.
Bun pentru: estudios de casos, piezas de portafolio, colecciones estilo álbum.
Rău pentru: cualquier cosa que la gente necesite comparar. Coverflow está diseñado para que veas una cosa.
Voltear: cartas de dos caras
La tarjeta gira 180° en su eje vertical. Frente hacia afuera, atrás hacia adentro. Ambas caras contienen contenido real.
La mayoría de los efectos 3D son decoración. Éste no lo es. Duplica el contenido por diapositiva, por lo que se gana su lugar en una página de equipo. Foto y nombre en el frente, rol, biografía y enlaces en la parte posterior. Misma huella, el doble de información.
El escenario en el que la gente se equivoca es visibilidad trasera. Déjalo encendido y verás un fantasma reflejado de la cara frontal sangrando a mitad de la rotación. Es lo suficientemente sutil como para fallar en el editor y obvio en una pantalla de retina. Apágalo.
Segunda cosa: mantener el giro por debajo de los 600 ms. Un giro es una revelación, y una revelación que toma un segundo completo deja de sentirse receptiva y comienza a sentirse como un estado de carga.
Bun pentru: cuadrículas de equipo, antes/después, tarjetas de especificaciones, precios con detalles al revés.
Rău pentru: cualquier cosa donde la cara posterior estuviera vacía. Un giro sin nada detrás es un clic desperdiciado.
¿quieres la misma revelación de dos caras como una tarjeta de pie en lugar de una diapositiva de carrusel? Ese es el Widget de flipbox Elementor's trabajo.
Arco: se desliza en una curva
Los toboganes se desplazan sobre el borde de un círculo cuyo centro se encuentra debajo del pliegue. Cada uno llega erguido a la parte superior del arco y se aleja a medida que se aleja.
Arc es el estilo 3D menos común en los sitios de WordPress, que tiene la mayor parte de su valor. Un visitante ha visto el flujo de cobertura cien veces. No han visto esto.
A cambio, te cuesta algo: el movimiento de inclinación significa que las diapositivas solo son completamente legibles en la parte superior del arco. El contenido que debe ser legible en la periferia (precios, fechas, especificaciones) luchará contra el diseño. Las imágenes y los títulos cortos no lo harán.
Bun pentru: catálogos, listas de ejemplares, menús, colecciones de artículos similares.
Rău pentru: datos. Si las personas necesitan leer tres diapositivas a la vez, utilice una cuadrícula.
Órbita: movimiento circular alrededor de un centro
Los artículos recorren un círculo completo alrededor de un centro fijo. El artículo de arriba está activo y es de tamaño completo; el resto se reduce a medida que pasan detrás.
Orbit dice algo estructural que ningún otro diseño dice: esto se repite. Un proceso de cuatro etapas que realmente regresa a su inicio se lee perfectamente. Un flujo de incorporación de cinco pasos que termina no. Un círculo promete un retorno, y si tu contenido no regresa, la gente espera algo que nunca llega.
Utilice la órbita cuando el contenido sea un ciclo. Utilice el flujo de cobertura cuando sea una lista.
Bun pentru: ruedas de proceso, diagramas de ecosistemas, mapas de capacidades, ciclos de servicio.
Rău pentru: secuencias con principio y fin.
Cómo hacer un carrusel 3D que no tartamudee
Las transformaciones 3D son baratas en la GPU y caras si te equivocas. Cuatro cosas separan un carrusel suave de uno janky, en el orden en que te muerden:
- Sólo anima la transformación y la opacidad. Animar ancho, alto, superior o izquierdo obliga a volver a calcular el diseño en cada cuadro. Transformar y opacidad van directamente al compositor. Cada diseño aquí se apega a esos dos.
- Limite el tamaño de la imagen. Un carrusel 3D guarda varias diapositivas en la memoria a la vez porque están todas visibles. Seis diapositivas a 400 KB cada una son 2,4 MB antes de que algo se mueva. Consíguelos por debajo de 200 KB y sirva WebP.
- No apiles 3D dentro de 3D. Una tarjeta invertida dentro de una pista de flujo de cobertura crea contextos 3D anidados y los navegadores los manejan de manera inconsistente. Safari en particular aplana la transformación interna en momentos impredecibles. Elige uno.
- Respetar el movimiento reducido. Algunas personas tienen trastornos vestibulares y la animación de profundidad es un desencadenante común. Cada diseño aquí cae hasta un desvanecimiento simple cuando
prefers-reduced-motionestá establecido. Si construyes el tuyo propio, haz lo mismo.
Pruebe en un teléfono Android de gama media, no en el emulador del dispositivo del navegador. El emulador cambia el tamaño de la ventana gráfica pero mantiene la GPU de su escritorio. De ahí viene “estaba bien en mi máquina”.
¿un carrusel 3D perjudica la velocidad de la página?
No por sí solo. La animación basada en Transform se ejecuta en el hilo del compositor y no bloquea el hilo principal, por lo que no moverá mucho su interacción a Next Paint.
Lo que duele: las imágenes. Un carrusel encima del pliegue con seis diapositivas de tamaño completo consta de seis solicitudes de imágenes que bloquean el renderizado que compiten con su pintura más contenta. Cargue todo con pereza más allá de la primera diapositiva, establezca el ancho y el alto explícitos para que nada se mueva y mantenga la imagen de la primera diapositiva por debajo de 150 KB.
El 3D no es tu problema. La carga útil es.
Si el carrusel no se anima en absoluto, en lugar de animarse mal, generalmente Swiper no logra inicializar en lugar de un problema de transformación. La guía de solución de problemas de Swiper cubre lo que detiene su carga.
Preguntas frecuentes
¿elementor tiene carrusel 3D?
No de forma nativa. Media Carousel (Pro) de Elementor tiene un aspecto de flujo de cobertura que brinda un efecto 3D suave, pero no hay opción de giro, arco u órbita. Para aquellos que necesitan un complemento. Complementos maestros gratis Carrusel de imágenes incluye un diseño de flujo de cobertura y los cuatro diseños Pro en esta página cubren el resto.
¿cómo hago un carrusel de cobertura en Elementor?
Deja caer el Widget de carrusel de imágenes en la página, agregue sus imágenes y luego, en Configuración del carrusel, cambie el diseño de Estándar a Coverflow. Establezca diapositivas por vista en 3, gire a aproximadamente 35° y active las diapositivas centradas para que la imagen activa quede en el medio en lugar de al ras a la izquierda.
¿cuál es la diferencia entre coverflow y un carrusel 3D?
Coverflow es un tipo de carrusel 3D: aquel en el que los deslizamientos laterales giran sobre el eje Y y retroceden. El giro, el arco y la órbita también son carruseles 3D; simplemente usan diferentes ejes y trayectorias. Los cuatro se mueven a través de la profundidad en lugar de a través de un plano.
¿funcionan los carruseles 3D en dispositivos móviles?
Sí, con ajustes. Coverflow debería caer a una diapositiva por vista por debajo de 768px o los paneles laterales se convertirían en astillas inutilizables. Flip funciona sin cambios. El arco y la órbita necesitan una ventana gráfica más amplia para leer correctamente, por lo que ambos vuelven a caer a una diapositiva horizontal estándar en los teléfonos.
¿por qué mi carrusel 3D parpadea en Safari?
Casi siempre visibilidad hacia atrás. Safari representa lo contrario de un elemento girado a menos que lo ocultes explícitamente, lo que aparece como un parpadeo o una imagen especular fantasma a mitad de rotación. Establecer backface-visibility: hidden sobre el elemento giratorio y se detiene.
Cuál elegir
Coverflow si no estás seguro. Es el estilo que la gente ya entiende y el widget gratuito Image Carousel te lo da sin licencia. Voltee si su contenido realmente tiene dos caras. Arco si quieres algo que nadie más tiene en la primera página de tu nicho. Orbita sólo si lo que estás mostrando realmente tiene bucles. Si es posible que la sección no quiera un carrusel en absoluto, carrusel versus control deslizante resuelve eso antes de que el estilo de movimiento importe.
Si lo que desea rotar son sus últimas publicaciones, el diseño de Marquee en nuestro Plantillas de blog de Elementor coloca un carrusel de publicaciones destacado en la parte superior de la página de un blog.
Ocho de los veinte diseños del conjunto importe el complemento gratuito. Ninguno de los ocho gratuitos es 3D, aunque el control deslizante de funciones Keystone se acerca: la promoción de un elemento ejecuta una animación de posición FLIP en lugar de una transformación de profundidad.
Los veinte diseños están construidos con el Creador de widgets, que también es la herramienta que usarías para construir la tuya propia. Si está sopesando la licencia, el página de precios enumera lo que desbloquea cada nivel.
Los cuatro tienen demostraciones en vivo en el Widgets del carrusel Elementor página, junto a los otros dieciséis diseños. Si prefieres ver primero el conjunto completo uno al lado del otro las veinte plantillas deslizantes se recogen en un solo lugar con el mismo tratamiento.
Cada uno de los veinte es un Widget o extensión de complementos maestros, entonces instalan de la misma manera que lo hacen los widgets de stock. Para un galería miniatura-tira en lugar de una pista en 3D, el Widget de control deslizante de galería es la opción ya preparada.
