A ideia aqui é criar a aparência de uma apresentação de slides sem o carrossel. Em outras palavras, estamos fazendo uma série de imagens deslizando da esquerda para a direita e repetindo assim que o final das imagens for atingido. O truque é que estamos usando uma única imagem de fundo com animações CSS para (...)
A ideia aqui é criar a aparência de uma apresentação de slides sem o carrossel. Em outras palavras, estamos fazendo uma série de imagens deslizando da esquerda para a direita e repetindo assim que o final das imagens for atingido.
O truque é que estamos usando uma única imagem de fundo com animações CSS para movê-la pela tela e repetir quando terminar. Isso cria a ilusão de uma galeria de imagens quando estamos realmente usando uma única imagem.
Configurando o HTML
Aqui está um plano de como nosso HTML precisa ser estruturado:
Há dois elementos com os quais estamos trabalhando: aquele que estamos chamando .containerque se ajusta à largura exata da janela de visualização e outro que está .sliding-backgroundatrás do .containere o transborda. Basicamente, estamos usando o .containercomo uma máscara para ocultar toda a largura do .sliding-backgroundenquanto ele rola pela tela.
Isso significa que só precisamos criar dois elementos na marcação HTML:
Posicionando os Elementos
Vamos adicionar algum CSS que posicionará corretamente nossos dois elementos.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Nosso .containerusa a overflowpropriedade que irá ocultar qualquer coisa que esteja visualmente contida fora dela. Pense nisso como um corte em uma fotografia. Pode haver coisas extras fora do contêiner, mas o contêiner está nos impedindo de vê-lo.
É aí que .sliding-backgroundentra o nosso jogo. É definido com uma largura ridícula que sobrecarregaria a maioria das janelas de exibição. E esse é o truque: deve ser algo que transborde o contêiner. Nesse caso, estamos usando uma 5076pxlargura escolhida de forma um tanto arbitrária que deve ultrapassar a maioria das janelas de visualização do navegador.
Criação da imagem de fundo
Precisamos de uma imagem se estamos criando a ilusão de uma galeria de apresentação de slides, certo? Essa é a nossa próxima ordem do dia.
Lembra como mencionamos que a 5076pxlargura escolhida de forma um tanto arbitrária para o fundo deslizante? Bem, é arbitrário, mas intencional no sentido de que é bem divisível por 3, o que se encaixa no tempo para um loop de um minuto, que aparecerá um pouco mais tarde. Isso significa que a tela de nossa imagem de fundo é 5076 / 3ou 1692px. No final, nosso background irá se repetir um total de três vezes em um minuto em um loop infinito. Matemática para ganhar!
A 500pxaltura é verdadeiramente arbitrária. Pode ser o que você quiser e desde que também seja do tamanho real do arquivo de imagem de fundo.
O arquivo do Photoshop usado para criar a imagem de fundo para a demonstração no início deste capítulo está disponível para download se você estiver procurando por um ponto de partida.
Depois que a imagem for salva (e otimizada!), Isso é o que usaremos como imagem de fundo no CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Excelente! Isso nos dá a imagem gigantesca que transborda o contêiner e agora pode ser usada para rolar pela tela ad infinitum.
Animando o fundo
Tudo bem, vamos fazer essa coisa se mover. Queremos que vá da esquerda para a direita em um loop que se repete indefinidamente para criar um efeito contínuo de imagem para sempre.
Primeiro, vamos definir a animação CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Estamos usando a transformpropriedade para posicionar a imagem esquerda na borda esquerda do contêiner quando a animação começa, assim:
Quando a animação for concluída, ela terá transformado a posição negativamente (da esquerda para a direita) em um valor que corresponde à largura exata da nossa imagem. E, como .sliding-backgroundé três vezes a largura da imagem real, a imagem se repete três vezes entre 0% e 100% antes de repetir o loop.
Observação: o motivo pelo qual estamos usando um
background-positionno principal transformpara fazer o movimento, que é muito mais performante.
OK, vamos terminar chamando nossa slideanimação na .sliding-backgroundclasse:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )A animationpropriedade instrui o .sliding-backgrounda usar a slideanimação e executá-la por um minuto por vez em um loop linear infinito.
Juntando tudo
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )