<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>
@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
  will-change: transform

  &: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
View Compiled
$.fn.moveIt = function(){
  var $window = $(window);
  var instances = [];
  
  $(this).each(function(){
    instances.push(new moveItItem($(this)));
  });
  
  window.addEventListener('scroll', function(){
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst){
      inst.update(scrollTop);
    });
  }, {passive: true});
}

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();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js