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
$.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();
});
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.