Background Slideshow


full screen

 

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


Publicado por: 2bdesign


1



  1. Ariane diz:

    Site perfeito pela idéia ^^ parabens pra quem criou!


Faça um comentário