Jump to content
GreenSock

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

parralax effect

Recommended Posts

looking at the code for this page

http://systemshock.com/

 

it seams that greensock is used to create the moving face animation, looking at the code and the number of image it seams it creates some sort of parallax scrolliong effect

 

does greensock have a module which will do this for you or does it have to be made manually?

Link to comment
Share on other sites

24 minutes ago, OSUblake said:

Hi @iconofsyn

 

There is no module, but it's not that hard. Check out the parallax effect on the boxes here.

http://cjgammon.com/

 

Here's a tutorial on how to create that effect.

http://blog.cjgammon.com/parallax-5

Thanks
i have not looked at the tutorials yet but im guessing its little more than creating a css 3d space, creating a container in that space which rotates in response to mouse move and placing "layers" on the container and setting their z position at different places or each one. the images go on the layers

Link to comment
Share on other sites

44 minutes ago, iconofsyn said:

Thanks
i have not looked at the tutorials yet but im guessing its little more than creating a css 3d space, creating a container in that space which rotates in response to mouse move and placing "layers" on the container and setting their z position at different places or each one. the images go on the layers

 

Parallax is really all about perspective and scale. The further back something is, the more it's scaled down in size and movement. 

 

Here's the demo from that tutorial if you want to play around with it.

 

See the Pen jGVZdK?editors=1010 by osublake (@osublake) on CodePen

 

 

Notice in the mouse move function how the x and y values for each layer are multiplied by an offset value, which is kind of like the scale value.

 

function handle_mousemove(e) {
  
  // Mouse movement from center
  var dx = e.offsetX - (w / 2);
  var dy = e.offsetY - (h / 2);

  for (var i = 0; i < layers.length; i += 1) {
    var l = layers[i];
    var _x = dx * assets[i].offset; // scale x movement
    var _y = dy * assets[i].offset; // scale y movement
    TweenMax.to(l.node, 0.1, {x: _x, y: _y});
  }

  updateGradient(e);
  TweenMax.to(s.node, 0.2, {rotationY: dx / 10, rotationX: -dy / 10}); // rotate SVG node in 3D
}

 

 

 

  • Like 4
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.
×