Blog técnico

Como crear una barra de progreso de lectura

Algo que se ve en muchas páginas es una barra de progreso de lectura, que nos va indicando al hacer scroll cuánto falta para acabar la lectura del artículo/página en cuestión.

Vamos a ver cómo crear una de esas barras de progreso de lectura con prognroll un plugin muy ligero que funciona con jQuery, apenas tiene impacto en el código, mejora la experiencia del usuario y además es totalmente responsive.

Para ello, lo primero que haremos será enlazar jQuery y prognroll, por ejemplo a través de CDN:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"></script>

Después añadiremos el script que lo inicializará y personalizará esa barra de progreso de lectura:

$("body").prognroll({
    //Altura de la barra de progreso
    height: 8,        
    //Color de la barra de progreso
    color: "#1C94BA",
    // Si queremos añadir una barra de progreso a una capa ponemos el valor true
    custom: false     
});

Este ejemplo sería para una barra de progreso como la que está implementada en esta web.

No obstante, aquí podéis ver un ejemplo del código implementado.

See the Pen Ejemplo de código by serjuzu (@serjuzu) on CodePen.light


Crédito de la Imagen destacada:

unsplash-logoGreg Rakozy

Smooth scrolling: desplazamiento suave entre secciones

Hay veces que queremos hacer un desplazamiento suave (smooth scrolling) entre diferentes secciones de una misma página, evitando una carga brusca sin transición.

Es un efecto que se ve muy a menudo en sitios de página única, donde hay una gran cantidad de contenido y nos desplazamos por ella desde el menú con la ayuda de anclas (anchors).

Ejemplo de smooth scroll

Solución fácil: CSS

html {
  scroll-behavior: smooth;
}

El problema es que esta regla CSS de desplazamiento suave (smooth scrolling) no la reconocen actualmente ni Microsoft Edge ni Safari.

Solución para el resto de exploradores: jQuery / Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Asegurar que this.hash tiene un valor antes de anular el comportamiento por defecto
    if (this.hash !== "") {
      // Evitar en comportamiento por defecto del click a un ancla
      event.preventDefault();

      // Almacenar hash
      var hash = this.hash;

      // Usar el método de jQuery animate() para añadir smooth page scroll
      // El nº (800) especifica el número de milisegundos que tomará el scroll al área seleccionada
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Añade (#) a la URL cuando hecho el scrolling (comportamiento por defecto del click)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Recordad que podemos descargar jQuery o linkarlo en nuestro html a través de CDN.

El propósito de este desplazamiento suave es realizar un desplazamiento animado al hacer clic de un lugar de la página a la otra. El propósito de esta animación es ayudar al usuario a mantenerse orientado en términos de a dónde se movió al hacer clic, sin perder la perspectiva del resto de la página.


Crédito de la Imagen destacada:

unsplash-logoKid Circus