Alterar la velocidad de scroll de elementos del DOM

Cuando se visita una página que es más alta que la ventana del navegador, aparece la barra de desplazamiento. Pocas veces tan bien puesto un nombre: Esta barra nos permite desplazar la página a lo largo y a lo ancho según sea necesario. En el año 2000, los programadores del web estaban muy ocupados con los gif animados y los frames. Hoy por hoy, se intenta ser más original que el resto. Pero como todos tenemos las mismas armas, la batalla ya está perdida de antemano. Lo cual tiene su lado positivo, porque como dice la canción de las pastillas: empatar puede significar que ganen dos.

¿Para qué sirve desplazar elementos a distinta velocidad?

Ante todo: No sirve. Simplemente produce un efecto visual que da la idea de profundidad. Como cuando vamos en el tren y las cosas lejanas se mueven más lento que las que están más cerca.

Implementación

Este es un ejemplo muy simple que sirve solo al desplazamiento vertical. Tal vez sea el más simple de todos. Su función la cumple y es muy fácil de implementar. Basta un poco de HTML y un par de lineas de JavaScript.

Al cada contenedor que querramos modificar su veloidad de desplazamiento habrá que agregarle el atributo data-scroll-speed. El valor de data-scroll-speed se uasará para aumentar el desplazamiento del elemento utilizando translateY.

<div class="node-header-wrapper nocontent">
  <div role="complementary"  class="box" data-scroll-speed="2">
    <p>Un párrafo</p>
    <img src="images/sample.jpg">
  </div>
</div>

El código Javascript

var boxes = $('[data-scroll-speed]'),
      boxesHeight = boxes.height(),
      $w = $(window);
  
  $w.on('resize', function() {
    boxesHeight = boxes.height();
  });
  
  $w.on('scroll', function(){
    var scrollTop = $w.scrollTop();
    boxes.each(function(){
      var $this = $(this),
          scrollspeed = parseInt($this.data('scroll-speed')),
          val = - scrollTop / scrollspeed;
      
      if (boxesHeight > (400 - val)) {
        $this.css('transform', 'translateY(' + val + 'px)');
      }
    });
  });

Otra opción es utilizar top junto a position: absolute

var scrollTop = $w.scrollTop();
    boxes.each(function(){
      
      var $this = $(this),
          scrollspeed  = parseInt($this.data('scroll-speed')),
          val          = - scrollTop / scrollspeed,
          $target      = $this.find($this.data('scroll-target'));
      
          
      if ($target.height() + val > boxesHeight) {
        $target.css('top', val + 'px');
      }
    });