Parallax elements (not scrolling). Has anybody played with this?

[azuki]

Hello greensockers,

 

This is a "how's that done?" post rather than a plea for help solving something.  I'm curious if anyone has any experience achieving a parallax effect on elements in a page.  An impressive example - and incredible site overall, can be seen on the welcome page here:

http://axel-aubert.fr/#accueil

 

Most of my queries with Uncle Google have come up with solutions similar to Scrollorama, which is different.  I did find Plax (http://cameronmcefee.com/plax/) but the demo isn't very smooth... wasn't able to find much beyond that.

 

I realize this isn't completely related to greensock but as it revolves around web effects, it seems to be in the same universe.  Plus, you guys are always very helpful  

 

So, any thoughts on how I might approach this?  JS libraries?  If it's greensock-able, I'd love to know!

I'm guessing this experience degrades down to a static image or wonky version of parallax in non-modern browsers but it's just too fun not to try.

 

thanks in advance for any insight!

 

azuki

[Chrysto]

Hi,

 

Parallax is much of a experimenting with values... Basically , you need to know mouse position on move, original cords of the elements and then find out the new position - to add or substract the mouse position from the original position . The simplest thing I can imagine is moving elements with x/y and getting their original position with postion().top/left

 

Here is a quick pen : 

See the Pen GjAfd by burnandbass (@burnandbass) on CodePen

 

See the Pen dqgkn by burnandbass (@burnandbass) on CodePen

And here is pen where you can set different horizontal and vertical speed

 

I attached data-speed to each element I want to move, then use this speed to calculate the new position - the equation is in the pen. In my way you only add new elements with data-speed attribute and parallax class, set the original position via CSS and boom - it is working. You can manage the z-indexes via CSS, which I find to be good thing. Probably it's not the best code out there, but it is working

 

Also, note tweening is expensive operation, so if you just need to move the stuff... Use set()

 

TweenLite.set(item, {
x: (item.position().left + pageX * speed )*fixer,
y: (item.position().top + pageY * speed)*fixer
});

 

On my code I'm getting 60fps, 6 milliseconds average paint time and 30mb ram usage when tweening. When I'm just moving the stuff - 4 milliseconds paint time and bout 22MB ram usage. If you want to speed up the things , you can store somewhere original top/left value and then move it with top/left or x/y.  I would use a hash table for this, this is just my style of coding If you have some questions about the code, send me a message.

 

Also, note there can be a lot of tricky part - for example responsiveness, min/max move, percentage based move ( you cannot do it with transform, have to manually calculate values ) etc. Probably the best parallax I've built with AS3 behaved a little different from the one in my pen. I had max and min values and I knew that if somebody goes with the mouse from the one to the other end of the screen, the first level will move exactly from the left to the right side of the screen. So no matter the screen resolution, that would work. You can do the same with very little tweaking in my code ( fork the pen ) and it would work great, trust me. 

 

Cheers, Ico

[Rodrigo]

Hi,

 

First of all the french site is quite awesome, lot of ideas that can be extracted from it, definitely going to the bookmarks.

 

Like Chrysto says this is more about doing than anything else. Another approach, using Chrysto's base, for more complex motions (by that I mean more elements) could be create two timelines and set their progress based on the mouse position. So when the mouse is at the middle of the screen both timelines progres are 0.5, at the top-left corner 0 and at the bottom right 1. But basically the idea is the same objects moving different distances in the same time span.

 

Finally Chrysto's data-speed concept is very good, that's going to the tool box as well 

 

Hope this helps,

Rodrigo.

[Rodrigo]

Azuki,

 

Take a look at this:

http://wagerfield.github.io/parallax/

 

Rodrigo.

[azuki]

Azuki,

 

Take a look at this:

http://wagerfield.github.io/parallax/

 

Rodrigo.

 

wow.  excellent example.

[Carl]

Nandito

 

If you need a local version of a codepen just visit the pen and click

Share > export zip.

[nene]

Hi

 

GreenSock and parallax:

http://johnpolacek.github.io/superscrollorama/

 

Easy and useful to parallax:

http://prinzhorn.github.io/skrollr/
http://everylastdrop.co.uk/

 

Maybe you've already tried. I really liked to do some testing