Exploring web, I found this amazing effect on this site http://www.guglieri.com/ (the scrolling effect) I want to build a script that recreates the same effect but I don't understand the logical behavior.
Basically, I started to calculate the body height setting the position property of each section to "absolute" and summing the height of the body to the height of each section.
Now, the idea is to save into an array the offset of each one and, when scrolltop is major or equals to this offset... I start to move section to top through the translateY property and I stop moving when it is equals to the height of the viewport. But now I'm stuck!!
I googled for an already existing plugin but I didn't found anything. So please help me to found a solution ;)
Concept here:
var
body = $('body')
section = $('section');
section.each(function(i,el){
$(el).css({
'z-index' : section.length - i
})
body.height(body.height()+$(el).height());
});body {
margin: 0;
}
section {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
font-family: sans-serif;
}
section.a {
background-color:indianred
}
section.b {
background-color:royalblue
}
section.c {
background-color:deepskyblue
}
section.d {
background-color:tomato;
}
section div {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
font-size: 6em;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="a">
<div>a</div>
</section>
<section class="b">
<div>b</div>
</section>
<section class="c">
<div>c</div>
</section>
<section class="d">
<div>d</div>
</section>It's parallax effect.
Here's a simple parallax script: http://pixelcog.github.io/parallax.js/
There are other more scripts on the web also tutorials on how to make your own parallax effect depending on your needs.
You can try pagePiling.js, but the difference is this one uses auto scrolling.
A similar effect can be achieved by using the fullPage.js parallax extension with the options offset:100 autoScrolling:false.