DEV Community 👩‍💻👨‍💻

Cover image for Implement reverse scrolling effect on webpage
tbaveja
tbaveja

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (7)

Collapse
minikothari profile image
mini kothari

This will really help to understand the concepts. Thanks Tarun.

Collapse
tbaveja profile image
tbaveja Author

Thanks Mini. 😊

Collapse
santoshkori profile image
Santosh Kori

Good One. Interesting.
Keep posting...

Collapse
tbaveja profile image
tbaveja Author

Thanks :)
Yes, will try to share more :)

Collapse
anmolchopra69 profile image
Anmol Chopra

Ideas_to_implement, I was wondering to have my own website running. Really Nice and unique.

Great Idea !!
Thanks for sharing Tarun.

Collapse
mdomedia profile image
MdO Media

Does anyone have any insight as to how one can make this design style accessibility friendly per the WCAG? TA!

Collapse
gagandeepsidhu profile image
Info Comment hidden by post author - thread only accessible via permalink
Gagandeep Singh

Reverse scrolling can be applied when user no longer wanted some content to gear up.

Some comments have been hidden by the post's author - find out more

🗣 Want to join the conversation?

 
It's easy! Become a DEV member to follow this post, comment, and more.