search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.9k stars 2.17k forks source link

Zooming and Moving Background Image Based on Scroll #79

Closed etangins closed 10 years ago

etangins commented 10 years ago

I have noticed several website which have background images that zoom out, in, and move based on scroll. A great example would be http://www.dementialab.org/discovery-lab/ where the background image continually moves as the user scrolls.

I'm wondering if I could do that 1) with scroll magic vs. needing some other tools and 2) if using

[your parallax object].style.background= "color image repeat attachment position size";

would be the right code to get it done?

janpaepke commented 10 years ago

Hi!

Well in general, yes you can modify background properties using ScrollMagic. You can zoom, change position etc. To do this use TweenMax and use a property like backgroundSize.

In your example though this is not what's happening. The animation is actually a prerendered video (otherwise you wouldn't be able to have angle changes). They exported the video to JPGs and on scroll they just jump to the appropriate frame. You can see how it works if you open your DOM inspector and open div#main>div.view. Now scroll to see the src tag of the image change. image

you can achieve the same effect using ScrollMagic, but you'll need to create and export the footage, like they did.

regards, J

etangins commented 10 years ago

So it's essentially just changing the background image really rapidly to give the illusion of movement. Actually moving the background image would give a smoother transition correct?

etangins commented 10 years ago

Does www.flatvsrealism.com use the same technique? I do really appreciate your promptness in responding and helpfulness.

janpaepke commented 10 years ago

it uses it partially (at the end). Through the site it uses a variety of different effects and techniques. Moving the background position really only is an option if the image contains all the visual information. In the case of changes in perspective or even people moving this isn't the case.

janpaepke commented 10 years ago

does this answer your questions?

etangins commented 10 years ago

Yes it does. Thank you so much once again. On May 15, 2014 7:02 AM, "Jan Paepke" notifications@github.com wrote:

does this answer your questions?

— Reply to this email directly or view it on GitHubhttps://github.com/janpaepke/ScrollMagic/issues/79#issuecomment-43196632 .