Um carrossel 3 D é um carrossel cujos slides se movem através da profundidade em vez de através de um plano plano: girando, escalando ou orbitando para que os slides inativos fiquem visivelmente atrás do ativo No Elementor você obtém isso do Layout de fluxo de cobertura do widget Image Carousel, ou de um projeto construído propositadamente.
Quatro estilos valem o seu tempo Eles fazem trabalhos diferentes, e um deles vai tornar a sua página mais lenta sem nenhum benefício se você escolhê-lo para o conteúdo errado Demonstrações ao vivo para cada um, além das configurações que separam um carrossel 3 D suave de um gaguejante.
Coverflow: aquele que a maioria das pessoas quer dizer
O slide central fica voltado para você de frente para você. Os slides de cada lado giram para longe no eixo Y, encolhem ligeiramente e escurecem. Seu olho não tem para onde ir, exceto o meio.
Esse é todo o truque, e é por isso que o coverflow sobreviveu à morte do iTunes Os slides periféricos são visíveis o suficiente para provar que há mais, borrados o suficiente para que você não possa lê-los As pessoas clicam na seta para resolver a tensão.
Três configurações fazem a maior parte do trabalho:
- Girar: até onde os slides laterais giram. Qualquer coisa além de 50° e os vizinhos tornam-se lascas ilegíveis. 30 a 40° é o intervalo que parece profundidade e não distorção.
- Profundidade: quão longe eles se sentam Empurre-o muito longe e os slides laterais encolhem para miniaturas, e a composição perde o equilíbrio.
- Slides por visualização: o fluxo de cobertura precisa de pelo menos três visíveis ou não há fluxo de “.” Defina para 3 na área de trabalho, 1 no celular e pule o estranho 2.
Não precisas do Pro para este O widget Carrossel de Imagem Grátis tem um layout de fluxo de cobertura integrado.
Bom para: estudos de caso, peças de portfólio, coleções em estilo de álbum.
Ruim para: qualquer coisa que as pessoas precisam comparar O Coverflow é construído para fazer você olhar para uma coisa.
Flip: cartas de dois lados
O cartão gira um total de 180° em seu eixo vertical Face frontal para fora, face traseira para dentro Ambas as faces mantêm o conteúdo real.
A maioria dos efeitos 3 D são decoração Este não é Ele dobra o conteúdo por slide, por isso ganha seu lugar em uma página da equipe Foto e nome na frente, papel, bio e links na mesma pegada, o dobro da informação.
O cenário em que as pessoas erram é visibilidade backface. Deixe ligado e você verá um fantasma espelhado da face frontal sangrando no meio da rotação É sutil o suficiente para perder no editor e óbvio em uma tela de retina Desligue-o.
Segunda coisa: mantenha o flip abaixo de 600 m. Um flip é uma revelação, e uma revelação que leva um segundo completo pára sentindo responsivo e começa a sentir como um estado de carregamento.
Bom para: grades de equipe, antes/depois, cartões de especificações, preços com detalhes invertidos.
Ruim para: qualquer coisa onde a face traseira estaria vazia Um flip com nada atrás dele é um clique desperdiçado.
Quer a mesma revelação bilateral como uma carta em pé, em vez de um slide de carrossel? esse é o Widget flipbox Elementor's trabalho.
Arco: desliza em uma curva
Os slides percorrem a borda de um círculo cujo centro fica abaixo da dobra. Cada um chega na vertical ao topo do arco e desce à medida que se afasta.
Arc é o estilo 3 D menos comum em sites WordPress, que é a maior parte do seu valor Um visitante viu o fluxo de cobertura cem vezes Eles não viram isso.
Custa-lhe algo em troca: o movimento de tombamento significa que os slides só são totalmente legíveis no topo do arco Conteúdo que precisa ser legível na periferia (preços, datas, especificações) vai lutar contra o design Imagens e títulos curtos não vai.
Bom para: catálogos, listas de espécimes, menus, coleções de itens semelhantes.
Ruim para: dados. se as pessoas precisarem ler três slides de uma só vez, use uma grade.
Órbita: movimento circular em torno de um centro
Os itens viajam um círculo completo em torno de um centro fixo O item na parte superior é ativo e em tamanho real; o resto diminui à medida que passam para trás.
Orbit diz algo estrutural que nenhum outro layout diz: este loops Um processo de quatro estágios que genuinamente retorna ao seu início lê perfeitamente Um fluxo de integração de cinco etapas que termina não Um círculo promete um retorno, e se o seu conteúdo não retornar, as pessoas esperam por algo que nunca vem.
Use órbita quando o conteúdo é um ciclo Use o fluxo de cobertura quando for uma lista.
Bom para: rodas de processo, diagramas de ecossistema, mapas de capacidade, ciclos de serviço.
Ruim para: sequências com começo e fim.
Como fazer um carrossel 3 D que não gagueja
Transformações 3 D são baratas na GPU e caras se você errar Quatro coisas separam um carrossel suave de um janky, na ordem em que vão morder você:
- Anime apenas transformação e opacidade. Animar largura, altura, topo ou esquerda força um recálculo de layout em cada quadro Transformar e opacidade vão direto para o compositor Todo design aqui se apega a esses dois.
- Limite o tamanho da imagem. Um carrossel 3 D contém vários slides na memória de uma só vez porque todos estão visíveis Seis slides a 400 KB cada são 2,4 MB antes que qualquer coisa se mova Obtenha-os abaixo de 200 KB e sirva WebP.
- Não empilhe 3 D dentro de 3D. Um flip card dentro de uma faixa de fluxo de cobertura cria contextos 3 D aninhados, e os navegadores lidam com isso de forma inconsistente O Safari, em particular, achata a transformação interna em momentos imprevisíveis Escolha um.
- Respeite o movimento reduzido. Algumas pessoas têm distúrbios vestibulares, e animação de profundidade é um gatilho comum Cada design aqui cai para um fade simples quando
prefers-reduced-motionestá definido Se você construir o seu próprio, faça o mesmo.
Teste em um telefone Android de gama média, não no emulador de dispositivo do navegador O emulador redimensiona a janela de visualização, mas mantém a GPU do seu desktop É daí que vem o “it estava bem na minha máquina”.
Um carrossel 3 D prejudica a velocidade da página?
Não por si só A animação baseada em transformação é executada no thread do compositor e não bloqueia o thread principal, portanto, não moverá muito sua Interação para o Próximo Paint.
O que dói: as imagens Um carrossel acima da dobra com seis slides em tamanho real são seis solicitações de imagem de bloqueio de renderização competindo com sua maior tinta contente Lazy-load tudo após o primeiro slide, definir largura e altura explícitas para que nada mude, e manter a imagem do primeiro slide abaixo de 150 KB.
O 3 D não é problema seu A carga útil é.
Se o carrossel não estiver animando, em vez de animar mal, geralmente o Swiper não consegue inicializar em vez de um problema de transformação. O guia de solução de problemas do Swiper cobre o que o impede de carregar.
Perguntas frequentes
Elementor tem um carrossel 3 D?
Não nativamente O Media Carousel (Pro) da Elementor tem uma pele de fluxo de cobertura que dá um efeito 3 D suave, mas não há opção de flip, arco ou órbita Para aqueles que você precisa de um addon Master Addons grátis Carrossel de Imagem inclui um layout de fluxo de cobertura e os quatro designs Pro nesta página cobrem o restante.
Como faço um carrossel de fluxo de cobertura no Elementor?
Largar o Widget Carrossel de Imagem na página, adicione suas imagens e, em seguida, em Configurações do carrossel, alterne Layout de Padrão para Coverflow Defina slides por visualização como 3, gire para cerca de 35° e ligue slides centralizados para que a imagem ativa fique no meio, em vez de nivelar com a esquerda.
Qual é a diferença entre o fluxo de cobertura e um carrossel 3 D?
O fluxo de cobertura é um tipo de carrossel 3 D: aquele em que os slides laterais giram no eixo Y e recuam, Flip, arco e órbita também são carrosséis 3 D; eles apenas usam eixos e caminhos diferentes Todos os quatro deslizam através da profundidade, em vez de através de um plano plano.
Os carrosséis 3 D funcionam em dispositivos móveis?
Sim, com ajustes O fluxo de cobertura deve cair para um slide por visualização abaixo de 768 px ou os painéis laterais se tornam lascas inutilizáveis O flip funciona inalterado O arco e a órbita precisam de uma janela de visualização mais ampla para serem lidos corretamente, então ambos voltam a um slide horizontal padrão nos telefones.
Por que meu carrossel 3 D pisca no Safari?
Quase sempre visibilidade backface O Safari renderiza o inverso de um elemento girado, a menos que você explicitamente escondê-lo, que aparece como uma cintilação ou uma imagem espelhada fantasma no meio da rotação Definir backface-visibility: hidden no elemento rotativo e ele para.
Qual escolher
Coverflow se você não tiver certeza É o estilo que as pessoas já entendem, e o widget gratuito Image Carousel dá a você sem uma licença Flip se o seu conteúdo realmente tem dois lados Arc se você quiser algo que ninguém mais na primeira página do seu nicho tem Orbit somente se a coisa que você está mostrando realmente loops Se a seção pode não querer um carrossel em tudo, carrossel versus controle deslizante resolve isso antes que o estilo de movimento seja importante.
Se a coisa que você deseja girar são seus posts mais recentes, o layout Marquee em nosso Modelos de blog Elementor coloca um carrossel de postagens em destaque no topo de uma página do blog.
Oito dos vinte designs do conjunto importar no 'plugin' gratuito. Nenhum dos oito livres é 3 D, embora o Keystone Feature Slider chegue perto: promover um item executa uma animação de posição FLIP em vez de uma transformação de profundidade.
Todos os vinte projetos são construídos com o Construtor de widgets(que também é a ferramenta que você usaria para construir a sua própria).Se você está pesando a licença, o página preços lista o que cada nível desbloqueia.
Todos os quatro têm demos ao vivo no Widgets Carrossel Elementor page, ao lado dos outros dezesseis designs Se preferir ver o conjunto completo lado a lado primeiro, todos os vinte modelos de controle deslizante são coletados em um só local com o mesmo tratamento.
Cada um dos vinte é um Widget ou extensão Master Addons, então eles instalam da mesma forma que os widgets de estoque. Para a galeria thumbnail-strip em vez de uma faixa 3 D, o Widget de controle deslizante de galeria é a opção pronta.
