jQuery different scroll speeds

index.html

<div class="content">
  <div class="wrapper">
    <div class="box" data-scroll-speed="2">S</div>
    <div class="box" data-scroll-speed="3">C</div>
    <div class="box" data-scroll-speed="6">R</div>
    <div class="box" data-scroll-speed="5">O</div>
    <div class="box" data-scroll-speed="9">L</div>
    <div class="box" data-scroll-speed="4">L</div>
  </div>
</div>

jquery-different-scroll-speeds.markdown

jQuery different scroll speeds

Divs scrolling at different speeds.

A Pen by Josh Parrett on CodePen.

License.

script.js

$.fn.moveIt = function(){
  var $window = $(window);
  var instances = [];
  
  $(this).each(function(){
    instances.push(new moveItItem($(this)));
  });
  
  window.onscroll = function(){
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst){
      inst.update(scrollTop);
    });
  }
}

var moveItItem = function(el){
  this.el = $(el);
  this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop){
  this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};

// Initialization
$(function(){
  $('[data-scroll-speed]').moveIt();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.sass

@import bourbon

body
  font-family: arial, sans-serif
  
.content
  height: 5000px

.wrapper
  +display(flex)
  +justify-content(center)
  +align-items(center)
  +size(100% 100vh)
  +position(fixed, 0px null null 0px)
  
.box
  +flex(none)
  +size(100px)
  line-height: 100px
  text-align: center
  font-size: 25px
  color: #fff
  background: #ff8330

  &:nth-of-type(2)
    background: #E01B5D
  &:nth-of-type(3)
    background: #30FFFF
  &:nth-of-type(4)
    background: #B3FF30
  &:nth-of-type(5)
    background: #308AFF
  &:nth-of-type(6)
    background: #1BE059