Nesse post vamos ver como implementar um light-box com AMP, light-box é um dos recursos mais usados desde a popularização do JavaScript. Na maioria das vezes usado para focar a exibição de elementos gráficos ou mensagens. A plataforma amp disponibiliza três componentes para exibição de light-box amp-lightbox, amp-image-lightbox e amp-lightbox-gallery.
Cada um desses componentes possui uma aplicação específica, Para esse tutorial iremos abordar o componente amp-lightbox.
O que é amp-lightbox?
Esse componente quando utilizado o seu elemento filho será exibido numa modal quando acionado através de um evento de clique. Com isso temos que ter um segundo elemento para ativa-lo, um botão poderá ser uma alternativa. O componente possui alguns comportamentos já pre definidos, por exemplo, quando o usuário pressionar a tecla “esc” o light-box com amp será fechado. Uma alternativa é incluir um elemento com a ação close no light-box com amp.
Como adicionar um light-box com amp?
O componente amp-lightbox é um componente extended assim precisamos carregar o script relacionado:
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>Code language: HTML, XML (xml)Com essa introdução vamos criar o nosso primeiro exemplo, baseado no projeto the best caipirinha, vamos utilizar o light-box para trazer mais informações sobre os items da nossa receita, por exemplo, descrição sobre cana-de-açúcar com isso temos o seguinte código:
<button on="tap:sugarcane-wiki">sugarcane</button>
<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
<p>
Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum...
</p>
</amp-lightbox>Code language: HTML, XML (xml)Apenas com o botão e o componente amp-lighbox temos nosso light box somente com a funcionalidade como podemos ver na imagem abaixo:
Agora é hora de adicionar a parte visual, para isso precisamos adicionar o estilo para o nossos elementos com isso vamos criar classes para estilizar nossos elementos em nosso CSS e aciona-los em nosso elementos HTML:
CSS para o light-box com AMP
.lightbox {
align-items: center;
background: rgba(0, 0, 0, 0.8);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
padding: 2em;
}
.lightbox_p {
color: #fff;
font-size: 1.5em;
font-weight: 500;
}
Code language: CSS (css)HMTL
<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
<div class="lightbox">
<p class="lightbox_p">
Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
</p>
<p class="lightbox_p">source: wikipedia</p>
</div>
</amp-lightbox>Code language: HTML, XML (xml)Adicionando o estilo temos o seguinte resultado:
Apenas adicionando o botão para abrir o light-box com amp, para fechar precisamos pressionar a tecla “esc” mas isso pode não ser intuitivo para os nossos usuários com isso vamos adicionar um botão fechar dentro de nosso light-box com AMP.
<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
<div class="lightbox">
<p class="lightbox_p">
Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
</p>
<p class="lightbox_p">source: wikipedia</p>
<button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button>
</div>
</amp-lightbox>
Code language: HTML, XML (xml)Adicionamos um botão com a ação de close sobre o light-box, falando em ações o componente amp-lightbox aceita duas ações open e close. Por padrão ele aciona a ação de open por isso que no botão para abrir o light-box não especificamos a ação. Agora para realizar a estilização do nosso botão vamos adicioar o seguinte CSS:
.lightbox_close {
position: absolute;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.7;
text-indent: -999px;
overflow: hidden;
border: none;
background: transparent;
}
.lightbox_close:hover {
opacity: 1;
}
.lightbox_close::before,
.lightbox_close::after {
background-color: #fff;
content: '';
position: absolute;
left: 16px;
top: 0;
height: 33px;
width: 3px;
}
.lightbox_close::before {
transform: rotate(45deg);
}
.lightbox_close::after {
transform: rotate(-45deg);
}
Code language: CSS (css)E o resultado será o seguinte:
Outro opção que poderíamos incluir se o usuário fechasse o light-box clicando no background com isso adicionamos o evento de clique no elemento com o class “lighbox”:
<amp-lightbox id="sugarcane-wiki" layout="nodisplay">
<div class="lightbox"
on="tap:sugarcane-wiki.close"
role="button"
tabindex="0">
<p class="lightbox_p">
Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum...
</p>
<p class="lightbox_p">source: wikipedia</p>
</div>
<button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button>
</amp-lightbox>
Code language: HTML, XML (xml)No código acima adicionei o evento de tap no elemento lightbox também adicionei duas propriedades por questões de acessibilidade “role” e “tabindex” para tornar a div clicável e não interferir na ordem lógica dos elementos para leitores de tela.
Atributos
Então vimos alguns exemplos práticos com light-box agora vamos ver alguns atributos:
- animate-in (opcional): define o estilo de animação de abertura do light-box. Por default sua aparição vai ser feita por fade-in. Mas temos disponíveis: fade-in, fly-in-bottom e fly-in-top.
- close-button (obrigatório para AMP ads): renderiza um botão no to do lightbox. Ele é somente válido e obrigatório para AMP ads.
- id (obrigatório): valor único para identificar o lightbox.
- layout (obrigatório): deve ser definido como nodisplay.
- scrollable (opcional): Quando este atributo é definido o conteúdo do light-box pode ter rolagem horizontal habilitada quando necessário.
O tipos de animações com animate-in eu vou deixar para mostrar em uma vídeo aula no meu canal, mas caso queira saber mais sobre AMP confira a página com outros tutoriais na página da categoria AMP.
Deixe um comentário