en Web

A continuación les mostraremos como hacer un simple text fader: un efecto de transición entre textos una encimo del otro. Algo así como un slider de imagen, pero solo de texto.

Text Fader

[glg_short_button url=”http://rinconesargentinos.com/” class=”glg_short-button” size=”small” color=”river” target=”_blank” lightbox_content=”” lightbox_description=””] Ver demo en un sitio web [/glg_short_button][glg_short_button url=”http://thecrewstudio.com/wp-content/uploads/2013/07/Fading-Text.rar” class=”glg_short-button” size=”small” color=”river” target=”_blank” lightbox_content=”” lightbox_description=””] Descargar demo[/glg_short_button][glg_short_button url=”http://jsfiddle.net/6sxDF/” class=”glg_short-button” size=”small” color=”river” target=”_blank” lightbox_content=”” lightbox_description=””] Ver en jsFiddle[/glg_short_button]

 

Como hacer el text fader

 

Lo primero que tenemos que hacer es llamar en el header al jquery correspondiente (vamos a usar el mismo js que adjunto en la descarga).

<script type="text/javascript" src="js/jquery-latest.pack.js"></script>

 

Después armamos el html. En este caso arme  algo muy simple para que puedan usarlo a piacere.

    <div id="container">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
        <p style="display:none;">veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni</p>
        <p style="display:none;">dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam </p>
    </div>

 

Ahora le damos un poco de estilo a lo que hicimos…

#container {
    margin: auto;
    position: relative;
    width: 400px;
}
#container p {
    color: #474747;
    font-size: 22px;
    position: absolute;
    text-align: center;
}

 

Por ultimo llamamos a la función del JS en el header. El valor 3000 es el tiempo que tarda en hacer una transición, pueden cambiarlo por el que les parezca más adecuado a su proyecto. La funciona llama al div con id #container, si lo cambian en el código html, también cámbienlo en esta función.

<script>
$('#container p:gt(0)').hide();
setInterval(function(){
    $('#container p:first-child').fadeOut('slow')
     .next('p').fadeIn('slow')
     .end().appendTo('#container');}, 
     3000 /*Cambiar 3000 a la velocidad deseada */ );
</script>

 

Bueno eso es todo, espero que les haya servido el text fader y cualquier comentario o duda lo responderemos por aquí!