Parallax effect is widely used in games but its also used in websites to give that awesome feel to it… its not just like you would just use it because its cool but you’ll have to define the purpose behind using it ( it might be just useless ).

below is a demo of one way of doing it, i might do another one that wont require greensock or any tweening engine to get the same effect, & by the way im using TweenNano which is a very light version of TweenMax.



Demo | Download


import com.greensock.TweenNano;
import com.greensock.easing.*;

//ease type
var easeType = Expo.easeOut;
//xmouse will hold x position of the mouse in relation to the center of the stage.
//assuming that the stage center's value is 0;
var xmouse:Number = 0;
// percentage of the xmouse position
var xPct:Number = 0;
// speed or durationl
var speed:Number = 2;

// add event listener based on mouse movement
stage.addEventListener(MouseEvent.MOUSE_MOVE, render);

function render(e:MouseEvent):void
	//if xmouse pos is greater than the center of the stage
	if( e.stageX > stage.stageWidth/2) {

		xmouse= -(e.stageX -stage.stageWidth) - stage.stageWidth/2; //-512

		xmouse = ((stage.stageWidth/2) - e.stageX); //512


	xPct = Math.round ((xmouse/stage.stageWidth) * 200);

	//where will the sky moveclip move to...
	var skyXto:Number = ((xPct/100) * (sky_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;,speed, {x:skyXto, ease:easeType});

	var fieldXto:Number = ((xPct/100) * (field_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;,speed, {x:fieldXto, ease:easeType});

	var grassXto:Number = ((xPct/100) * (grass_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;,speed, {x:grassXto, ease:easeType});