Cuadro deslizable al final de una página con jQuery

Muchas veces cuando leemos algún artículo de una página web, al desplazarnos por el contenido, nos aparece una caja o cuadro de texto que nos ofrece cierta información a destacar por el autor de la web en cuestión.

Ejemplo de cuadro deslizable con jQuery

Implementarlo es bastante sencillo, lo conseguiremos a través de la librería jQuery y añadiendo un poco de CSS y HTML.

A continuación podéis probar cómo funciona en la página de CodePen, si bajáis casi hasta el final del contenido, veréis como se desplaza en la parte de la derecha abajo un cuadro informativo. Lo podéis personalizar como queráis para que os quede mucho mejor.

Ver ejemplo en CdePen

Código para implementarlo

Para empezar descargamos los archivos, el enlace de descarga se encuentra más abajo. Dentro del archivo descargado encontramos cuatro carpetas. Lo primero, abrimos la carpeta img y copiamos el archivo de imagen close-post-jquery.gif y lo pegamos en la carpeta de imágenes de nuestro sitio web, luego comprobar la ruta hacia esta imagen en el CSS que sea la correcta.

Vamos a explicar el proceso siguiendo las siguientes tres fases:

MARCADO HTML

Primero necesitamos que uno de los párrafos del contenido, donde queremos que empiece a mostrarse el cuadro deslizable, lleve un id=»last», como muestro a continuación.

<p id="last">Algún párrafo de texto</p>

Luego del párrafo, tenemos que poner el siguiente código HTML, que engloba toda la información del cuadro deslizable.

<div id="slidebox">
<a class="close"></a>
<p>Esto es un ejemplo para el artículo:</p>
<h2>Cuadro deslizable al final de una página con jQuery</h2>
<a class="more" href="https://iborra.es/blog/cuadro-deslizable-jquery/" target="_blank">Leer Más »</a>
</div>

El elemento con clase close le dará al usuario la opción de cerrar el cuadro para que no vuelva a aparecer. En el archivo que está dentro de la carpeta demo tenéis un ejemplo del código.

CSS

Abrimos el archivo style-cuadrodeslizable.css que está dentro de la carpeta css y veremos los estilos del cuadro deslizable. Copiamos todo el código y lo pegamos en nuestro archivo de estilos de nuestro sitio web.

Damos al cuadro una posición fija para que siga al usuario mientras éste se desplaza. El valor inicial de la derecha, hará que el cuadro se oculte, nosotros vamos a hacerlo deslizar hacia fuera con algo de jQuery. Poner la anchura y altura a vuestro gusto.

#slidebox{
    width: 200px;
    height: 245px;
    padding: 30px 20px 0 20px;
    background-color: #fff;
    border-top: 3px solid #c39f76;   
    position: fixed;
    bottom: 0px;
    right: -430px;
    -moz-box-shadow: 0 2px 50px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 50px 0 rgba(0,0,0,.2);
    box-shadow: 0 2px 50px 0 rgba(0,0,0,.2);
}

Los elementos del texto y del enlace Leer Más tendrán el siguiente estilo. Cambiarlos para que queden bien en vuestra web.

#slidebox p, a.more{
    font-size: 12px;
    text-transform: uppercase;
    font-family: 'Lato';
    letter-spacing: 1px;
    color: #28262b;
}
a.more{
    cursor: pointer;
    color: #28262b;
    text-decoration: none;
}
a.more:hover{
    color: #c39f76;
}
#slidebox h2{
    color: #c39f76;
    font-size: 20px;
    margin: 30px 0;
    font-family: 'Lato';
}

Y por último, el estilo para la cruz de cierre del cuadro. Comprobar que la ruta del gif sea la correcta. Si no os gusta esa cruz podéis poner otra.

a.close{
    background: transparent url('https://iborra.es/web/wp-content/uploads/2020/01/close-post-jquery.gif') no-repeat top left;
    width: 13px;
    height: 13px;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
}
a.close:hover{
    background-position: 0px -13px;
}

JAVASCRIPT

En primer lugar, incluimos la librería jQuery que está en la carpeta js del archivo descargado y lo enlazáis de forma correcta desde el archivo functions.php o desde donde creáis oportuno según como estéis construyendo el sitio web. Seguramente ya tenéis alguna versión de jQuery, en caso de ser así, este paso os lo saltáis. También desde el siguiente enlace podéis descargaros la última versión de jQuery.

A continuación, añadimos el código de las dos siguientes funciones. Una de ellas es para determinar si hemos alcanzado el elemento de disparo mientras desplazamos y si es así hacer que el cuadro se deslice fuera. La otra función hace que el cuadro desaparezca al hacer clic en la pequeña cruz de cierre. Añadir este código en el archivo de scripts creado que tengáis o donde creáis oportuno antes del cierre de la etiqueta </body>.

$(function() {
	$(window).scroll(function(){
		var distanceTop = $('#last').offset().top - $(window).height();

		if  ($(window).scrollTop() > distanceTop)
			$('#slidebox').animate({'right':'0px'},300);
		else
			$('#slidebox').stop(true).animate({'right':'-430px'},100);
	});

	$('#slidebox .close').bind('click',function(){
		$(this).parent().remove();
	});
});

Para los que utilizáis WordPress cambiar el simbolo $ por jQuery. Y también según donde lo pongáis quizás tenéis que meterlo entre la etiqueta <script>…</script>.

Para cualquier duda podéis contactarme a través de los comentarios.

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design