Como hacer un Slideshow en HTML5

Hoy en dia la utilización de imágenes en movimiento (slideshow) es algo comun en los sitios web de hoy en día por eso les dejo un pequeño tutorial de como hacer un slideshow en HTML5.

Captura de pantalla 2013-08-09 a las 13.54.32

Descargar archivos completo AQUI.

1.- Creamos un html5:

<!doctype html>
<html lang=”en”>
<head>

   <meta charset=”utf-8″>
       <title>Slideshow</title>

</head>
<body>

</body>

</html>

2.- Dentro de las etiquetas <head> </head> agregamos nuestros estilos CSS y tipografias según el diseño que ustedes tengan. 

<head>

   <meta charset=”utf-8″>
       <title>Slideshow</title>

<link rel=”stylesheet” href=”css/style.css?v=1.0″>
     <link href=’http://fonts.googleapis.com/css?family=Oswald&#8217; rel=’stylesheet’ type=’text/css’>
     <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
</head>

 

3.- Dentro de las etiquetas <body></body> agregamos nuestro contenido e imagenes que vamos a utilizar.

<body>

<div class=”container”><!–container–>

<div id=”content-slider”><!–content-slider–>
<div id=”slider”> <!– Slider container –>
<div id=”mask”> <!– Mask –>

<ul>

<li id=”first” class=”firstanimation”>
<a href=”#”> <img src=”img/slide1.jpg” alt=”Show”/> </a>
<div class=”tooltip”> <h1>Imagen 1</h1> </div>
</li>

<li id=”second” class=”secondanimation”>
<a href=”#”> <img src=”img/slide2.jpg” alt=”Show”/> </a>
<div class=”tooltip”> <h1>Imagen 2</h1> </div>
</li>

<li id=”third” class=”thirdanimation”>
<a href=”#”> <img src=”img/slide3.jpg” alt=”Show”/> </a>
<div class=”tooltip”> <h1>Imagen 3</h1> </div>
</li>

<li id=”fourth” class=”fourthanimation”>
<a href=”#”> <img src=”img/slide4.jpg” alt=”Show”/> </a>
<div class=”tooltip”> <h1>Imagen 4</h1> </div>
</li>

<li id=”fifth” class=”fifthanimation”>
<a href=”#”> <img src=”img/slide5.jpg” alt=”Show”/> </a>
<div class=”tooltip”> <h1>Imagen 5</h1> </div>
</li>

                        </ul>

</div> <!– End Mask –>
<div class=”progress-bar”></div> <!– Progress Bar –>
</div> <!– End Slider Container –>
</div><!–End content-slider–>
</div><!–End container–>
</body>

4.- Luego creamos los estilos CSS

*El primero con nombre animation.css

/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { bottom: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% { bottom: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% { bottom: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% { bottom: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%{ bottom: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; }
50% { 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; z-index:0; }
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; }
}

/* ANIMATION BAR */
@-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.6; }
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; }
}

*El segundo con nombre reset.css

/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

*El tercero con nombre style.css

@import url(“reset.css”) screen;
@import url(“animation.css”) screen;
/* Common */
html, body {
background:#fff;
font-size:12px;
font-family:”Oswald”, serif;
min-width:960px;
margin:0;
padding:0;
color:#000;
}

.content h1 {
font-size:48px;
color:#000;
text-shadow:0px 1px 1px #f4f4f4;
text-align:center;
padding:60px 0 30px;
}

/* LAYOUT */
.container {
margin:0 auto;
overflow:hidden;
width:960px;
}

/* CONTENT SLIDER */
#content-slider {
width:100%;
height:360px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:2px solid #000;
/*box-shadow:1px 1px 5px rgba(0,0,0,0.7);*/
height:320px;
width:680px;
margin:40px auto 0;
overflow:visible;
position:relative;
}
#mask {
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.firstanimation {
-moz-animation:cycle 25s ease-in-out infinite;
-webkit-animation:cycle 25s ease-in-out infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s ease-in-out infinite;
-webkit-animation:cycletwo 25s ease-in-out infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s ease-in-out infinite;
-webkit-animation:cyclethree 25s ease-in-out infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s ease-in-out infinite;
-webkit-animation:cyclefour 25s ease-in-out infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s ease-in-out infinite;
-webkit-animation:cyclefive 25s ease-in-out infinite;
}

#slider .tooltip {
background: #000;
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
/*left:400px; remove for right aligned */
left: 0px;
}

/* remove the ‘stop animation on hover’
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}*/

/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-10px;
width:680px;
height:10px;
background:#FF0A64;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}

__________________________________________________________________________________________________________________

Descargar archivos completo AQUI.

About these ads
Publicado en Tutoriales, Web

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 382 seguidores

A %d blogueros les gusta esto: