How can i do these 2 effects?

[harry_ord]

Hello

 

I want to do something like this Wordpress theme:

http://themenectar.com/demo/salient-frostwave/

In the second section, just after the big header, we have a white background and some blue icons, right? This section has 2 effects in need to learn how to do them:

1- When you scroll-down to the second section with your browser, it looks like the second section "eats" the first. It not only scrolls down, it looks like the second section gets above the first.

 

2- The first time your browser loads the second section, every icon appear slowly on the screen.

How can i do those 2 pretty stuff?

[harry_ord]

I did this:

<script>

$(window).scroll(function() {

var height = $(window).scrollTop();

if (height > 150) {

$(".content-dos").animate({top : "0%"});

}

if (height < 90) {

$(".content-dos").animate({top : "70%"});

}

});

</script>

What i'm doing is, based on the window scroll position, i make the second section "go up". It has a position relative with a 70% top intially, so i give it a position top:0 when the scroll is more than 150px down.

I'm having a little problem now, and is that whenever i move the scroll up again, it takes some time for the second section to go back to its initial position, like a few seconds. How can i make it go faster?

This is where i'm doing it:

http://feriapixel.cl/anchour/

Edited October 30, 2016 by harry_ord