Animación en jQuery para previsualizar posts
Animación en jQuery para previsualizar posts

El recurso presentado a continuación es una animación en jQuery que puede ser utilizada para múltiples finalidades, no tiene por qué usarse únicamente para previsualizar posts. También podría usarse para mostrar anuncios, para situar los botones para compartir en redes sociales, etc.

Sin embargo, es habitual ver esta animación en algunos blogs, con la finalidad que el visitante continúe en la página leyendo otros artículos. Y qué mejor forma de conseguir este objetivo que llamando la atención con un efecto muy sencillo de jQuery, haciendo que la siguiente entrada aparezca dinámicamente mientras el visitante está leyendo el artículo actual.

Para plataformas estandarizadas como Wordpress, existen plugins que realizan esta función y que incluso se pueden configurar para seleccionar qué entradas quieres que aparezcan. El plugin upPrev para Wordpress es un buen ejemplo de ello.

Sin embargo, para los programadores que no estén utilizando una de estas plataformas, y que estén desarrollando proyectos web a medida, es posible que utilizar un Plugin sea una solución un tanto excesiva, debido a la sencillez de la animación jQuery.

A continuación podéis ver el poco código necesario para crear esta animación jQuery.

Esta animación requiere de 3 partes (como en muchos plugins de jQuery):

Código HTML
Es tan sencillo como rellenar el siguiente DIV con la información que queramos mostrar (puede ser una entrada del blog, un anuncio, los botones para compartir en redes sociales...).

<div id="prevEntry">
    ¡Esto es un texto de relleno dentro del DIV!
</div>

Código CSS
Con el siguiente código CSS tendremos suficiente para hacer funcionar correctamente la animación. Fijaos que le ponemos un right negativo para inicializarlo escondido a la derecha de la pantalla.

<style>
#prevEntry 
{
    /* Div alineado abajo a la derecha */
    bottom: 0px; 
    position: fixed; 
    width: 500px;
    padding: 10px;
    right: -520px; /* Width + PaddingLeft + PaddingRight */

    /* 
    Estilos personalizados. 
    Cámbia lo que necesites para tu diseño personalizado del DIV 
    */
    background: #ffffff;
    border: 1px solid #000000;
    color: #0000;
}
</style>

Código JS
Aquí tenemos la animación jQuery, bien comentada para que no os perdáis si necesitáis modificarla.

<script>
$(window).bind('scroll', function(e) {
    //Distancia deste el TOP de la página a la que se activará el DIV. 
    //Cámbiala para adaptarla a tu página.
    var buffer = 500; 
    //Estamos a suficiante distancia para activarlo?
    var slideIn = ($(this).scrollTop() > buffer); 
    //Guardamos el objeto del DIV en una variable
    var $prevEntry = $('#prevEntry'); 

    //El .not(':animated') y .stop(true,false) son para evitar 
    //malos comportamientos cuando se haga scroll rápidamente.
    
    if (slideIn) 
    {
        //Mostramos DIV eliminando el right negativo del CSS
        $prevEntry
        .not(':animated').stop(true, false)
        .animate({
            'right': 0
        }, 300);
    } 
    else 
    {
        //Escondemos DIV añadiendo de nuevo el right negativo al CSS
        //En el CSS que hemos confirurado, el right negativo equivale a:
        //width() del elemento + paddingLeft + paddingRight
        $prevEntry
        .not(':animated').stop(true, false)
        .animate({
            'right': -$prevEntry.width() -parseInt($prevEntry.css('padding'))*2
        }, 300);
    }
});
</script>
</pre>
<p>
Con estos 3 elementos (HTML, CSS y JS), la animación funciona perfectamente. Para personalizarlo, sólo tenéis que rellenar el DIV con lo que necesitéis en vuestro caso (entrada del blog, anuncio...), y darle los estilos que consideréis oportunos. Evidentemente podéis (y debéis) separar el código en un archivo JS y un archivo CSS e incluirlos de la manera habitual dentro de la etiqueta HEAD:
</p>
<pre>
<link href="archivo.css" rel="stylesheet" type="text/css" />
<script src="archivo.js" type="text/javascript"></script>

Podéis ver una demo de la animación en esta misma entrada del blog o en cualquier otra del blog de Webnovant.

Nota: El código inicial de la animación lo encontré en Stack Overflow, mientras buscaba algún plugin similar, y decidí modificarlo ligeramente para adaptarlo a mi gusto.

comments powered by Disqus