CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dennis Novac
Dennis Novac

Reputation: 1011

How to change the scroll speed of a div

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

Upvotes: 1

Views: 5963

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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>

Upvotes: 4

Related Questions