crossfader.jpg

Crossfader.js es una bonita libreria JavaScript que nos permitirá de forma dinámica ir mostrando en un lapso de tiempo determinado diferentes tipos de mensajes. Por ejemplo al estilo de gif animado, solo que aquí mediante Crossfader iremos agregando todo tipo de contenido de forma individual. Usando un poco la imaginación podrás utilizarlo para mostrar todo tipo de contenido que desees, artículos destacados, o publicidad que vaya cambiando cada cierta cantidad de segundos.

Ver Demo

Instalacion
Descargamos el script Crossfader
y como es costumbre, lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="js/bsn.Crossfader.js"></script>

Nuestro css

PLAIN TEXT
CSS:
<style type="text/css">

    div.cf_wrapper
    {
        position: relative;
    }
   
    div.cf_element
    {
        width: 400px;
        height: 250px;
        background-color: #eee;
        border:  1px solid #ccc;
    }
   
    div.cf_element div.content
    {
        padding: 10px;
    }

    div.cf_element div.content h3
    {
        padding-top: 0;
        margin-top: 0;
    }

</style>

Por ultimo la estructura con la cual comenzaremos a agregar todo tipo de contenido

PLAIN TEXT
HTML:
<div class="cf_wrapper">
        <div class="cf_element" id="cf1">
          <div class="content">
                <h3>Titulo 1</h3>
              <p> aqui todo nuestro contenido correspondiente al titulo 1 </p>
            </div>
        </div>

        <div class="cf_element" id="cf2">
            <div class="content">
                <h3> Titulo 2</h3>
             <p> Aqui todo nuestro contenido correspondiente al titulo 2 </p>
            </div>
        </div>
       
    </div>

<script type="text/javascript">
    var cf = new Crossfader( new Array('cf1','cf2'), 500, 2000 );
</script>

Como vez cada elemento en el contenido posee un ID que lo identifica ej cf1 o cf2. También puedes ver que al final de la estructura mediante javascript especificamos que elementos deseamos mostrar y por supuesto dar el efecto fade.

PLAIN TEXT
JavaScript:
new Array('cf1','cf2')

Pues esto es muy simple, a medida que agregamos mas contenido en la estructura EJ:

PLAIN TEXT
HTML:
<div class="cf_element" id="cf3">
            <div class="content">
                <h3> Titulo 3</h3>
             <p> Aqui todo nuestro contenido correspondiente al titulo 3 </p>
            </div>
        </div>

Daremos otro numero al ID que lo identifica, y lo agregaremos en el array tambien

PLAIN TEXT
JavaScript:
var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

Fuente freakgroup