jQuery different scroll speeds on scroll, set different scroll speed to element.
data-scroll-speed
https://codepen.io/vipulrai/pen/vvoREM
HTML:
1 2 3 4 5 6 7 8 9 10 | <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="" data-scroll-speed="6">R</div> <div class="box" data-scroll-speed="5">O</div> <div class="box" data-scroll-speed="90">L</div> <div class="box" data-scroll-speed="4">L</div> </div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | @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 |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $.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(); }); |