Efeito de foco exclusivo para repetidores de construtor de oxigênio

Publicados: 2022-04-10

Neste tutorial, vamos construir um efeito de foco exclusivo para o conteúdo exibido nos repetidores do Oxygen Builder. Modelado a partir do "Efeito Distortion Hover" do Codrops, e usando o código-fonte desse recurso, esse efeito criará um fade distorcido em uma imagem definida pelo usuário quando um visitante passar o mouse sobre uma célula repetidora.

Este tutorial irá incorporar alguns conceitos interessantes do Oxygen Builder:

  • Técnicas avançadas de repetidor
  • Grupos de campos ACF e integração manual com o Oxygen Builder
  • Grade CSS básica
  • Atributos dinâmicos
  • Uso de bloco de código e JS intermediário

Dando um passo adiante, vamos tornar esse recurso 100% dinâmico, o que significa que ele será definido e esquecido. Não há necessidade de inicializar um efeito específico para cada célula!

Acompanhe (Download da fonte):

Observação: esta é uma prova de conceito e provavelmente requer otimização para uso em locais de produção.

Duas outras coisas:

  • Estamos lançando um curso de Construtor de Oxigênio. Você pode saber mais aqui e entrar na lista de espera.
  • Este foi um tutorial solicitado em nosso incrível grupo do Facebook . Adoraríamos que você participasse!

Demonstração do efeito:

demo_iso_effect_oxygen_builder

Etapa 1: Campos ACF

Usaremos o ACF para tornar isso 100% dinâmico e fácil para o usuário final editar. Crie um grupo de campos e adicione uma imagem flutuante e uma imagem de deslocamento. A imagem inicial será a imagem em destaque do post. A imagem de foco é para o qual o efeito desaparecerá quando o visitante passar o mouse sobre um post repetidor.

A imagem de deslocamento é o que será usado para fazer a animação única de morph/fade entre as duas imagens. Neste exemplo, estamos usando as seguintes imagens para deslocamento:

7
8

Você pode realmente usar qualquer imagem, mas imagens em preto e branco com ótima textura geralmente são as melhores. É fácil experimentar este método!

isotrópico-2022-04-07-at-12-11-43
Crie um grupo de campos e atribua ao tipo de postagem.
isotrópico-2022-04-07-at-12-11-24
Cada formato de retorno de imagem deve ser o URL da imagem.

Veja a aparência do grupo de campos e das imagens associadas ao adicionar uma nova postagem:

isotrópico-2022-04-07-at-12-53-46
É fácil trocar qualquer uma das três imagens.

Passo 2: Crie a estrutura para o efeito

Em sua essência, estamos copiando o código-fonte do exemplo Codrops, com pequenas modificações.

<div class="grid"> <!-- este é o repetidor --> <div class="grid__item grid__item--bg"> <!-- este é o div no repetidor --> <div class=" grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- este é o "empacotador de imagem div" --> <img src="img/Img22.jpg" alt="Image"/> <img src="img/Img21.jpg" alt="Image"/> </div> <div class=" grid__item-content"> <!-- este é o "content wrapper div> --> <span class="grid__item-meta">Califórnia</span> <h2 class="grid__item-title">Pular por aí</h2 > <h3 class="grid__item-subtitle"> <span>últimos pontos de salto vazios da Califórnia</span> <a class="grid__item-link" href="#">Descubra mais</a> </h3> </ div> </div> </div>
isotrópico-2022-04-07-at-13-12-26

Simplesmente duplicamos a estrutura HTML acima, com elementos Oxygen Builder. Não se esqueça de adicionar as classes do exemplo HTML acima, pois vamos adicionar um pouco de CSS e o JS as usa para identificar elementos específicos. Se você alterar essas classes, precisará atualizar o CSS e o JS de acordo.

Nosso repetidor está usando a grade CSS para espaçar uniformemente todas as células sem muito trabalho:

isotrópico-2022-04-07-at-13-25-06

Etapa 3: tornar dinâmico

Há várias coisas para configurar para ser dinâmico. Primeiro, faça com que a consulta do repetidor seja do tipo WordPress Post.

Em seguida, defina a data e o título do post para serem dinâmicos.

isotrópico-2022-04-07-at-13-17-17

Agora, vamos configurar as três imagens. É aqui que as coisas podem ficar complexas. Defina o URL da imagem 1 para ser o URL da imagem em destaque.

isotrópico-2022-04-07-at-13-20-11

Defina o URL da imagem 2 para ser a imagem flutuante, definida no ACF. Para este tutorial, os campos ACF não estavam sendo exibidos no pop-up "inserir dados dinâmicos" (provavelmente devido a um bug Oxygen Builder 4.0 Beta 2). Há uma solução fácil se você já passou por isso:

1 - Insira os dados dinâmicos

2 - Selecione o valor de retorno da função PHP

isotrópico-2022-04-07-at-13-20-47

3 - insira manualmente o conteúdo do campo ACF com get_field('fieldname')

isotrópico-2022-04-07-at-13-21-30

Finalmente, precisamos definir a imagem de distorção que o efeito usará para fazer a transição de metamorfose. Isso é inserido no HTML como um atributo de dados, que o JS lê e incorpora no efeito. A partir do HTML acima, podemos ver que existem vários atributos, que podem ser editados para alterar o efeito.

<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- this é o "div wrapper de imagem" --> ... </div>

O principal que precisamos tornar dinâmico é o deslocamento de dados, que terá a URL da imagem definida no post usando o ACF. Codificamos os outros três atributos, mas você pode usar o mesmo método descrito abaixo para torná-los editáveis ​​pelo usuário também.

Vá para o elemento wrapper de imagem (o div em torno das duas imagens dinâmicas). Clique em Avançado -> Atributos e adicione o seguinte.

isotrópico-2022-04-07-at-13-28-05

Para data-displacement , tornaremos isso dinâmico clicando no botão data+ no conteúdo e inserindo nosso campo ACF correspondente.

O HTML do frontend ficará assim, e o JS usará todos esses dados (que são dinâmicos e editáveis ​​pelo usuário via ACF) para criar o efeito de deslocamento de deslocamento legal no WordPress:

isotrópico-2022-04-07-at-13-46-39

Etapa 4: adicionar CSS, bibliotecas e JS

Adicionaremos o seguinte CSS à nossa folha de estilo CSS universal. Você pode precisar brincar com estilos CSS adicionais para que tudo funcione bem.

.grid__item { estouro:escondido; posição: relativa; } .grid__item-content { z-index:5; } .grid__item-img { display: bloco; altura: 100%; largura: 100%; } .grid__item-img canvas { altura: 100%; posição: absoluta; topo:0; índice z:1; } .grid__item-img img { altura: 100%; exibição: bloco; } /* Este é um fallback se o JS não funcionar */ .grid__item-img img:nth-child(2) { position: absolute; topo: 0; esquerda: 0; opacidade: 0; transição: opacidade 0,3s; } .grid__item:hover .grid__item-img img:nth-child(2) { opacidade: 1; } .js .grid__item-img img { display: nenhum; }

Por fim, carregaremos as bibliotecas JS necessárias e o código (fizemos isso com um bloco de código):

<script src="https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/example/js/imagesloaded.pkgd.min.js"></script> <script src="https ://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest /TweenMax.min.js"></script> <script src="https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/dist/hover-effect.umd.js"> </script> <script> imagesLoaded( document.querySelectorAll('img'), () => { document.body.classList.remove('loading'); }); Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => { const imgs = Array.from(el.querySelectorAll('img')); new hoverEffect({ parent: el, intensidade: el.dataset.intensity || undefined, speedIn: el.dataset.speedin || undefined, speedOut: el.dataset.speedout || undefined, easing: el.dataset.easing || undefined, hover: el.dataset. hover || undefined, image1: imgs[0].getAttribute('src'), image2: imgs[1].getAttribute('src'), deslocamentoImage: el.dataset.displacement }); }); </script>

Estamos usando Statical para nosso exemplo (puxando as bibliotecas ImagesLoaded e Hover Effect do GitHub), mas você deve hospedá-lo idealmente em seu site, usando uma ferramenta como Scripts Organizer ou Advanced Scripts.

Também carregamos Three.JS e TweenMax.JS, que são as duas bibliotecas subjacentes que trabalham para gerar o efeito de deslocamento.

Por fim, o JS faz o seguinte - ele identifica quando as imagens são carregadas e aplica o efeito hover em qualquer elemento que tenha o .grid__item-img , puxando as imagens associadas e as imagens de deslocamento de cada postagem. Completamente dinâmico e funcionará independentemente do número de posts retornados pelo repetidor Oxygen Builder.

Depois de adicionar tudo isso, seu efeito deve estar funcionando!

Isso foi solicitado por um membro do nosso grupo isotrópico do Facebook. Convidamos você a participar aqui.

Inscreva-se e compartilhe
Se você gostou deste conteúdo, assine nosso resumo mensal de notícias do WordPress, inspiração de sites, ofertas exclusivas e artigos interessantes.
Cancele a inscrição a qualquer momento. Não fazemos spam e nunca venderemos ou compartilharemos seu e-mail.