Search code examples
javascriptjqueryhtmlcssmousewheel

how to use mouse scroll event on overflow hidden div

I am new to Javascript.

I am trying to build a website like this www.hpmagicwords.com.br. On this website they used all sections with position:absolute;.

On the third section of this website they used transform translate effect on mouse wheel scroll. I am trying to make the same effect on my page.

Give me some suggestions with it. How to do it? Which framework can help me to do it?

Here is my Fiddle

Solution

  • Maybe check out http://scrollmagic.io/ you can find some fine examples.

    You can always try to make a div with full window height and window width with overflow: hidden;. Then the child elements with a position: absolute; and set their top: 100%; or transform: translateY(100%); so they are not visible. And then change their value on scroll minus 1 or something to get them animating up.

    But scrollmagic could get you going if you're new.