File: animate_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  xLayers  >  animate_example.html  >  Download  
File: animate_example.html
Role: Example script
Content type: text/plain
Description: Animation example
Class: xLayers
Animate page elements stacked in different layers
Author: By
Last change:
Date: 7 years ago
Size: 1,779 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: 582px; height: 525px;'>
<img src='apple_core.png'/>
<img src='bitten_apple.png'/>
<img src='full_apple.png'/>
<p>Top Layer: <input type='button' value='Animate' onclick='x.animate(3, "right", -582);'/></p>
<p>Second Layer: <input type='button' value='Animate' onclick='x.animate(2, "left", -582);'/></p>
<p>Bottom Layer: <input type='button' value='Animate' onclick='x.animate(1, "up", -525);'/></p>
<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: []