Set different scroll speeds for different elements using Jquery

Posted By : Satwinder Singh | 24-Sep-2018

In this blog, we are going to learn how to set different scroll speed for different elements using jquery and CSS. We are going to create four elements which are aligned horizontally initially and these elements will be provided same height and width so that they remain aligned horizontally when the page reloads and as we scroll down the elements will be scrolled at different speeds which will alter the horizontal alignment of the elements or boxes. We will achieve this by using jquery along with some CSS properties which we will set on these elements dynamically. As we are using jquery, we must provide jquery CDN link at the top of our index.html file. First of all, we will create four separate boxes with different backgrounds having equal height and width. Now we will embed our custom data attributes i.e. data-scroll-speed = “5” and provide different values for this attribute for each element. The scroll speed of different elements will directly depend on the value provided in the data-scroll-speed attribute. The following code represents our index.html file:-

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery different scroll speeds</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style>
body {
	font-family: arial, sans-serif;
}
.content {
	height: 8000px;
}
.wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
	-ms-flex-align: center;
	height: 100vh;
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
}

.scroll-box {
	-webkit-box-flex: none;
	-moz-box-flex: none;
	box-flex: none;
	-webkit-flex: none;
	-moz-flex: none;
	-ms-flex: none;
	flex: none;
	height: 150px;
	width: 190px;
	line-height: 150px;
	text-align: center;
	font-size: 25px;
	color: #fff;
	background: #ff8330;
	margin:25px;
}
.scroll-box:nth-of-type(2) {
	background: #E01B5D;
}
.scroll-box:nth-of-type(3) {
	background: #179292;
}
.scroll-box:nth-of-type(4) {
	background: #699817;
}
</style>
</head>
<body>
	<div class="content">
		<div class="wrapper">
			<div class="scroll-box" data-scroll-speed="5">FIRST BOX</div>
			<div class="scroll-box" data-scroll-speed="3">SECOND BOX</div>
			<div class="scroll-box" data-scroll-speed="7">THIRD BOX</div>
			<div class="scroll-box" data-scroll-speed="4">FOURTH BOX</div>
		</div>
	</div>

<script src="js/index.js"></script>

</body>
</html>

We are keeping our jquery code in a separate file (index.js). Here we are using the css translate property to alter the speed of scrolling of different boxes. Below is the code for index.js file:-

 

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

 

Related Tags

About Author

Author Image
Satwinder Singh

Satwinder had been working as a free-lancer for past 1-year and recently joined Oodles Technologies as a UI-Developer. His skills are : Jquery , Html , Css , Bootstrap and Javascript.

Request for Proposal

Name is required

Comment is required

Sending message..