Bom dia amigos
Cansado de JS, mude para CSS!
Desafio
Faça uma apresentação de slides animada usando CSS. As apresentações de slides podem ser usadas, por exemplo, em ocasiões especiais para exibir fotos na tela através do projetor. Através do loop, as fotos exibidas podem servir como pano de fundo para um discurso solene.
Possível solução
Para a apresentação de slides, tiraremos a estranha "foto macro"
Paweł Czerwiński (elas são legais).
Então vamos lá.
Nossa marcação ficará assim:
<div class="slideshow"> <img src="https://thebestcode.ru/media/animatedSlideshow/1.jpg" alt="#" class="i_1"> <p class="p_1">a-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/2.jpg" alt="#" class="i_2"> <p class="p_2">b-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/3.jpg" alt="#" class="i_3"> <p class="p_3">c-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/4.jpg" alt="#" class="i_4"> <p class="p_4">d-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/5.jpg" alt="#" class="i_5"> <p class="p_5">e-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/6.jpg" alt="#" class="i_6"> <p class="p_6">f-slide</p> </div>
O que estamos observando aqui?
As fotos são agrupadas em uma classe de apresentação de slides, usada para alinhar elementos horizontal e verticalmente.
.slideshow possui os seguintes estilos:
.slideshow { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
Temos 6 fotos. Cada foto recebe a classe "i_number of photos". Sob cada foto, há uma assinatura com a classe "p_number of photo".
Img tem os seguintes estilos:
img { position: absolute; max-width: 90vw; max-height: 80vh; opacity: 0; animation: slideshow 36s ease-in-out infinite; }
O tempo de animação depende do número de fotos e do tempo de exibição de cada foto. Nesse caso: 6 fotos por 6 segundos cada.
Vamos para a animação:
@keyframes slideshow { from { opacity: 0; filter: grayscale(100%); } 5% { opacity: 1; filter: grayscale(50%); } 10% { opacity: 1; filter: grayscale(0); transform: scale(1.1); } 15% { opacity: 1; filter: blur(0); } 20% { opacity: 0; filter: blur(2px); transform: scale(0.9); } 25% { opacity: 0; } }
Usamos apenas 25% da animação, mas em seis etapas. 25% é a quarta parte, portanto as fotos se sobrepõem um pouco. Como estamos implementando o efeito "fade in-fade out", ou seja, Trabalhamos com transparência, é exatamente disso que precisamos.
Usando “filter: grayscale”, saturamos a cor da foto exibida (branqueada), usando “transform: scale”, dimensionamos a foto um pouco para frente ao produzir e um pouco para trás ao substituir, usando “filter: blur” para desfocar a foto substituída.
Em seguida, trabalhamos com fotos individuais:
.slideshow .i_1 { animation-delay: 6s; transform: translateX(-100px) rotate(-3deg); } .slideshow .i_2 { animation-delay: 12s; transform: translateX(100px) rotate(3deg); } .slideshow .i_3 { animation-delay: 18s; transform: translateY(-100px) rotate(3deg); } .slideshow .i_4 { animation-delay: 24s; transform: translateY(100px) rotate(-3deg); } .slideshow .i_5 { animation-delay: 30s; transform: rotate(-6deg); } .slideshow .i_6 { animation-delay: 36s; transform: rotate(6deg); }
Definimos o atraso da animação para cada foto (6 segundos do primeiro e +6 segundos de cada subsequente). Para variar, mudamos e giramos cada foto usando "transform: translate rotate" (os valores foram selecionados empiricamente).
Terminamos a foto. Agora vamos às assinaturas.
P tem os seguintes estilos:
p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #e4e4e4; text-shadow: 0 0 1px #000; text-transform: uppercase; font-size: 2.8em; opacity: 0; animation: title 36s linear infinite; }
O tempo de animação das legendas corresponde ao tempo da animação da foto.
A animação de assinatura parece muito mais fácil:
@keyframes title { from { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } }
Também exibimos uma assinatura separada usando o atraso da animação:
.slideshow .p_1 { animation-delay: 7s; } .slideshow .p_2 { animation-delay: 13s; } .slideshow .p_3 { animation-delay: 19s; } .slideshow .p_4 { animation-delay: 25s; } .slideshow .p_5 { animation-delay: 31s; } .slideshow .p_6 { animation-delay: 37s; }
Observe que o atraso das legendas na animação é de 1 segundo a mais que os valores correspondentes das fotos. Isso é feito para exibir legendas após o aparecimento e a transformação de uma foto específica.
Isso é tudo. Na minha opinião, ficou simples, mas interessante.
O resultado pode ser visto
aqui .
Obrigado pela atenção. Tudo de bom.