45
loading...
Implement reverse scrolling effect on webpage
Hey guys, when you create a website, the browser loads it at the top of your design, and viewers scroll down. But what if your design is more interesting the other way around? What if you'd like a page to start at the bottom and scroll up? In this blog you'll learn how to implement reverse scrolling on your website in just 3 steps...
1. Start with just 7 lines of HTML:
Create panels/ sections inside one main container. I created 5 but you can create as per requirement.
<div class="panelCon">
<div id="pane-5" class="panel">Section 5</div>
<div id="pane-4" class="panel">Section 4</div>
<div id="pane-3" class="panel">Section 3</div>
<div id="pane-2" class="panel">Section 2</div>
<div id="pane-1" class="panel">Section 1</div>
</div>2. Few lines of CSS:
- Set the height of each panel to viewport height.
- Set the position as fixed of main container and bottom as 0. Set the body height as (100*Number of panels)vh.
- Below you can see height of body is set as 500vh as I have created 5 panels.
body {
margin: 0;
padding: 0;
height: 500vh;
}
.panelCon {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 99990;
}
.panel {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
line-height: 35px;
text-transform: uppercase;
}
#pane-1 {
background-color: pink;
}
#pane-2 {
background-color: #e8e8e8;
}
#pane-3 {
background-color: red;
}
#pane-4 {
background-color: pink;
}
#pane-5 {
background-color: yellow;
}3. Finally, just 3 lines of JS:
Inside onScroll function of window, increase the bottom value but in negative 😉
$(window).on("scroll", function () {
$(".panelCon").css("bottom", $(window).scrollTop() * -1);
});and you're done.
.
Don't want to follow the steps? Below is Github link for you :)
Demo: https://tbaveja.github.io/reverse-scrolling/
Code: https://github.com/tbaveja/reverse-scrolling
Demo: https://tbaveja.github.io/reverse-scrolling/
Code: https://github.com/tbaveja/reverse-scrolling
.
Thanks for reading !
Connect with me on LinkedIn:
https://www.linkedin.com/in/tarun-baveja-000a9955/
45