Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

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

Contents

Download

Example codes

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

Example scripts provided with package in action:

Example video

Video of class example app:

Method list

Constructor

Back to method list

Method namenew xLayers(elem, config)
DescriptionCreate 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)

Get Layers

Back to method list

Method namegetLayers()
DescriptionGet object with layer ID's as keys and layer HTML elements as values

Resize layer

Back to method list

Method nameresize(el, side, value)
Description

Resize layer from specified side for provided relative value

Input parameters

int or element el - layer to resize. It is possible to provide ID or element itself as a layer

string side - side from which to resize. For sides use values as 'up', 'down', 'left', 'right'

int value - relative value by how much to resize. For example, value -10, shortens layer from specified side by 10 pixels

Animate resizing

Back to method list

Method nameanimate(el, side, value, steps)
DescriptionResize layer from specified side for provided value as animation
Input parameters

int or element el - layer to resize. It is possible to provide ID or element itself as a layer

string side - side from which to resize. For sides use values as 'up', 'down', 'left', 'right'

int value - relative value by how much to resize. For example, value -10, shortens layer from specified side by 10 pixels

int steps - animation steps to perform

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus