Slideshow em CSS3 e HTML [Manual]

DominioTXT - SlideShow
Slideshow em CSS3 e HTML.

Bem vindos ao Blog DomínioTXT. 

Propaganda e imagem é a alma do negocio, porem nem sempre temos conhecimento para proporcionar os melhores e mais práticos sistemas de apresentação de conteúdo disponíveis na área da computação, e nestas horas o melhor é conseguir um bom manual para nos auxiliar nesta tarefa.

Atendendo a pedidos, estou disponibilizando o código “base”, veja bem base, do nosso Slide Show que roda totalmente em CSS3 e HTML, algo que para algumas plataformas como o bloguer é muito útil, pois nos permite ser independente dos demais sites de hospedagem de Jquery, que seria a outra forma de fazermos um slideshow.


Vamos apenas esclarecer alguns pontos importantes para que isso funcione direitinho. O código “html” disponibilizado aqui refere-se apenas ao básico do Slide Show, que nada mais é que a troca de imagens de uma tela animada, logo o sistema de pausa, botões, barra de progresso e links para artigos fica por conta do usuário.

Outro ponto que devemos salientar é que o mesmo foi adaptado para as necessidades do nosso blog DominioTXT e que segue os tamanhos de imagens que optamos por utilizar, que são estes, 800x300, mas que podem ser alterados conforme as necessidades do usuário.

Atenção!
Antes de iniciar recomendamos que faça um backup do Layout e do conteúdo do seu HTML, pois neste manual iremos efetuar algumas alterações, e caso ocorra algum problema o seu blog pode acabar ficando fora do ar permanentemente.

Código HTML.

Com base no painel gerencial da ferramenta do bloguer, acesse a aba Layout, em seguida selecione o local que desejas inserir o seu slideshow e clique em “Adicionar um Gadget”, ja no menu de Gadgets, selecione a opção “HTML/JavaScrypT”.


DominioTXT - Adicionar HTML/JavaScript


No menu que abrira nomeie o seu Gadget e cole o código abaixo na caixa de conteúdo, selecionando o modo de edição para “Editar HTML”.
 


<!--Codigo HTML.--> 
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">

<ul>
 

<li id="first" class="firstanimation">
<a href="#"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlAj0fXZPNCVa_0wvXG4wz1NDsvwON2zbXUOJUadiwGxe8O2Ok3fiCWMVkwbg81Bs6Kfb79oUD3Yd1ZakjYX3i4rRQIrdIguUN61HY885aoVyS9z3mKgf-bcg47lgc660kcwqGGDQFJ3Q/s1600/SlideDominioTXT.png" /> </a>
</li>
 

 <li id="second" class="secondanimation">
<a href="#"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0Cv7eBkY6eulYNsw4AHPeNRwE6A4yfS99vb3STsD7y5cjLUk7WokbD1HDLpU27NauzVVUKvZ2r6Hv9cD8EPKcBBMqlWx1dmMeo9tfUNfLtOJ5K6Y-zOJJd1jRacMCGDD3-g9fcR3WuI/s1600/SlideDominioTXT2.png" /> </a>
</li>
 

 <li id="third" class="thirdanimation">
<a href="#”> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibdLfIprUBbZkDL54-8t-lAh3W-Oj5zOng5RDgNKxIWVwzg1jCbvpGFH_tF2DBzZ-ZbXd5GhyMAEMrJNddiVA514RpCoe0oq3Jz3vaj1KhkqvtoNDEYzuLPEI0yVZnnDnRltFEhs9KwbY/s1600/SlideDominioTXT1.png" /> </a>
</li>

 
 <li id="fourth" class="fourthanimation">
<a href="#"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlAj0fXZPNCVa_0wvXG4wz1NDsvwON2zbXUOJUadiwGxe8O2Ok3fiCWMVkwbg81Bs6Kfb79oUD3Yd1ZakjYX3i4rRQIrdIguUN61HY885aoVyS9z3mKgf-bcg47lgc660kcwqGGDQFJ3Q/s1600/SlideDominioTXT.png" /> </a>
</li>

 
 <li id="fifth" class="fifthanimation">
<a href="#">

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0Cv7eBkY6eulYNsw4AHPeNRwE6A4yfS99vb3STsD7y5cjLUk7WokbD1HDLpU27NauzVVUKvZ2r6Hv9cD8EPKcBBMqlWx1dmMeo9tfUNfLtOJ5K6Y-zOJJd1jRacMCGDD3-g9fcR3WuI/s1600/SlideDominioTXT2.png" /> </a>
</li>
  

</ul>
</div>
</div>
</div>
</div>
 

<!--Codigo HTML.-->
 

Este código será responsável por criar o conteúdo que será apresentado na nossa pagina, e portanto se limita a edição da tag <img src=”local_imagem”/>, que é onde apontamos o local da nossa imagem.
É importante saber que este modelo permite a apresentação de até 5 imagens no seu slide show, e que este numero pode ser reduzido ou aumentado conforme as suas necessidades, porem esta tarefa requer conhecimento em HTML e CSS.


Código CSS.

Agora vamos a parte mais importante do nosso SlideShow, o código CSS, pois é nele que estão localizadas as nossas configurações de tamanho, tempo, transparência e transferência de imagens.

Ainda no painel gerencial do Bloguer, acesse a aba “Modelo”, e no lado do menu personalizar clique em “Editar HTML”, o mesmo te enviara para uma tela com códigos HTML.referente as configurações do seu blog.



DominioTXT - bskin


Clique dentro do campo de edição, e utilizando o “Ctrl+F” localize o seguinte codigo, “]]></b:skin>” sem as aspas duplas, e antes das duas Chaves “]]” insira todo o nosso código abaixo.


 
/***** Slide css3 *****/
 

#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:305px;
width:830px;
}
#mask {
overflow:hidden;
height:300px;
}

#slider ul {
margin:0;
padding:0;
position:relative;
}

#slider li {
width:830px;
height:300px;
position:absolute;
top:-300px;
list-style:none;
}


 
/* Codigo tempo de imagem*/
 

#slider li.firstanimation { 
 animation: cycle 25s linear infinite;}
#slider li.secondanimation { 
 animation: cycletwo 25s linear infinite;}
#slider li.thirdanimation { 
 animation: cyclethree 25s linear infinite;}
#slider li.fourthanimation { 
animation: cyclefour 25s linear infinite;}
#slider li.fifthanimation { 
 animation: cyclefive 25s linear infinite;}

 
/* Codigo troca de imagem*/
@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; }
}
/***** Slide css3 *****/

Após efetuar este processo, clique no botão superior de cor laranja, “Salvar modelo” e aguarde, caso seja apresentado alguma mensagem em cor de fonte vermelha, algo ocorreu errado e você deve verificar se copiou o código por completo.

 
Caso tenha utilizado imagens de tamanhos diferentes, você pode customiza-las no HTML ou mesmo editar os campos do CSS, de forma a respeitar as variações de 5px para a altura da imagem e 25px para os campos das “keyframes “.

 
Para verificar como ficou o trabalho basta acessar a nossa pagina HomeWork e acompanhar a suave troca de imagens do nosso slideshow em HTML.


A todos o meu singelo agradecimento.

Gostou do Blog, então deixe o seu comentário.
Quer sugerir algum assunto? Notou algo que não confere com o assunto?
Mande sua opinião, sugestão ou reclamação. Contato DomínioTXT.



Fonte: Smashingmagazine
Copyright © 2013 DomínioTXT - Informatica