File: peeling_example.html

Recommend this page to a friend!
  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: 12 years ago
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>