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.
Can anyone help me?
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.
Can anyone help me?
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.
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>