Slideshow com CSS3

Sildeshow com CSS3


  1. /* animação css3 dos keyframes */   
  2.   
  3.   
  4.   
  5. #slider li.animacao_01 {   
  6.   
  7. animation: ciclo_01 25s linear infinite; /* para padrão */  
  8. -moz-animation: ciclo_01 25s linear infinite; /* para firefox */  
  9. -webkit-animation: ciclo_01 25s linear infinite; /* para google */  
  10. -o-animation: ciclo_01 25s linear infinite; /* para opera */  
  11. }   

HTML


  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Exemplo Slideshow com CSS3</title>  
  6. </head>  
  7.   
  8. <body>  
  9.   
  10. <!-- Slideshow -->  
  11. <div id="slider">   
  12.   <!-- Máscara-->  
  13.   <div id="mascara">  
  14.     <ul>  
  15.       <li id="primeiro" class="animacao_01"> <a href="#"> <img src="imagens/veneza_01.jpg" alt="Veneza 01"/> </a>  
  16.         <div class="legenda">  
  17.           <h1>Veneza 01</h1>  
  18.         </div>  
  19.       </li>  
  20.       <li id="segundo" class="animacao_02"> <a href="#"> <img src="imagens/veneza_02.jpg" alt="Veneza 02"/> </a>  
  21.         <div class="legenda">  
  22.           <h1>Veneza 02</h1>  
  23.         </div>  
  24.       </li>  
  25.       <li id="terceiro" class="animacao_03"> <a href="#"> <img src="imagens/veneza_03.jpg" alt="Veneza 03"/> </a>  
  26.         <div class="legenda">  
  27.           <h1>Veneza 03</h1>  
  28.         </div>  
  29.       </li>  
  30.       <li id="quarto" class="animacao_04"> <a href="#"> <img src="imagens/veneza_04.jpg" alt="Veneza 04"/> </a>  
  31.         <div class="legenda">  
  32.           <h1>Veneza 04</h1>  
  33.         </div>  
  34.       </li>  
  35.       <li id="quinto" class="animacao_05"> <a href="#"> <img src="imagens/veneza_05.jpg" alt="Veneza 05"/> </a>  
  36.         <div class="legenda">  
  37.           <h1>Veneza 05</h1>  
  38.         </div>  
  39.       </li>  
  40.     </ul>  
  41.   </div>  
  42.   <!-- / Máscara-->   
  43.     
  44.   <!-- Barra de Progressão -->  
  45.   <div class="barra_de_progressao"></div>  
  46.   <!-- / Barra de Progressão -->   
  47. </div>  
  48. <!-- / Slideshow  -->  
  49.   
  50. </body>  
  51. </html>  

Veja sua página no navegador

Artigo 33 - 01

HTML

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Exemplo Slideshow com CSS3</title>  
  6. <link rel="stylesheet" href="css/meu_slideshow.css" type="text/css"/>  
  7. </head>  
  8.   
  9. <body>  

CSS

  1. @charset "utf-8";  
  2. /* CSS Document */  
  3.   
  4. #slider {  
  5.     background: #CCC;  
  6.     border: 10px solid #EAEAEA;  
  7.     box-shadow: 1px 1px 5px rgba(0,0,0,0.7);  
  8.     height: 400px;  
  9.     width: 700px;  
  10.    margin: 40px auto 0;  
  11.    overflow: visible;  
  12.    position: relative;  
  13. }  
  14.   
  15. #mascara {  
  16.     overflow: hidden;  
  17.     height: 400px;  
  18. }  

Veja sua página no navegador

Artigo 33 - 02

CSS

  1. /* lista */  
  2.   
  3. #slider ul {  
  4.     margin: 0;  
  5.     padding: 0;  
  6.     position: relative;  
  7. }  
  8. #slider li {  
  9.     width: 700px;  /* largura da imagem */  
  10.     height: 400px; /* altura da imagem */  
  11.     position: absolute;  
  12.     top: -410px; /* posição original fora do slideshow */  
  13.     list-style: none;  
  14. }  

Veja sua página no navegador

Artigo 33 - 03

Propriedades de Animação em CSS3

Antes de começarmos fazer a animação , vamos analisar as propriedades da animação para CSS3 :


CSS

  1. /* animação css3 dos keyframes */     
  2.   
  3. #slider li.animacao_01 {  
  4.     animation: ciclo_01 25s linear infinite;  
  5. }  
  6. #slider li.animacao_02 {  
  7.     animation: ciclo_02 25s linear infinite;  
  8. }  
  9. #slider li.animacao_03 {  
  10.     animation: ciclo_03 25s linear infinite;  
  11. }  
  12. #slider li.animacao_04 {  
  13.     animation: ciclo_04 25s linear infinite;  
  14. }  
  15. #slider li.animacao_05 {  
  16.     animation: ciclo_05 25s linear infinite;  
  17. }  

CSS

  1. /* animação 01 - cliclo_01 */     
  2.           
  3.  @keyframes ciclo_01 {  
  4.  0% {top: 0px;} /* inicia o slideshow com a primeira imagem visível */  
  5.  4% {top: 0px;} /* posição original*/  
  6.  16% {top: 0px;opacity:1;z-index:0;} /*  de 4% a 16% = 3 segundos para imagem ser exibida */  
  7.  20% {top: 405px;opacity: 0;z-index: 0;} /* de 16% a 20% = 1 segundo para imagem sair */  
  8.  21% {top: -405px;opacity: 0;z-index: -1;} /* voltar a posição original */  
  9.  92% {top: -405px;opacity: 0;z-index: 0;}  
  10.  96% {top: -405px;opacity: 0;} /* de 96% a100% = 1 segundo para imagem entrar */  
  11.  100% {top: 0px;opacity: 1;}  
  12. }  

Veja sua página no navegador

Artigo 33 - 04

CSS

  1. /* animação 02 - cliclo_02 */         
  2.           
  3. @keyframes ciclo_02{  
  4.    0%  { top: -405px; opacity: 0; }   
  5.    16% { top: -405px; opacity: 0; }  
  6.    20% { top: 0px; opacity: 1; }  
  7.    24% { top: 0px; opacity: 1; }    
  8.    36% { top: 0px; opacity: 1; z-index: 0; }    
  9.    40% { top: 405px; opacity: 0; z-index: 0; }   
  10.    41% { top: -405px; opacity: 0; z-index: -1; }     
  11.    100%{ top: -405px; opacity: 0; z-index: -1; }  
  12. }  

CSS

  1. /* animação 03 - cliclo_03 */         
  2.           
  3. @keyframes ciclo_03 {  
  4.    0%  { top: -405px; opacity: 0; }  
  5.    36% { top: -405px; opacity: 0; }  
  6.    40% { top: 0px; opacity: 1; }  
  7.    44% { top: 0px; opacity: 1; }  
  8.    56% { top: 0px; opacity: 1; }  
  9.    60% { top: 405px; opacity: 0; z-index: 0; }  
  10.    61% { top: -405px; opacity: 0; z-index: -1; }  
  11.    100%{ top: -405px; opacity: 0; z-index: -1; }  
  12. }  

CSS

  1. /* animação 04 - cliclo_04 */     
  2.           
  3. @keyframes ciclo_04 {  
  4.    0%  { top: -405px; opacity: 0; }  
  5.    56% { top: -405px; opacity: 0; }  
  6.    60% { top: 0px; opacity: 1; }  
  7.    64% { top: 0px; opacity: 1; }  
  8.    76% { top: 0px; opacity: 1; z-index: 0; }  
  9.    80% { top: 405px; opacity: 0; z-index: 0; }  
  10.    81% { top: -405px; opacity: 0; z-index: -1; }  
  11.    100%{ top: -405px; opacity: 0; z-index: -1; }  
  12. }  

CSS

  1. /* animação 05- cliclo_05 */      
  2.           
  3. @keyframes ciclo_05 {  
  4.    0%  { top: -405px; opacity: 0; }  
  5.    76% { top: -405px; opacity: 0; }  
  6.    80% { top: 0px; opacity: 1; }  
  7.    84% { top: 0px; opacity: 1; }  
  8.    96% { top: 0px; opacity: 1; z-index: 0; }  
  9.    100%{ top: 405px; opacity: 0; z-index: 0; }  
  10. }  

CSS

  1. /* barra de progressão */  
  2.           
  3. .barra_de_progressao {  
  4.     position: relative;  
  5.     top: -10px;  
  6.     width: 700px;  
  7.     height: 10px;  
  8.     background: #02427d;  
  9.     animation: expandir_tudo 25s ease-out infinite;  
  10. }  
  11.    
  12. @keyframes expandir_tudo {  
  13.     0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }  
  14.     4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }  
  15.    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }  
  16.    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }  
  17.    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }     
  18. }  

Veja sua página no navegador

Artigo 33 - 05

CSS

  1. /* legenda*/  
  2.   
  3. #slider .legenda {  
  4.     background: rgba(0,191,255,0.5);  
  5.     width: 200px;  
  6.     height: 60px;  
  7.     position: relative;  
  8.     bottom: 150px;  
  9.     left: -700px;  
  10. }  
  11. #slider .legenda h1 {  
  12.     color: #FFF;  
  13.     font-size: 24px;  
  14.     font-weight: 300;  
  15.     line-height: 60px;  
  16.     padding: 0 0 0 30px;  
  17. }  
  18. #slider .legenda {  
  19.  transition: all 0.3s ease-in-out;  
  20. }  
  21. #slider li#primeiro:hover .legenda,   
  22. #slider li#segundo:hover .legenda,   
  23. #slider li#terceiro:hover .legenda,   
  24. #slider li#quarto:hover .legenda,   
  25. #slider li#quinto:hover .legenda {  
  26.     left: 0px;  
  27. }  

Veja sua página no navegador

Artigo 33 - 06

CSS

  1. /* pausar e recomeçar */  
  2.           
  3. #slider:hover li,  
  4. #slider:hover .barra_de_progressao {  
  5.    animation-play-state: paused;  
  6. }  
Artigo 33 - 07

 





Beto Marques

Beto MarquesWebdesigner e Consultor desde 1997. Desenvolveu vários Sites, Cursos, Tutoriais e Ebooks sobre Webdesign.

Como consultor já treinou várias empresas e dentre seus trabalhos , se destaca Treinamento de FrontPage e Flash para o Departamento de Computação Gráfica - TV Globo - Projac.


Voltar ao Topo