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 >
Nuestro 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
<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.
Pues esto es muy simple, a medida que agregamos mas contenido en la estructura EJ:
<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
Fuente freakgroup
Loading ...
Señor Nacho
05-12-2007
Permalink
¿Qué es eso de rotar contenido? Cómo funciona? Hay algún demo? Porque me cuestra creero :S
Nikko
05-12-2007
Permalink
arriba figura el enlace al demo
Javier Rey
05-12-2007
Permalink
Pah! No sabes lo que bien que me viene, te agradezco mucho.
Jose Luis
05-12-2007
Permalink
Interesante post, es justo lo que estaba buscando para un proyecto. Saludos y felicitaciones por tu blog
John Zarate
05-12-2007
Permalink
Tengo un solo problema que no se que pasa, al colocarlo en el sidebar de mi web aparece arriba de todo el contenido, probe con tablas, etc y nada... que puede ser?
Script para rotar contenido de forma atrayente - elWebmaster.com
05-12-2007
Permalink
[...] Fuente: Xyberneticos [...]
Crossfader, Rotar todo tipo de contenido con desvanecimiento | Data2max.com
05-12-2007
Permalink
[...] Ejemplo de: Xyberneticos [...]
George el ermitaño
05-12-2007
Permalink
Buen codigo pero no he podido trabajar con imagenes, he tenido inconvenientes, si me pueden ayudar me avisan