Slide Demo One

Slide Transitions

Shawn Lauriat

Fade

function Fade() { }
Fade.prototype = new Transition;
Fade.prototype.prepare = function() {
	this.cslide.style.opacity = '1';
	this.nslide.style.opacity = '0';
}
Fade.prototype.perform = function() {
	this.cslide.style.opacity = '0';
	this.nslide.style.opacity = '1';
}

Wipe

function Wipe() { }
Wipe.prototype = new Transition;
Wipe.prototype.prepare = function() {
	this.cslide.style.WebkitTransform = 'translate(0)';
	this.nslide.style.WebkitTransform = 'translate(100%)';
}
Wipe.prototype.perform = function() {
	this.cslide.style.WebkitTransform = 'translate(-100%)';
	this.nslide.style.WebkitTransform = 'translate(0)';
}

Rotate: Preparing

function Rotate() { }
Rotate.prototype = new Transition;
Rotate.prototype.prepare = function() {
	this.cslide.style.WebkitTransform
		= 'matrix(1,0,0,1,0,0)';
	this.nslide.style.WebkitTransform
		= 'matrix(0,1.99,0,0,0,0) scale(.5)';
}

Rotate: Performing

Rotate.prototype.perform = function() {
	this.cslide.style.WebkitTransform
		= 'matrix(0,-1.99,0,0,0,0) scale(.5)';
	var dis = this; setTimeout(function() {
		dis.nslide.style.WebkitTransform
			= 'matrix(1,0,0,1,0,0)';
	}, this.duration * 1000);
}
Rotate.prototype.cleanup = function() {
	var dis = this;
	setTimeout(function() {
		dis.transition(false);
	}, this.duration * 1000);
}

Slide Demo One