How to get this scrolling effect - when scrolling the page? [closed]

4

On this site, when you make any scrolling movement at the beginning, it scrolls to the end of the section. I would like to know how this effect is executed correctly.

link

Can anyone help me?

    
asked by anonymous 08.05.2017 / 16:26

2 answers

0

It's not a simple scrolling effect, it's several effects bound to the effect, you need creativity in CSS:).

Here is the page that you find the styles application.

link

And here's the page for a simple working example.

link

    
08.05.2017 / 16:34
0

This process is expensive because it involves taking the position of the scroll using javascript and thus execute css animations, but there is a plugin that can help you a lot in what is scrollmagic, in the following page you will see an example and the whole documentation for its use.

link

Documentation: link

In order for the initial scroll in which the content scrolls, but the side menu is stopped, you can set the menu using the property position: fixed of the css Here is an example: CSS:

* { box-sizing: border-box;}
body { margin: 0;}
.menu { width: 20vw; left: 0; top: 0; height: 100vh; background: #EEE;position: fixed; z-index: 2}  
.bg { background:url('http://likefotos.com/wp-content/uploads/2015/01/paisagem-tailandia1.jpg'); width: 100vw; height: 100vh; background-size: 100% auto; left: 0; top: 0; position: fixed; z-index: 1;}
.content { position: absolute; left: 0; top: 100%; width: 100vw; height: 100%; background: #FFF; z-index: 3;}

HTML:

<div class="menu"></div>
<div class="bg"></div>
<div class="content">Lorem ipsum</div>
    
09.05.2017 / 21:56