How to change the scroll speed of a div

Question

I need to change the scroll speed of two divs (out of 5 divs). I found how to change it for the whole document: http://jsfiddle.net/36dp03ur/

But what I need is something like this:

    <div id="1"> //scrolls normally
     ...
    </div>

    <div id="2"> //scrolls slower 
     ...
    </div> 

    <div id="3"> //scrolls normally
     ...
    </div> 

and so on

Answer 1

Check this code out:

 $.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){ var pos = scrollTop / this.speed; this.el.css('transform', 'translateY(' + -pos + 'px)'); }; $(function(){ $('[data-scroll-speed]').moveIt(); }); 

 .content { height: 3000px; } .wrapper { position: fixed; } .wrapper .box { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 160%; color: #fff; position: absolute; background: #ff8330; } .wrapper .box:nth-of-type(2) { left: 100px; background: #E01B5D; } .wrapper .box:nth-of-type(3) { left: 200px; background: #30FFFF; } .wrapper .box:nth-of-type(4) { left: 300px; background: #B3FF30; } .wrapper .box:nth-of-type(5) { left: 400px; background: #308AFF; } .wrapper .box:nth-of-type(6) { left: 500px; background: #1BE059; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>