This content originally appeared on DEV Community and was authored by tbaveja
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:
<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:
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:
$(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
.
.
Thanks for reading !
Connect with me on LinkedIn:
https://www.linkedin.com/in/tarun-baveja-000a9955/
This content originally appeared on DEV Community and was authored by tbaveja
tbaveja | Sciencx (2021-06-21T18:52:59+00:00) Implement reverse scrolling effect on webpage. Retrieved from https://www.scien.cx/2021/06/21/implement-reverse-scrolling-effect-on-webpage/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.