4
On this site, by making any scroll movement at its beginning, it scrolls to the end of the section. I would like to know how this effect is executed correctly.
http://seunovopontodevista.com.br/
Can someone help me?
2 answers
0
It’s not a simple scroll effect, there are several effects attached to the effect, you need creativity in CSS :).
Here is the page you find the application of styles.
https://github.com/jlmakes/scrollreveal
And here the page of a simple working example.
-
I don’t mean the effects of the pictures that go up. Just the scroll of the beginning.
-
imagine the same structure, but without the effects that exist there, except the scroll.
-
Okay, what is your knowledge in js? I would like an example in code or can I just give you the logic to be applied?
-
Intermediary. If you get an example, even better.
-
Beauty, when leaving the service I mount the little page. Basically you need to capture with js the initial height of the page. Also capture the height of the div you want the scroll to go to. After that compare with each other. Call the js scroll event and create the condition. If the page height is less than the height the div is at, go straight to the div to be displayed.
0
To do this process is costly because it involves taking the position of the scrolling using javascript and thus running animations with css, however there is a plugin that can help you a lot in this that is scrollmagic, in the following page you will see an example and all the documentation for using it.
Documentation: http://scrollmagic.io/docs/index.html
In order for the initial scroll in which the content scrolls, however the side menu is stopped, you can fix the menu using the css property position:Fixed The following 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>
Browser other questions tagged javascript css animation
You are not signed in. Login or sign up in order to post.
The question was closed by relying entirely on external link and not having a description of which part of the effect refers, but can be edited at any time to bring it into the format and the site scope. A few tips that can help in writing the post: [Tour], [Ask] and [Help].
– Bacco