Imagens e web é uma das relações mais estreitas e fantásticas, pois significa o acesso de todo o Mundo a ideias, conceitos e cores e a uma partilha que muitas vezes não é percepcionada. Daí que os slideshows tenham ganho tamanha fama neste Mundo virtual que é a Internet.
Mas fazer slideshows com poucos recursos, nem sempre foi uma tarefa fácil. Até que… o HTML5 e o CSS3 uniram-se para dar resposta às necessidades da velocidade internauta.
Depois do tutorial acerca da criação de um slideshow em css, apresentamos agora um tutorial com uma nova forma de transitar entre imagens, agora automática. Assim, libertamos os botões e deixamos fluir as imagens livremente.
A solução pode depois ser aplicada a inúmeras situações, como por exemplo banners publicitários.
Atenção: nem todos os browsers suportam esta solução. Podem contar que funcione no Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ e no IE 10.
Código HTML:
<div>
<div id=”caixa-slider”>
<div id=”slider”>
<div id=”mascara”>
<ul>
<li id=”primeiro”>
<a href=”#”><img src=”imagens/img1.jpg” alt=”Lago”/></a>
</li>
</ul>
Para cada imagem que se pretenda incluir no slideshow, devemos criar um <li> com um id único para cada (neste caso usámos a posição em que vai surgir) e a ligação à imagem a carregar.
A <div id=”slider”> irá permitir que se pause a animação ao colocar o rato sobre a imagem. No final teremos a <div> que mostrará o progresso do tempo em que a imagem se mantém visível.
O código html final:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Auto Slideshow</title>
</head>
<body>
<div>
<div id=”caixa-slider”>
<div id=”slider”>
<div id=”mascara”>
<ul>
<li id=”primeiro”>
<a href=”#”><img src=”imagens/img1.jpg” alt=”Lago”/></a>
</li>
<li id=”segundo”>
<a href=”#”><img src=”imagens/img2.jpg” alt=”Neve”/></a>
</li>
<li id=”terceiro”>
<a href=”#”><img src=”imagens/img3.jpg” alt=”Lagoa”/></a>
</li>
<li id=”quarto”>
<a href=”#”><img src=”imagens/img4.jpg” alt=”Campo”/></a>
</li>
<li id=”quinto”>
<a href=”#”><img src=”imagens/img5.jpg” alt=”Árvore”/></a>
</li>
</ul>
</div>
<div>
</div>
</div>
</div>
</div>
</body>
</html>
Código CSS:
Será o código CSS que irá agora fazer toda a magia. Sem ele, as imagens surgem todas em simultâneo e sem qualquer tipo de transição.
#slider{
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
O #slider irá formatar a caixa onde estará enquadrada a imagem visível.
#mascara {
overflow: hidden;
height: 320px;
}
A #mascara permite esconder tudo o que se encontre em volta da imagem.
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px; list-style: none;
}
O #slider li irá formatar a imagem em si, de acordo com o tamanho das imagens.
Animação com keyframes:
Para que seja possível a transição das imagens, temos de incorporar um dispositivo que impulsione essa transição. Num tutorial anterior fizemo-lo com botões, neste vamos utilizar keyframes.
Antes de criar o código da animação devemos ter algumas coisas em conta:
– quantidade de slides: 5;
– tamanho da animação para cada imagem: 5 segundos;
– duração total da animação: 5 imagens x 5 segundos = 25 segundos;
– quantas keyframes necessitamos para cada segundo: 100 keyframes / 25 segundos = 4 keyframes
4keyframes = 1 segundo.
#slider li.primeira-anima {
animation: cycle 25s linear infinite;
}
#slider li.segunda-anima {
animation: cycletwo 25s linear infinite;
}
#slider li.terceira-anima {
animation: cyclethree 25s linear infinite;
}
#slider li.quarta-anima {
animation: cyclefour 25s linear infinite;
}
#slider li.quinta-anima {
animation: cyclefive 25s linear infinite;
}
Desta forma temos uma animação com um loop infinito porque cada imagem terá a sua própria animação que é ativada assim que a imagem entre no slider.
Barra de deslocação:
A barra de deslocação irá permitir visualizar a duração da presença da imagem.
. barra-progresso{
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: #000;
animation: fullexpand 25s ease-out infinite;
}
@keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
Para darmos algum controlo ao utilizador, vamos permitir a pausa e o reinicio das transições através do rato sobre a imagem. Para isso utilizamos o seguinte código:
#slider:hover li,
#slider:hover .barra-progresso
{
animation-play-state: paused;
}
Dado que o CSS3 e em particular as animações com css é uma tecnologia relativamente recente, não nos podemos esquecer de utilizar os prefixos dos browsers nestes blocos de código, como podemos ver no código final.
O código CSS final:
@charset “utf-8”;
#slider{
background: #000;
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
#mascara {
overflow: hidden;
height: 320px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
#slider li.primeira-anima {
animation: cycle 25s linear infinite;
-moz-animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
-ms-animation: cycle 25s linear infinite;
-o-animation: cycle 25s linear infinite;
}
#slider li.segunda-anima {
animation: cycletwo 25s linear infinite;
-moz-animation: cycletwo 25s linear infinite;
-webkit-animation: cycletwo 25s linear infinite;
-ms-animation: cycletwo 25s linear infinite;
-o-animation: cycletwo 25s linear infinite;
}
#slider li.terceira-anima {
animation: cyclethree 25s linear infinite;
-moz-animation: cyclethree 25s linear infinite;
-webkit-animation: cyclethree 25s linear infinite;
-ms-animation: cyclethree 25s linear infinite;
-o-animation: cyclethree 25s linear infinite;
}
#slider li.quarta-anima {
animation: cyclefour 25s linear infinite;
-moz-animation: cyclefour 25s linear infinite;
-webkit-animation: cyclefour 25s linear infinite;
-ms-animation: cyclefour 25s linear infinite;
-o-animation: cyclefour 25s linear infinite;
}
#slider li.quinta-anima {
animation: cyclefive 25s linear infinite;
-moz-animation: cyclefive 25s linear infinite;
-webkit-animation: cyclefive 25s linear infinite;
-ms-animation: cyclefive 25s linear infinite;
-o-animation: cyclefive 25s linear infinite;
}
@keyframes cycle {
0% { top: 0px; }
4% { top: 0px; }
16% { top: 0px; opacity:1; z-index:0; }
20% { top: 325px; opacity: 0; z-index: 0; }
21% { top: -325px; opacity: 0; z-index: -1; }
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; }
100%{ top: 0px; opacity: 1; }
}
@keyframes cycletwo {
0% { top: -325px; opacity: 0; }
16% { top: -325px; opacity: 0; }
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; }
36% { top: 0px; opacity: 1; z-index: 0; }
40% { top: 325px; opacity: 0; z-index: 0; }
41% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 325px; opacity: 0; z-index: 0; }
61% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 325px; opacity: 0; z-index: 0; }
81% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}
@-moz-keyframes cycle {
0% { top: 0px; }
4% { top: 0px; }
16% { top: 0px; opacity:1; z-index:0; }
20% { top: 325px; opacity: 0; z-index: 0; }
21% { top: -325px; opacity: 0; z-index: -1; }
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; }
100%{ top: 0px; opacity: 1; }
}
@-moz-keyframes cycletwo {
0% { top: -325px; opacity: 0; }
16% { top: -325px; opacity: 0; }
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; }
36% { top: 0px; opacity: 1; z-index: 0; }
40% { top: 325px; opacity: 0; z-index: 0; }
41% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 325px; opacity: 0; z-index: 0; }
61% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 325px; opacity: 0; z-index: 0; }
81% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}
@-webkit-keyframes cycle {
0% { top: 0px; }
4% { top: 0px; }
16% { top: 0px; opacity:1; z-index:0; }
20% { top: 325px; opacity: 0; z-index: 0; }
21% { top: -325px; opacity: 0; z-index: -1; }
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; }
100%{ top: 0px; opacity: 1; }
}
@-webkit-keyframes cycletwo {
0% { top: -325px; opacity: 0; }
16% { top: -325px; opacity: 0; }
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; }
36% { top: 0px; opacity: 1; z-index: 0; }
40% { top: 325px; opacity: 0; z-index: 0; }
41% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 325px; opacity: 0; z-index: 0; }
61% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 325px; opacity: 0; z-index: 0; }
81% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}
@-ms-keyframes cycle {
0% { top: 0px; }
4% { top: 0px; }
16% { top: 0px; opacity:1; z-index:0; }
20% { top: 325px; opacity: 0; z-index: 0; }
21% { top: -325px; opacity: 0; z-index: -1; }
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; }
100%{ top: 0px; opacity: 1; }
}
@-ms-keyframes cycletwo {
0% { top: -325px; opacity: 0; }
16% { top: -325px; opacity: 0; }
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; }
36% { top: 0px; opacity: 1; z-index: 0; }
40% { top: 325px; opacity: 0; z-index: 0; }
41% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-ms-keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 325px; opacity: 0; z-index: 0; }
61% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-ms-keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 325px; opacity: 0; z-index: 0; }
81% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-ms-keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}
@-o-keyframes cycle {
0% { top: 0px; }
4% { top: 0px; }
16% { top: 0px; opacity:1; z-index:0; }
20% { top: 325px; opacity: 0; z-index: 0; }
21% { top: -325px; opacity: 0; z-index: -1; }
92% { top: -325px; opacity: 0; z-index: 0; }
96% { top: -325px; opacity: 0; }
100%{ top: 0px; opacity: 1; }
}
@-o-keyframes cycletwo {
0% { top: -325px; opacity: 0; }
16% { top: -325px; opacity: 0; }
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; }
36% { top: 0px; opacity: 1; z-index: 0; }
40% { top: 325px; opacity: 0; z-index: 0; }
41% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-o-keyframes cyclethree {
0% { top: -325px; opacity: 0; }
36% { top: -325px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 325px; opacity: 0; z-index: 0; }
61% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-o-keyframes cyclefour {
0% { top: -325px; opacity: 0; }
56% { top: -325px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 325px; opacity: 0; z-index: 0; }
81% { top: -325px; opacity: 0; z-index: -1; }
100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-o-keyframes cyclefive {
0% { top: -325px; opacity: 0; }
76% { top: -325px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 325px; opacity: 0; z-index: 0; }
}
.barra-progresso {
position: relative;
top: -5px;
width: 680px;
height: 5px;
background: #000;
animation: fullexpand 25s ease-out infinite;
}
@keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-ms-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
@-o-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#slider:hover li,
#slider:hover .barra-progresso
{
animation-play-state: paused;
}
O resultado no Browser pode ser visualizado no link abaixo.
Boa noite… gostei bastante do tutorial mas o link para download dos ficheiros não funciona.
Olá Ítalo,
Agradecemos a sua atenção em nos avisar e pedimos desculpa pelo incómodo. Agora já pode descarregar os ficheiros.
Obrigado!
2Bdesign
queria criar um passagem de slides semelhante a esse para um site mas queria que ele deslocasse para o lado e nao pra baixo e queria que ele tivesse aqueles pontos brancos que ficam em baixo na imagem que mostra a sua transição por favor me ajudem
Olá Bruno,
Veja se este tutorial tem o que precisa:
http://www.blog.2bdesign.net/css-slideshow-com-controlos/
Agradeço o tutorial mais o download não funciona….
Olá Nilton,
Vá a http://s000.tinyupload.com/?file_id=90498470018607585037 e depois clique em To download file click the link below:
autoslideshow.rar
Abraço
2Bdesign
download nao esta funcionando de novo
Link atualizado.
Obrigado!
2Bdesign