Parallax scrolling object

Question

Guys, I`m stuck with parallax scrolling. Can someone help me?

I want to create a 2 column website:

5% ( left - content area - 60% ) (right - widget - 30%) 5%

i want the widget column to scroll twice slower.

Can someone point me in the right direction ?

Answer 1

One solution would be to create a fixed or static element then to translateY using the transform properties of CSS3.

document.querySelector('.mydiv').style.transform = 'translateY(-'+pageYoffset*0.5+')'

Or you can use parallax plug-in / libs...

Answer 2

Set the widget column to fixed position.
Use Javascript to detect scroll event, set its top value accordingly.

Check out the code here..

https://code.sololearn.com/WCL7408ak0Cg/?ref=app

Answer 3

Thanks Calvin, the exact thing i need.