Este tutorial consiste en crear diferentes transiciones de imágenes a pantalla completa con CSS3.
Ver demo
Bueno para que esto quede claro pondré el esqueleto del código completo
Código :
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="es"> <![endif]--> <!--[if IE 7 ]> <html class="ie ie7 no-js" lang="es"> <![endif]--> <!--[if IE 8 ]> <html class="ie ie8 no-js" lang="es"> <![endif]--> <!--[if IE 9 ]> <html class="ie ie9 no-js" lang="es"> <![endif]--> <!--[if gt IE 9]><!--><html class="no-js" lang="es"><!--<![endif]--> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Tu titulo</title> <link rel="stylesheet" type="text/css" href="css/style1.css" /> <script type="text/javascript" src="js/modernizr.custom.86080.js"></script> </head> <body id="page"> <ul class="cb-slideshow"> <li><span>Image 01</span> <div><h3>Texto</h3></div></li> <li><span>Image 02</span><div><h3>Texto 2</h3></div></li> <li><span>Image 03</span><div><h3>Texto 4</h3></div></li> <li><span>Image 04</span><div><h3>Texto 5</h3></div></li> <li><span>Image 05</span><div><h3>Texto 6</h3></div></li> <li><span>Image 06</span><div><h3>Texto 7</h3></div></li> </ul> </div> </body> </html>
En nuestro esqueleto de nuestra página o código de la página vamos a añadir un span para cada imagen y una capa con un título:
Código :
<ul class="cb-slideshow"> <li> <span>Image 01</span> <div> <h3>Multimedios</h3> </div> </li> <li><!--...--></li> <li><!--...--></li> </ul>
Y si no quieres que parezca el título, el código quedará más o menos así:
Código :
<ul class="cb-slideshow"> <li> <span>Image 01</span> <div> </div> </li> <li><!--...--></li> <li><!--...--></li> </ul>
Los archivos que se utilizan los dejaré al final de la página
Ahora si quieres que tenga texto pero que dure más o dure menos pues nos dirigimos a nuestro CSS y buscamos el siguiente código :
Código :
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s
linear infinite 0s;
}Pero la línea que nos importa es esta :
Código :
animation: titleAnimation 36s
Donde dice titleanimation 36 lo configuramos a los segundos que queramos: si quieres que dure 2 minutos en segundos sería 120s
Hay muchas posibilidades para las transiciones de imágenes y el título, sólo hay que experimentar!
Ver demo
Descargar archivos
Las imágenes son de Multimedios y se distribuye bajo la licencia Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.0 Genérica.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por emmandeb el 20 de Febrero de 2012
Fuente original.
Por arcangel1995 el 20 de Febrero de 2012
Fuente original
wua si pues eso si es cierto , pero no soy un ladrón , el demo que doy yo es en español cosa diferente es como si fuera una innovación pero no pasa a mas grave
gracias por comentar
arcangel1995 :
Fuente original
wua si pues eso si es cierto , pero no soy un ladrón , el demo que doy yo es en español cosa diferente es como si fuera una innovación pero no pasa a mas grave
gracias por comentar
eso no se hace arcangel1995. Debes citar las fuentes de lo que utilizas en los tutoriales, y si queres presentarlo como un ejemplo explicado con traducción es valido también pero SIEMPRE debes citar las fuentes.
Por HtrMancera el 20 de Febrero de 2012
Por Luis el 20 de Febrero de 2012
Por javier el 20 de Febrero de 2012