parralax effect

[iconofsyn]

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?

[OSUblake]

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

[iconofsyn]

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

[OSUblake]

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
}