JS: Impetus

more at: https://github.com/chrisbateman/impetus

by Seth Van Booven

HTML

<div class="img"></div>
<div class="box"></div>

CSS

html, body {
    height: 100%;
}

.img {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background: tomato;
    border:2px solid #ff0;
    z-index: 3;
}
.box {
  width:300px;
  height:300px;
  border:1px solid #000;
  position: relative;
  z-index:2;
}

JavaScript

#initclip 0
function ThrowBehaviorClass(){
	// get the target
	var target = this._parent[this._targetInstanceName];
	// set up the various properties
	target.friction = (100-this.friction)/100;
	target.accel = this.acceleration/100;
	target.useHandCursor = this.showHand;
	target.snapToCenter = this.snapToCenter;
	target.xspeed = 0;
	target.yspeed = 0;
	// set the onPress handler for the target
	target.onPress = function(){
		this.startDrag(this.snapToCenter);
		// track the speed of the target
		this.onEnterFrame = function(){
			this.oldX = this.newX;
			this.oldY = this.newY;
			this.newX = this._x;
			this.newY = this._y;
		}
		// make the dragging smooth
		this.onMouseMove = function(){
			updateAfterEvent();	
		}
	}
	// handle the releasing of the target
	target.onRelease = function(){
		this.stopDrag();
		// set the new speed of the target
		this.xspeed = (this.newX - this.oldX) * this.accel;
		this.yspeed = (this.newY - this.oldY) * this.accel;
		// let the target ease with friction
		this.onEnterFrame = function(){
			this._x += this.xspeed;
			this._y += this.yspeed;
			this.xspeed *= this.friction;
			this.yspeed *= this.friction;
			if (Math.abs(this.xspeed) < .1 && Math.abs(this.yspeed) < .1){
				this.onEnterFrame = undefined;	
			}
		}
		// turn off the mouseMove handler
		this.onMouseMove = undefined;
	}
	// set up the releaseOutside handler as well
	target.onReleaseOutside = target.onRelease;
	
	// hide and stash the behavior clip
	this._visible = false;
	this._x = -1600;
	this._y = -1600;
}
// register the class
Object.registerClass("throwBehavior", ThrowBehaviorClass);
#endinitclip


onClipEvent (load)
{
	var minX = 0;
	var minY = 0;
	var maxX = 595;
	var maxY = 450;
	var f    = .85;
}

onClipEvent (mouseDown) 
{
	if (_root.popup.drag.hitTest(_root._xmouse, _root._ymouse, true)) startDrag('', false, minX, minY, maxX, maxY);
	dragging = true;
}

onClipEvent (mouseUp) 
{
	stopDrag();
	dragging = false;
}

onClipEvent (enterFrame) 
{
	if (dragging...