search

darsain / sly

JavaScript library for one-directional scrolling with item based navigation support.
http://darsa.in/sly
2.87k stars 497 forks source link

Newbie help: variation of parallax example #204

Closed jan1980 closed 9 years ago

jan1980 commented 9 years ago

Many thanks for this smooth script.

I'd like to position with position:absolute several elements in a page, and make the parallax effect to affect them.

How could I get it? In the example the <li>s are generated with javascript, but what I'd need is to affect already-present html elements (images)...

Please help!

http://darsa.in/sly/examples/parallax.html

darsain commented 9 years ago

All parallax mode does is allows you to get notifications about Sly's position. This is helpful if you want Sly's optimized scrolling, and dragging navigation, but want to render the content yourself.

So what you'd do is add event listener to move event, which is requestAnimationFrame throttled, and inside it render your stuff based on sly.pos position object.

So how could you make Sly's parallax mode affect already existing elements on a page? Query their DOM elements, and change some styles of those DOM elements inside move event handler based on the current position.

Sly doesn't give you fancy parallax scrolling out of the box. It just gives you an animation optimized navigation interface into which you can plug your own parallax renderer.