Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
azuki

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

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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  8-)

 

Hope this helps,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Nandito

 

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

Share > export zip.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×