Mais um slideshow!! Não páram as ideias sobre imagens a transitar. Desta vez vamos apresentar imagens a transitar no fundo da página. O desafio foi lançado por um leitor e aqui está ele a ser partilhado por todos, porque é por isso que gostamos tanto do World Wide Web, esta comunidade imensa de partilha de ideias.
Mais uma vez apostamos em linguagens simples, como é o caso do HTML e do CSS, mas que conseguem cada vez mais deslumbrar em poucas linhas de código.
Como as imagens vão transitar por baixo do restante conteúdo (texto), convém ter imagens simples e que façam contraste com o texto, que também não deverá ser muito porque as animações desviam a atenção do visitante.
As imagens a utilizar deverão ter um tamanho de 1024×681 mínimo, pois vão ocupar todo o écrã.
Abaixo apresentamos o código para carregar as imagens que irão ser apresentadas no slideshow, previamente guardadas numa pasta com o nome “imagens”, mas que irão ser carregadas a partir do código CSS. No HTML criámos espaço para carregar 6 imagens.
Código HTML:
<ul>
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
Além do slideshow inserimos também uma linha de texto num cabeçanho para verem o seu funcionamento em conjunto com o texto:
<div>
<header>
<h1>CSS3 <span>Background Slideshow</span></h1>
</header>
</div>
O código HTML final:
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″ />
<title>Slideshow full screen</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<script type=”text/javascript” src=”js/modernizr.custom.86080.js”></script>
</head>
<body>
<ul>
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
<div>
<header>
<h1>CSS3 <span>Fullscreen Slideshow</span></h1>
</header>
</div>
</body>
</html>
Como devem ter verificado, incluímos um ficheiro de javascript ( <script type=”text/javascript” src=”js/modernizr.custom.86080.js”></script>) que permitirá a compatibilidade do HTML5 e CSS3 em alguns browsers.
Código CSS:
Podemos separar o código CSS em 3 partes. A primeira parte diz respeito à formatação dos elementos gerais, como o conteúdo de texto:
body{
margin:0;
padding:0;
background: #000;
overflow-y: scroll;
overflow-x: hidden;
}
.ie7 body{
overflow:hidden;
}
ul li{
list-style:none;
}
.container{
position: relative;
text-align: center;
}
.container header{
padding: 30px 30px 10px 20px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-align: left;
}
.container header h1{
font-size: 35px;
position: relative;
font-weight: 400;
color: #000;
}
A segunda parte, a formatação do slideshow em si, incluindo as animações para cada imagem:
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: ”;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../imagens/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../imagens/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../imagens/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../imagens/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../imagens/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../imagens/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
Por fim, as transições (ease in e ease out) que serão realizadas com animações de keyframes para cada browser:
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
Podem visualizar o resultado final no link abaixo e fazer download dos ficheiros necessários.
Ver resultado final Obter ficheiros
Site perfeito pela idéia ^^ parabens pra quem criou!