Manipulate layers to create X ray effect

xLayers class provides a way to manipulate multiple layers one on another to create interesting effects as x-rays, peeling, etc.

It also provides a mouse interaction for resizing/moving layers with available restrictions to which layers can be modified and which actions can be performed

This class also provides basic animation for resizing layers, configurable by animation steps and time interval between steps

Package contains xLayers.js, xLayers.packed.js and 4 example files: html_example.html, aniamte_example.html, peeling_example.html and xray_example.html to demonstrate classes functionality

Download
Example codes
Examples in action
Example video
Method list
Latest changes

Download

Back to contents

JSClasses - xLayers class

Example codes

Back to contents

var x = new xLayers("id", {
	//width of layer
	width: "auto",
	//height of layer
	height: "auto",
	//minimal width
	minWidth: 10,
	//minimal height
	minHeight: 10,
	//animation interval
	interval: 100,
	//animation steps
	steps: 10,
	//enable mouse interaction
	enableMouse: true,
	//px to offset for mouse resizing cursor
	offset: 10,
	//allow to edit directions using mouse
	//East, West, North, South
	allowedActions: ["up", "down", "left", "right", "move"],
	//do not allow to edit these layers using mouse
	disallowLayers: []
});

Examples in action

Back to contents

Example scripts provided with package in action:

Example video

Back to contents

Video of class example app:

Method list

Back to contents

Constructor
Get Layers
Resize layer
Animate resizing

Constructor

Back to method list

Method name

new xLayers(elem, config)

Description

Create xLayers instance with provided configuration

Input parameters

string or element elem - element which is a container to all layers:

json config - json with configuration options:

int width - width of each layer (default: auto, based on container)
int height - height of each layer (default: auto, based on container)
int minWidth - minimal width to which layer can be resized (default: 10px)
int minHeight - minimal height to which layer can be resized (default: 10px)
int steps - animation steps performed on provided value (default: 10)
int interval - time interval between animation steps (default: 100 milliseconds)
bool enableMouse - enable interaction (resizing/moving) with mouse (default: true)
int offset - offset to which to recognize borders of layer and allow resizing (default: 10)
array allowedActions - array with actions to be allowed to perform using mouse, resize sides and moving (default: ['up', 'down', 'left', 'right', 'move'])
array disallowLayers - Disallow modification of some layers, provide layers ID's as array elements. ID's start with 1 from bottom element (first element in container) to top element (last element in contaienr) (default: none)