Comunidad de diseño web y desarrollo en internet online

Transiciones de imágenes a pantalla completa con CSS3

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



¿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.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate