Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 21, 2021 06:52 pm GMT

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:

<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/


Original Link: https://dev.to/tbaveja/implement-reverse-scrolling-effect-on-webpage-58g0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To