Criação de um controle deslizante animado de produtos com Sequence.js

Neste tutorial, vamos criar um controle deslizante de conteúdo animado simples com Sequence.js.

Basearemos nossa demonstração no tema Sequence.js, Mono. Por uma questão de brevidade, nossa demonstração não incluirá tudo o que o Mono faz, mas o senhor aprenderá todos os conceitos-chave do Sequence.js, além de ter uma boa base para trabalhar e começar a criar seus próprios aplicativos animados exclusivos.

Dê uma olhada no aquibem como alguns dos aplicativos que criamos no Loja de temas do Sequence.js.

Veja a caneta Sequence.js – Mono por Ian Lunn (@IanLunn) em CodePen.

O que é Sequence.js

O Sequence.js oferece toda a funcionalidade necessária para aplicativos animados baseados em etapas, como controles deslizantes e apresentações. Sua estrutura CSS integrada permite que o usuário anime o conteúdo à medida que as etapas se tornam ativas e inativas usando simples em e fora nomes de classes.

Ao descrever as transições de conteúdo em CSS, o senhor pode contar com a aceleração de hardware para obter animações suaves e consultas de mídia para criar um aplicativo responsivo usando um fluxo de trabalho com o qual já está familiarizado.

O Sequence.js é compatível com os navegadores modernos com um tema de fallback tradicional lado a lado para o Internet Explorer 8 e 9.

O Sequence.js pode ser usado gratuitamente para uso pessoal ou com a compra de um licença quando usada comercialmente.

Configuração do projeto

Para começar, faça o download dos arquivos de demonstração aqui e descompacte-os no local de sua preferência. Esses são os arquivos iniciais aos quais adicionaremos o código deste tutorial.

O zip contém as seguintes pastas e arquivos:

css/demo.css – Uma folha de estilo para nossa demonstração

images – Contém as imagens que adicionaremos em breve

scripts – Contém os scripts necessários para o Sequence.js

index.html – A página HTML

CREDITS.md – Créditos de alguns dos ativos de terceiros que usaremos

Se o senhor preferir baixar a versão mais recente do Sequence.js, vá para o site página de download onde o senhor pode baixar um zip ou encontrar instruções para instalar via NPM ou Bower.

Abrir index.html e o senhor encontrará o seguinte modelo básico de HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sequence.js - Getting Started</title>
  <link href="https://davidwalsh.name/css/demo.css" rel="stylesheet" media="all">
</head>
<body>

</body>
</html>

Aqui eu adicionei um título de página e fiz referência à folha de estilo css/demo.css. Também adicionei um <meta name="viewport"> que diz ao navegador para tornar a janela de visualização com a mesma largura do dispositivo, com uma escala de 100%; isso prepara a página para ser responsiva em uma grande variedade de dispositivos.

Adição de conteúdo e estrutura

Vamos começar a adicionar a estrutura básica do Sequence.js e algum conteúdo à nossa página.

Em index.html encontre o <body> e, dentro dele, adicione o seguinte:

<div id="sequence" class="seq">
  <ul class="seq-canvas">
    <li class="step1">
      <img class="feature" src="https://davidwalsh.name/images/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />
    <h2 class="title">Bananas</h2>
    </li>
    <li class="step2">
      <img class="feature" src="images/coconut.png" alt="A cartoon illustration of half a coconut" width="325" height="300" />
      <h2 class="title">Coconut</h2>
    </li>
    <li class="step3">
      <img class="feature" src="images/orange.png" alt="A cartoon illustration of a round orange" width="350" height="300" />
      <h2 class="title">Orange</h2>
    </li>
  </ul>
</div>

No código acima, adicionamos a estrutura básica do Sequence.js e algum conteúdo: uma imagem e um título. Vamos ignorar o conteúdo e analisar a estrutura do Sequence.js.

<div id="sequence" class="seq">
  <ul class="seq-canvas">
    <li class="step1">
      ...
    </li>
    <li class="step2">
      ...
    </li>
    <li class="step3">
      ...
    </li>
  </ul>
</div>

Ao adicionar Sequence.js a uma página, ela deve ser composta por um contêiner, telae passos.

O <div id="sequence" class="seq"> atua como o contêiner. Atribuímos a ele um ID que usaremos para anexar o script Sequence.js em breve. O elemento seq será usada para aplicar estilos. Dentro do contêiner estão o elemento canvas e as etapas. Outros elementos, como a navegação, também podem ser colocados dentro do contêiner.

A tela <ul class="seq-canvas"> contém as etapas. Pode ser qualquer elemento, desde que tenha a classe seq-canvas. A tela pode ser animada automaticamente pelo Sequence.js para que a etapa ativa esteja sempre à vista. Faremos experiências com isso em breve.

Por fim, o <li> dividem nosso conteúdo em etapas. O senhor pode pensar nas etapas como slides em uma apresentação, por exemplo. Nós as chamamos de etapas no Sequence.js porque elas fazem muito mais do que apenas deslizar!

Assim como a tela, as etapas podem ser qualquer elemento que o senhor desejar, desde que sejam descendentes imediatos da tela. Assim, o senhor poderia usar uma estrutura de tela/etapas como:

<section class="seq-canvas">
  <article>
    ...Step 1...
  </article>
  <article>
    ...Step 2...
  </article>
  <article>
    ...Step 3...
  </article>
</section>

A escolha é sua.

Observação: dei nomes de classe às etapas step1, step2, e assim por diante. Isso não é necessário, mas o usaremos em nossa demonstração para que as etapas tenham uma cor diferente.

Dentro de uma etapa é onde o conteúdo é colocado. O senhor não está limitado ao conteúdo ou aos elementos HTML que pode usar.

Adicionando o Sequence.js

Agora que o conteúdo e a estrutura estão prontos, precisamos adicionar os scripts Sequence.js.

Antes do fechamento </body> no HTML, adicione os seguintes scripts:

<script src="https://davidwalsh.name/scripts/imagesloaded.pkgd.min.js"></script>
<script src="scripts/hammer.min.js"></script>
<script src="scripts/sequence.min.js"></script>
<script src="scripts/demo.js"></script>

Os scripts são os seguintes:

imagesLoaded – Terceiros que fornecem funcionalidade de pré-carregador para Sequence.js

Hammer.js – Terceiros que fornecem funcionalidade de toque para o Sequence.js

sequence.min.js – O script principal do Sequence.js que fornece a estrutura de animação e outras funcionalidades.

demo.js – Um arquivo de opções do Sequence.js para nossa demonstração

Os scripts de terceiros são opcionais e só precisam ser adicionados se o senhor quiser usar o pré-carregador e o suporte ao toque. O arquivo de opções é onde anexaremos o Sequence.js ao nosso HTML, alteraremos as opções e, se o senhor desejar, adicionaremos funcionalidades personalizadas.

Abrir scripts/demo.js e adicione o seguinte:

var sequenceElement = document.getElementById("sequence");

var options = {

}

var mySequence = sequence(sequenceElement, options);

Esse é o código básico necessário para iniciar o Sequence.js em uma página da Web. A primeira linha obtém o elemento ao qual queremos que o Sequence.js seja aplicado (o elemento contêiner com ID de sequence), a segunda altera as opções do Sequence.js e a terceira inicia o Sequence.js no elemento escolhido.

É uma boa ideia habilitar o keyNavigation ao desenvolver com o Sequence.js, para que o senhor possa navegar entre os slides por meio das setas esquerda/direita do teclado. Para fazer isso, adicione o seguinte ao arquivo options objeto:

var options = {
  keyNavigation: true
}

Salve o arquivo.

Layout do contêiner

Agora que a estrutura e o conteúdo estão prontos, vamos adicionar alguns estilos básicos.

Em css/demo.css, adicione o seguinte:

body,
html,
.seq {

  /* #1 */
  width: 100%;
  height: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
}

.seq {

  /* #1 */
  position: relative;

  /* #2 */
  overflow: hidden;

  /* #3 */
  font-family: sans-serif;
}

.seq-canvas,
.seq-canvas > * {

  /* #1 */
  height: 100%;
  width: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
  list-style: none;
}

O body, html, .seq elementos:

São feitos em tela cheia via width e height

Ter seus margin e padding redefinição para melhor consistência do navegador

O .seq elemento contêiner:

É posicionado de forma que todos os elementos absolutos dentro dele sejam relativos a ele

Impede que quaisquer elementos dentro dele sejam exibidos do lado de fora, caso transbordem

É fornecida uma fonte básica

A tela .seq.canvas e degraus .seq-canvas > *:

São feitos em tela cheia via width e height

Redefinir alguns estilos, incluindo a remoção do disco aplicado ao <li> por padrão

Esses são os estilos básicos que usaremos em nossa demonstração e que deixaremos mais bonitos depois. Na maioria das vezes, esses são os estilos que o senhor pode usar para começar com qualquer aplicativo Sequence.js. Nossa demonstração ocupará toda a janela do navegador, portanto, se o senhor planeja adicionar um aplicativo Sequence.js a uma página da Web de conteúdo, provavelmente não desejará fazer isso. Em vez disso, o senhor poderia remover o .body, .html, .seq e aplicar o conjunto de regras width/height propriedades para o .seq em vez disso. Por exemplo, o seguinte faria com que o contêiner tivesse largura total, mas com uma altura definida:

.seq {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 600px;
  font-family: sans-serif;
}

O senhor poderia usar height: 90vh para tornar o contêiner 90% da altura da janela de visualização, usar um técnica CSS para manter a proporção de aspecto (usamos isso em nosso Temas do Sequence.js), e assim por diante. Há poucas restrições quando se trata de usar CSS com o Sequence.js. A escolha é sua.

Layout e animação de tela

Não usaremos a animação da tela neste tutorial, mas o seguinte está incluído para demonstrar como é fácil animar automaticamente a tela no Sequence.js. Se quiser pular essa etapa, continue lendo e seguindo as instruções do Sem animação de tela.

A tela sendo animada automaticamente de baixo para cima

Vamos visualizar o que temos até agora em um navegador. Se tudo estiver configurado corretamente, o senhor poderá pressionar as teclas de seta esquerda/direita do teclado e o Sequence.js animará automaticamente a tela de modo que a etapa ativa sempre apareça no contêiner.

Por padrão, o canvasAnimation em Sequence.js é true. Com essa opção ativada, o Sequence.js animará automaticamente a tela obtendo a posição de deslocamento de uma etapa e movendo a tela de modo que o canto superior esquerdo da etapa ativa encontre o canto superior esquerdo do contêiner. Isso significa que o senhor pode posicionar as etapas de cima para baixo, lado a lado ou em um layout personalizado, e a tela se moverá automaticamente para mostrar a etapa ativa no contêiner.

Observação: As transformações de CSS não afetam a posição de deslocamento de um elemento, portanto, é melhor fazer o layout das etapas por meio de position e top, bottom, left, right propriedades. O Sequence.js é inteligente o suficiente para pegar esses valores de propriedade e animar a tela usando uma transformação CSS, que tem melhor desempenho quando animada.

Observação 2: A velocidade de animação da tela pode ser alterada especificando-se um valor de milissegundos para o parâmetro animateCanvasDuration .

Vamos experimentar o layout para ver a animação automática da tela em andamento.

Layout lado a lado

Fizemos com que cada etapa ocupasse toda a largura e altura de um contêiner. Por causa disso, o navegador, por padrão, os envolve de modo que apareçam um abaixo do outro e a tela se anima para cima e para baixo para mostrar cada etapa ativa.

Para que as etapas fiquem lado a lado, o senhor pode usar o seguinte:

.seq-canvas {
  /* #1 */
  white-space: nowrap;
}

.seq-canvas > * {
  /* #1 */
  display: inline-block;
  vertical-align: top;

  /* #2 */
  white-space: normal;
}

No .seq-canvas o canvas é impedido de envolver elementos (empurrando-os para uma nova linha).

O .seq-canvas > * conjunto de regras:

Faz com que os degraus fiquem lado a lado, agora a tela permitirá que eles façam isso

Redefine o espaço em branco de volta ao normal para que as etapas não sejam herdadas nowrap da tela

Animação da tela de um lado para o outro

Layout personalizado

Que tal um layout personalizado? Tente o seguinte:

.seq-canvas > * {
  position: absolute;
}

.step2 {
  top: 2000px;
  left: 2000px;
}

.step3 {
  top: 4000px;
  left: 4000px;
}

Aqui os passos estão posicionados absolute e, em seguida, fornecidas top e left propriedades para posicioná-los onde quisermos.

Animação de tela - personalizada

Sem animação de tela (passos no mesmo lugar)

Para este tutorial, não usaremos a animação da tela; em vez disso, apenas animaremos o conteúdo (que veremos em breve). Para desativar a animação da tela, coloque todas as etapas no mesmo lugar, adicionando o seguinte ao css/demo.css:

.seq-canvas > * {
  /* #1 */
  position: absolute;
}

Como o Sequence.js sabe que as etapas estão todas no mesmo lugar agora, ele não animará a tela. No entanto, como boa prática, vale a pena desativar a animação da tela também nas opções. Atualize o options no objeto scripts/demo.js dessa forma:

options = {
  keyNavigation: true,
  animateCanvas: false
}

Os passos posicionados no mesmo lugar

Neste ponto, o aplicativo terá uma aparência muito ruim. Como agora posicionamos todas as etapas no mesmo lugar, o conteúdo de cada etapa está se sobrepondo. Em Animating Content (Animação de conteúdo), corrigiremos isso ocultando o conteúdo em etapas inativas e mostrando o conteúdo somente quando a etapa estiver ativa.

Adição de estilos de conteúdo

Agora que já vimos o que é possível fazer com a animação em tela, vamos melhorar o visual da nossa demonstração antes de passar para Animação de conteúdo.

Quando uma etapa se torna ativa, o elemento contêiner <div id="sequence" class="seq"> recebe um nome de classe “seq-stepX”, sendo o X substituído pelo número da etapa, por exemplo .seq-step1.

Para alterar a cor do plano de fundo sempre que a etapa mudar, adicione na parte inferior de css/demo.css:

.seq-step1 {
  background-color: #2A93BC;
}

.seq-step2 {
  background-color: #6BC85E;
}

.seq-step3 {
  background-color: #45367E;
}

Que tal animarmos isso também? Atualize o .seq para o seguinte:

.seq {

  /* #1 */
  position: relative;

  /* #2 */
  overflow: hidden;

  /* #3 */
  font-family: sans-serif;
  color: white;
  text-align: center;

  /* #4 */
  background-color: #2A93BC;

  /* #5 */
  transition-duration: .5s;
  transition-property: background-color;
}

Observação: Para fins de brevidade, não usaremos os prefixos do navegador neste tutorial para elementos como transition-duration mas, no momento em que escrevo, o senhor deve usar o prefixo -webkit- para que a demonstração funcione nos navegadores Safari e iOS.

Aqui temos:

Defina a cor do texto como branco e centralize-o

Tornou a cor de fundo inicialmente a mesma cor da etapa 1 (porque o aplicativo começa na etapa 1)

Aplicou uma transição de meio segundo à cor de fundo

Animação da cor de fundo

Quando o senhor navegar pelo aplicativo agora, a cor de fundo fará a transição para uma nova cor a cada etapa.

Nosso conteúdo ainda está sobreposto, mas isso demonstra muito bem outro recurso do Sequence.js. Por padrão, seu moveActiveStepToTop está ativada, o que dá à etapa ativa um nível mais alto de z-index do que as demais, para que ela sempre apareça no topo.

Queremos que o aplicativo seja responsivo para que ele se encaixe perfeitamente na página, independentemente da largura do navegador. Na parte inferior do css/demo.css, adicione o seguinte:

.feature {
  width: 70%;
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 460px) and (min-height: 520px) {
  .feature {
    width: 100%;
  }
}

Isso tornará as imagens responsivas, preenchendo seu contêiner em 70% em dispositivos com menos de 460 px de largura e 520 px de altura, e 100% em dispositivos maiores, mas nunca quebrando a proporção ou excedendo a largura original das imagens.

Observação: Essa não é uma solução perfeita. Na demonstração final, a paginação sobrepõe a imagem quando a altura do navegador é menor que 360px, por exemplo. No tema Mono no qual essa demonstração se baseia, usei várias consultas de mídia e baseei a altura das imagens na janela de visualização por meio do parâmetro vh quando apropriado. Para manter este tutorial simples, não abordaremos esse assunto aqui.

Vamos também adicionar alguns espaços em branco ao redor das imagens, atualizando o .seq-canvas > * da seguinte forma:

.seq-canvas > * {
  /* #1 */
  position: absolute;

  /* #2 */
  padding: 32px;
  box-sizing: border-box;
}

Isso adiciona um espaço de 32px ao redor da borda de cada etapa. No entanto, como em outro conjunto de regras definimos as etapas para ter 100% de largura, o navegador vê isso como 100% mais 64px (32px de cada lado), o que faz com que o conteúdo transborde a janela e não fique mais centralizado. O box-sizing informa ao navegador para incluir o preenchimento em seu cálculo de largura para contornar esse problema.

Como tornar o aplicativo responsivo

Agora, finalmente, vamos alinhar o conteúdo verticalmente. Como o senhor deve saber, a centralização vertical em CSS é um pouco dolorosa. O senhor pode usar o método que preferir, mas como gostaria que esta demonstração fosse compatível com o Internet Explorer 8+, usarei a técnica “Ghost Element”, conforme explicado em Centralização no desconhecido.

Para isso, é necessário envolver nosso conteúdo em um <div>portanto, em index.html altere o HTML de cada etapa para que elas apareçam assim:

<li class="step1 valign">
  <div class="vcenter">
    <img class="feature" src="https://davidwalsh.name/images/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />
    <h2 class="title">Bananas</h2>
  </div>
</li>
<li class="step2 valign">
  <div class="vcenter">
    <img class="feature" src="images/coconut.png" alt="A cartoon illustration of half a coconut" width="325" height="300" />
    <h2 class="title">Coconut</h2>
  </div>
</li>
<li class="step3 valign">
  <div class="vcenter">
    <img class="feature" src="images/orange.png" alt="A cartoon illustration of a round orange" width="350" height="300" />
    <h2 class="title">Orange</h2>
  </div>
</li>

Salve o arquivo e, em seguida, vá para css/demo.css, adicione o seguinte:

.valign:before {
  content: "";
  height: 100%;
}

.valign:before,
.valign > .vcenter {
  display: inline-block;
  vertical-align: middle;
}

.valign {
  font-size: 0;
}

.valign > .vcenter {
  font-size: 16px;
}

Conteúdo centralizado vertical e horizontalmente

No momento, o conteúdo ainda parece estar quebrado, mas seu aplicativo agora deve se parecer com o acima.

Animação de conteúdo

O Sequence.js é mais eficiente ao animar o conteúdo. O conteúdo pode ser animado usando transições CSS e as classes seq-in e seq-out para descrever o no e fora para o conteúdo quando uma etapa se torna ativa e inativa.

Para demonstrar isso, quando uma etapa se tornar ativa, vamos fazer com que o título de cada etapa passe de transparente para início posição, opaca em sua no e depois volta a ser transparente em sua posição fora posição.

Na parte inferior do css/demo.css adicione o seguinte:

.title {
  /* #1 */
  margin: 0;

  /* #2 */
  opacity: 0;

  /* #3 */
  transition-duration: .5s;
  transition-property: opacity;
}

Este é considerado o início para um elemento. Ele não tem uma classe CSS específica, ao contrário do seq-in e seq-out porque essa é a posição padrão.

Nós especificamos:

O título não deve ter margin (uma mudança cosmética)

O título deve ser transparente e se isso mudar,

Transição em um período de meio segundo

Agora, abaixo desse conjunto de regras, adicione:

.seq-in .title {
  /* #1 */
  opacity: 1;
}

Quando uma etapa se torna ativa, o Sequence.js atribui a ela a classe seq-in e o elemento title fará a transição de opacity: 0 para opacity: 1 em um período de meio segundo.

Animação de conteúdo em

Experimente no navegador. Cada vez que o senhor pressiona a seta para a direita no teclado, a próxima etapa se torna ativa e o título desaparece.

Quando a etapa ativa é removida e não está mais ativa, o seq-in é substituída pela classe seq-out. Poderíamos usar isso para fazer o elemento de conteúdo desaparecer, mas na verdade isso já está ocorrendo. Como o seq-in é removida quando a etapa se torna inativa, os estilos padrão da classe início são aplicadas novamente.

Use o seq-out quando o senhor quiser aplicar uma animação diferente para a transição para o fora ou manter o mesmo estilo aplicado por meio do seq-in classe.

Vamos nos aprofundar um pouco mais. Atualize o .title com o seguinte:

.title {
  /* #1 */
  margin: 0;

  /* #2 */
  opacity: 0;
  transform: translateX(50px) translateZ(0);

  /* #3 */
  transition-duration: .5s;
  transition-property: opacity, transform;
}

Atualizamos a transição para que agora o título comece 50px à direita de sua posição original e, quando isso mudar, também causará uma transição junto com a opacidade.

Observação: estamos usando o truque translateZ(0) para fazer com que o navegador use aceleração de hardware para a transição. Isso torna as animações mais suaves, especialmente em dispositivos móveis.

Agora atualize o no posição:

.seq-in .title {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}

Dê uma olhada no navegador novamente…

Animação de várias propriedades no conteúdo

Quando uma etapa se torna ativa, o título agora desaparece e flutua para a posição lateral. Quando uma etapa se torna inativa, o título retorna à sua posição original. início mas isso parece um pouco estranho, certo? É aqui que podemos usar o seq-out para fazer com que o título se mova para a esquerda, de modo que a navegação pelo nosso aplicativo pareça uma progressão natural.

Adicione o seguinte:

.seq-out .title {
  opacity: 0;
  transform: translateX(-50px) translateZ(0);
}

Animação do conteúdo

Agora, quando uma etapa fica inativa, o título é animado para a esquerda.

Vamos aplicar a mesma técnica às imagens. Adicione o seguinte ao css/demo.css:

.feature {
  transform: translateZ(0) scale(0);
  transition-duration: .5s;
  transition-property: transform, opacity;
}

.seq-in .feature {
  transform: translateZ(0) scale(1);
}

.seq-out .feature {
  transform: translateZ(0) scale(1);
  opacity: 0;
}

Salve o arquivo.

Com essas regras, conseguimos o seguinte:

Diminua a imagem para nada (para que não possa ser vista) na seção início e fazer com que as transições ocorram em meio segundo

Dimensione a imagem para o tamanho real na seção em posição

Mantenha a escala em tamanho real, mas diminua o fade-out no out posição

Animação de conteúdo completa

Agora as imagens terão um efeito de zoom quando a etapa estiver ativa e desaparecerão quando estiverem inativas.

Embora o que mostrei aqui seja muito básico, essa estrutura de animação simples fornecida pelo Sequence.js é incrivelmente avançada. O senhor pode animar várias propriedades e elementos no espaço 2D e 3D, fazer com que eles se movam, desbotem, escalem, girem e muito mais. O que o senhor pode conseguir é limitado apenas pela sua imaginação.

Dê uma olhada em alguns dos exemplos que criamos na seção Loja de temas do Sequence.js.

Esperamos que, a esta altura, o senhor esteja animado para testar algumas de suas próprias ideias. Sinta-se à vontade para experimentar, mas continue lendo para saber mais sobre Sequence.js e, em particular, sobre o conceito mais importante para garantir que seu aplicativo funcione plenamente: Watching Animated Elements.

Assistir a elementos animados

Um conceito importante a ser aprendido ao usar o Sequence.js é observando conteúdo animado.

Como as transições são especificadas via CSS, o Sequence.js não pode ter certeza de quais elementos serão animados e quando eles terminarão. Precisamos informá-lo sobre quais elementos ele deve observar.

A observação de elementos é necessária para que muitos recursos do Sequence.js funcionem, como autoPlay (reprodução automática), phaseThreshold (um atraso personalizável entre o no e fora transitions), reverseWhenNavigatingBackwards, entre outros. Por exemplo, quando o autoPlay estiver ativado, o Sequence.js navegará automaticamente para a próxima etapa assim que a etapa atual terminar de ser animada após um período de X milissegundos (por padrão, 5000ms/5 segundos, conforme definido pelo parâmetro opção autoPlayInterval). Sem elementos de observação, o Sequence.js navegará para o próximo slide a cada 5 segundos, independentemente da duração das animações. Portanto, se as animações durarem mais de 5 segundos, a próxima etapa será acessada antes mesmo que a atual tenha terminado.

Observar elementos é tão simples quanto adicionar o atributo data-seq ao(s) elemento(s) que queremos observar.

Dica: nem sempre é necessário observar os elementos. Por exemplo, talvez o senhor queira que o conteúdo entre e saia da transição em 1 segundo, mas que uma imagem de fundo faça uma transição lenta por muito mais tempo e não impeça que o Sequence.js navegue automaticamente para a próxima etapa por meio da reprodução automática. A regra geral é que, se a transição for aplicada ao conteúdo, o usuário deve observá-la. Se for apenas uma transição decorativa, não é necessário.

Agora que temos nossas transições de conteúdo em vigor, vamos observar os elementos aos quais elas são aplicadas.

Em index.html, encontre cada instância do <img class="feature" /> e <h2 class="title"> e adicione os elementos data-seq a eles da seguinte forma:

<img data-seq src="https://davidwalsh.name/images/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />

<h2 data-seq class="title">

Com esses elementos agora observados (6 no total; 2 para cada etapa), quando navegarmos para uma etapa, o Sequence.js poderá determinar por quanto tempo eles farão a transição. Se o autoPlay estiver ativado nesse cenário, por exemplo, quando a etapa se tornar ativa, o Sequence.js aguardará meio segundo para que a transição mais longa termine antes de iniciar a contagem regressiva de 5 segundos para que o autoPlay navegue automaticamente para a próxima etapa.

Mostrando o phaseThreshold entre as etapas quando os elementos são observados

Salve o que o senhor tem até agora e visualize novamente no navegador. Observe que a próxima etapa agora leva mais tempo para ser animada. Dissemos ao Sequence.js que ele deveria observar os elementos de imagem e título, de modo que está esperando que as transições da etapa atual terminem antes de iniciar a próxima. Esse limite entre os elementos em e fora é conhecida como Phase Threshold e pode ser alterada por meio do opção phaseThreshold.

Limite de fase de manuseio

O limite de fase é a duração entre a animação da etapa atual e a animação da próxima etapa. Por padrão, o phaseThreshold é definida como trueo que significa que a próxima etapa será animada somente depois que a atual tiver sido animada (desde que os elementos observados estejam configurados corretamente). Em vez disso, vamos fazer com que ambas as fases (a in e fora transições) ocorrem ao mesmo tempo.

Em scripts/demo.js, no options adicione phaseThreshold: false, dessa forma:

var options = {
  keyNavigation: true,
  animateCanvas: false,
  phaseThreshold: false
}

A etapa atual agora será animada ao mesmo tempo em que a próxima etapa será animada. Isso é igual ao que tínhamos antes de observar os elementos, pois o Sequence.js não conseguia determinar quanto tempo as transições durariam e simplesmente iniciava os dois in e fora ao mesmo tempo.

O phaseThreshold também pode receber um tempo personalizado em milissegundos, por exemplo phaseThreshold: 250 atrasará a animação da próxima etapa em 250 milissegundos.

Animação em reverso

Ao navegar em sentido inverso (pressionando a seta para a esquerda do teclado e indo da etapa 3 para a etapa 2, e assim por diante), a experiência atual não parece muito natural porque nossas transições ainda estão sendo reproduzidas para frente. O Sequence.js pode reverter automaticamente as transições por meio da função reverseWhenNavigatingBackwards opção.

No arquivo de opções scripts/demo.js, habilite reverseWhenNavigatingBackwards dessa forma:

var options = {
  keyNavigation: true,
  animateCanvas: false,
  phaseThreshold: false,
  reverseWhenNavigatingBackwards: true
}

Reversão automática de transição

Com essa opção ativada, o senhor pode ver que nossas transições agora funcionam automaticamente em sentido inverso. Os títulos deslizam da esquerda para a direita e as imagens desaparecem e, em seguida, diminuem o zoom.

Adição dos botões Next/Previous e Pagination

Durante o desenvolvimento, usamos as teclas de seta esquerda/direita do teclado para navegar entre as etapas. No entanto, o usuário pode não saber como fazer isso, então, em vez disso, vamos adicionar alguns botões de interface do usuário. Isso é muito fácil com o Sequence.js.

Em index.html, após o <ul class="seq-canvas"></ul> mas ainda dentro do contêiner, adicione o seguinte:

<fieldset class="nav" aria-label="Slider buttons" aria-controls="sequence">

  <button type="button" class="seq-prev" aria-label="Previous"><img src="https://davidwalsh.name/images/prev.svg" alt="Previous" /></button>

  <!-- Pagination goes here -->

  <button type="button" class="seq-next" aria-label="Next"><img src="images/next.svg" alt="Next" /></button>
</fieldset>

Agora adicione o seguinte ao css/demo.css para estilizar os botões:

.nav {
  /* #1 */
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 2.5em;
  max-width: 640px;
  width: 100%;

  /* #2 */
  border: none;
  margin: 0 auto;
  padding: 0;
}

.seq-next,
.seq-prev {
  /* #1 */
  padding: 0;
  background: transparent;
  border: none;

  /* #2 */
  padding: .75em;
  cursor: pointer;
  color: white;
  font-size: .75em;
  text-transform: uppercase;

  /* #3 */
  opacity: .7;
  transition-duration: .25s;
  transition-property: opacity;
}

.seq-next:hover,
.seq-prev:hover {
  opacity: 1;
}

O .nav conjunto de regras:

Posiciona o elemento que contém os botões a 40px da parte inferior

Redefine os estilos no <fieldset> elemento

O .seq-next, .seq-prev conjunto de regras:

Redefine os estilos

Adiciona alguns estilos gerais, como tamanho da fonte e cor

Configura o opacity para que faça a transição de 70% de transparência para opaco quando passar o mouse sobre ele

Salve o HTML e visualize-o no navegador. Os botões agora permitem que o senhor navegue para a etapa seguinte/anterior. Ao atribuir a um elemento dentro de um contêiner Sequence.js a classe seq-prev ou seq-nexto senhor está informando ao Sequence.js que eles devem atuar como botões anterior e/ou seguinte. A funcionalidade necessária para que eles funcionem está resolvida, portanto, o senhor não precisa se preocupar com o JavaScript.

Usando a classe seq-pagination, o senhor também pode adicionar links de paginação a um aplicativo.

Voltar em index.html, encontre a linha  e substitua-a pelo seguinte exemplo de HTML para paginação:

<ul role="navigation" aria-label="Pagination" class="seq-pagination">
  <li class="seq-current">
    <a href="#step1" rel="step1" title="Go to bananas">
      <img src="images/tn-bananas@2x.png" alt="Bananas" width="50" height="40" />
    </a>
  </li>
  <li>
    <a href="#step2" rel="step2" title="Go to coconut">
      <img src="images/tn-coconut@2x.png" alt="Coconut" width="50" height="40" />
    </a>
  </li>
  <li>
    <a href="#step3" rel="step3" title="Go to orange">
      <img src="images/tn-orange@2x.png" alt="Orange" width="50" height="40" />
    </a>
  </li>
</ul>

A paginação deve consistir em um contêiner e em links; os links são os descendentes imediatos do contêiner. O primeiro descendente imediato será vinculado à primeira etapa, e assim por diante. Assim como acontece com o contêiner, a tela e as etapas do Sequence.js, a marcação usada aqui fica inteiramente a seu critério. Desde que o senhor adicione a classe de seq-pagination a um elemento que tenha descendentes imediatos, o senhor terá paginação!

Salvar index.html e depois para css/demo.css adicione o seguinte:

.seq-next,
.seq-prev,
.seq-pagination {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
}

.seq-pagination {
  margin: 0 1em;
  padding: 0;
}

.seq-pagination li {
  /* #1 */
  position: relative;

  /* #2 */
  list-style: none;

  /* #3 */
  display: inline-block;
  vertical-align: middle;

  /* #4 */
  width: 50px;
  height: 40px;
  margin: 0 .25em;
}

.seq-pagination li:before {
  /* #1 */
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: .5em;
  border-radius: 50%;
  background: white;

  /* #2 */
  opacity: 0;
  transition-duration: .25s;
  transition-property: opacity;
}

.seq-pagination .seq-current:before {
  opacity: .7;
}

.seq-pagination img,
.seq-pagination a {
  display: block;
  border: none;
}

O .seq-next, .seq-prev, .seq-pagination faz com que os botões next/previous e a paginação fiquem lado a lado.

A paginação tem um pequeno espaço de cada lado no .seq-pagination conjunto de regras.

O .seq-pagination li consegue o seguinte:

Posicione os links de modo que um ponto que indique a etapa ativa possa ser posicionado em relação a eles

Remove o disco da unidade de disco <li> elemento

Faz com que cada link fique lado a lado

Fornece as dimensões e o espaço dos links

Em seguida, adicionamos o indicador de link atual por meio de um pseudoelemento no .seq-pagination li:before que faz o seguinte:

Posiciona o ponto abaixo da imagem, atuando como um link de paginação

Torna o ponto transparente, mas configura uma transição para que, quando um link se tornar ativo, o ponto desapareça

Depois disso, usamos o .seq-current class. Ela é adicionada pelo Sequence.js a qualquer link de paginação associado à etapa atual para que possa ser estilizado. No nosso caso, usamos o conjunto de regras .seq-pagination .seq-current:before para fazer com que o ponto pareça 70% opaco.

No conjunto de regras .seq-pagination img, .seq-pagination a, redefinimos os estilos da imagem e do link de paginação.

Por fim, como nosso conteúdo está atualmente alinhado verticalmente à tela, em relação à nova paginação, ele parece um pouco deslocado. Em vez disso, vamos centralizar verticalmente o conteúdo no espaço entre o topo da página e o topo da paginação, atualizando .seq-canvas > *:

.seq-canvas > * {
  /* #1 */
  position: absolute;

  /* #2 */
  padding: 32px;
  box-sizing: border-box;

  /* #3 */
  height: auto;
  top: 0;
  bottom: 80px;

}

O bloco final de código (3) remove a altura do 100% que definimos anteriormente nas etapas, e a substitui por top: 0 e bottom: 80px. Agora, a altura de cada etapa será a partir da parte superior da tela, mas a 80px da parte inferior, deixando espaço suficiente para a paginação. Obtemos o valor de 80px porque a paginação está posicionada a 40px da parte inferior e também tem 40px de altura.

Adição de paginação para controlar o controle deslizante

É muito fácil adicionar esses importantes elementos da interface do usuário, certo? Agora o usuário pode navegar e pular facilmente entre as etapas, sabe a todo momento em qual slide está e quantos compõem o aplicativo.

Suporte do navegador

Estamos quase terminando nosso aplicativo, mas, como sempre é importante, precisamos garantir que ele funcione entre navegadores.

Em primeiro lugar, o senhor pode notar que a paginação se encaixa em uma nova linha se reduzir a largura do navegador para menos de 300px ou que a paginação se sobrepõe ao título quando a altura do navegador é inferior a 350px. Não faremos isso neste tutorial por uma questão de brevidade, mas como o senhor verá na versão oficial do tema Mono, usei media queries para resolver esses problemas.

No entanto, mostrarei aos senhores como tornar o aplicativo utilizável quando o JavaScript estiver desativado, bem como em navegadores que não oferecem suporte a transições CSS, como o Internet Explorer 8 e 9.

Internet Explorer 8 & 9

O Internet Explorer 8 e 9, por serem navegadores mais antigos, não oferecem suporte a transições CSS. Para contornar isso, o Sequence.js vai para Modo Fallback.

No modo Fallback, todas as etapas recebem a classe seq-in para forçar o conteúdo a ficar em sua posição ativa. Em seguida, em vez de o conteúdo ser animado, a tela é animada de um lado para o outro, como em um controle deslizante tradicional.

Sequence.js no modo Fallback

Quando for necessário fornecer estilos específicos a esses navegadores mais antigos, além de usar comentários condicionaisO senhor também pode usar a classe Sequence.js seq-fallback que é aplicada ao elemento contêiner quando está no modo Fallback.

Sem JavaScript Fallback

Quando o JavaScript está desativado, o conteúdo do slide não é exibido, apenas a paginação. Isso ocorre porque o Sequence.js não pode adicionar o seq-in em nenhuma das etapas.

Uma solução parcial é adicionar manualmente seq-in na etapa que o senhor deseja que apareça quando o JavaScript estiver desativado, da seguinte forma:

<li class="step1 valign seq-in">

O conteúdo da primeira etapa agora aparece, mas a paginação ainda está visível, mas não está funcionando.

Para contornar isso, podemos usar o seq-active . Ela é aplicada progressivamente ao elemento contêiner quando o JavaScript está ativado, portanto, quando não está, podemos escrever estilos que não sejam JavaScript.

Por exemplo, os botões next/previous são inúteis sem a funcionalidade JavaScript para fazê-los funcionar. Poderíamos usar o seguinte para diferenciar entre os estados em que o JavaScript está desativado e ativado, ocultando/mostrando esses botões de acordo:

.seq-next,
.seq-prev {
  /* Hide buttons when JavaScript is disabled */
  display: none;
}

.seq-active .seq-next,
.seq-active .seq-prev {
  /* Show buttons when JavaScript is enabled */
  display: inline-block;
}

Não iremos além disso neste tutorial, mas, para o aplicativo que estamos criando, quando o JavaScript estiver desativado, poderemos tornar as etapas e o conteúdo relativos, de modo que eles fiquem um abaixo do outro e o usuário possa navegar entre cada etapa como faria em uma página da Web tradicional.

Conclusão

Este tutorial tem como objetivo fornecer aos senhores uma compreensão básica dos principais recursos e conceitos do Sequence.js. Com a ajuda do guia oficial do documentaçãoo senhor já deve estar apto a começar a criar seus próprios aplicativos animados exclusivos.

Como o senhor viu, o Sequence.js é uma solução progressiva. Seu objetivo é apenas simplificar o design de aplicativos animados, fornecendo toda a funcionalidade necessária em um fluxo de trabalho com o qual o senhor já está familiarizado. O modo de lidar com as questões de animação significativa, design responsivo, acessibilidade e experiência do usuário fica a seu critério, o que é bom!

Eu adoraria ver o que os senhores criam com o Sequence.js, portanto, fiquem à vontade para compartilhar nos comentários, via Twitter, CodePene assim por diante.

A versão completa do tema Mono Sequence.js pode ser encontrada em baixada aqui.

Créditos

Ilustrações de frutas disponibilizadas sob uma licença de domínio público por OpenClipartVectors.

Seta ícone por Yordi Uytersprot de Projeto Noun.

Request Metrics monitoramento de usuários reais

Monitoramento de usuários reais do Request Metrics

Sobre Ian Lunn

Formado em Tecnologia da Internet, Ian combina sua formação com 7 anos de experiência comercial em web design responsivo e desenvolvimento front-end para produzir experiências de usuário de qualidade para clientes satisfeitos em todo o mundo.