Login   Register  
Icontem

File: peeling_example.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Arturs Sosins  >  xLayers  >  peeling_example.html  >  Download  
File: peeling_example.html
Role: Example script
Content type: text/plain
Description: peeling an egg example
Class: xLayers
Animate page elements stacked in different layers
Author: By
Last change:
Date: 2012-07-16 11:02
Size: 1,466 bytes
 

Contents

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
**************************************************************/
-->
<html>
<head>
</head>
<body>
<div id='text' style='width: 225px; height: 260px;'>
<img src='egg1.png'/>
<img src='egg2.png'/>
<img src='egg3.png'/>
</div>
<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: ["up", "down", "left", "right", "move"],
	//do not allow to edit these layers using mouse
	disallowLayers: []
});
</script>
</body>
</html>