File: xray_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  xLayers  >  xray_example.html  >  Download  
File: xray_example.html
Role: Example script
Content type: text/plain
Description: xray example
Class: xLayers
Animate page elements stacked in different layers
Author: By
Last change:
Date: 7 years ago
Size: 1,517 bytes


Class file image Download
<!DOCTYPE html>
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 * xLayers provides a way to manipulate multiple layers one on another 
 * to create interesting effects as x-rays, peeling, etc.
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Manipulate-layers-to-create-X-ray-effect
<div id='text' style='width: 340px; height: 700px;'>
<img src='1.jpg'/>
<img src='0.jpg'/>
<script type="text/javascript" src="./xLayers.packed.js" ></script>
<script type="text/javascript">
var x = new xLayers("text", {
	//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: ["move"],
	//do not allow to edit these layers using mouse
	disallowLayers: []
x.resize(2, "up", -200);
x.resize(2, "down", -400);
x.resize(2, "left", -120);
x.resize(2, "right", -120);