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

Create moving panorama effect

Panorama class helps users to create moving panorama view effect. It is possible to add multiple layers and objects and provide moving speed for every layer and object.

Movement or rotation of panorama is based on cursor position in mouse move event.

Package contains panorama.js and panorama.packed.js (packed javascript) and two example files: example_x.html, to demonstrate x axis oriented panorama and example_y.html, to demonstrate y axis oriented panorama.

Contents

Download

Example codes

<html>
<head>

</head>
<body>
<script type="text/javascript" src="./panorama.packed.js" ></script>
<script type="text/javascript">
//create panorama instance
var vista = new panorama("x", {positive: "#97bff3", negative: "#22250f"});
//add layers
vista.add_layer({speed: 0.2, size: 100, offset_val: 520, image: "grass.png", sequence: 3});
vista.add_layer({speed: 0.3, size: 350, offset_val: 220, image: "kalni.png", sequence: 2});
vista.add_layer({speed: 0.5, size: 550, offset_val: 20, image: "sky.png", sequence: 1});
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew panorama(orientation, canvas);
DescriptionCreate panorama instance with provided orientation and canvas.
Input parameters

string orientation - value x is for horizontal panorama, value y - for vertical panorama

json canvas - Json object with 2 possible value - positive and negative. To understand these values, let's imagine coordinate plane with the x and y axes. If you choosed y orientation for panorama, then we look to values of x axis - positive values are on the left and negative values are on the right. So positive will be pattern image or color for right canvas and negative - for left.

Same applies if orientation is x, we look on y axis. On y axis positive values are on the top, and negative values are on the bottom, so positive will be for top canvas and negative for bottom canvas.

HEX colors and images are accepted as values for positive or negative canvas. If hex color mark # won't be found, then value will be interpreted as image file.

Example input
var vista = new panorama("x", 
{
	positive: "#000080", 
	negative: "./grass.png"
});

Add layer

Back to method list

Method nameadd_layer(config);
DescriptionAdd layer to panorama. You'll need to use layers, if image is large or you are using pattern and you don't need to interact with this object
Input parameters

json config - json configuration:

  • int speed - how fast will layer move. Although this value isn't limited, usable values are between 0 and 1. Values greater than 1 are usually too fast to be usable.(default: 1)
  • string repeat - css value for background-repeat(default: background will repeat to x and y axis)
  • int size - size of layer in pixels (height for x orientation and width for y orientation)(default: 100)
  • string offset_type - how to position layer. Accepted values are positive or negative. Same as canvas. For y orientation we look on x axis. Positive offset is right and negative is left. For x: positive - top, negative - bottom; (default: positive.)
  • int offset_val - in pixels. For example: with x panorama orientation and offset_type : 'positive', we will provide pixels for css value top. (default: '0')
  • string image - image that should be used as background of layer (default: '')
  • int sequence - z-index of layer(default: 1)
  • int bg_x - background position of image on x axis(default: 0)
  • int bg_y - background position of image on y axis(default: 0)
  • sting id - id of div element to be used as layer. If id is not provided, then element will be created. Note: that some css styles will be overwritten for provided element(default: '')
Example input
add_layer(
	{
		speed: 0.2, 
		size: 100, 
		offset_val: 520, 
		image: "./grass.png", 
		sequence: 3
	}
)

Add object

Back to method list

Method nameadd_object(config);
DescriptionAdd object to panorama. You'll need to use objects, if you need to interact with it (for example click on it) or position it on both x and y axis
Input parameters

json config - json configuration:

  • int speed - how fast will object move. Although this value isn't limited, usable values are between 0 and 1. Values greater than 1 are usually too fast to be usable.(default: 1)
  • int width - width of object in pixels(default: 100)
  • int height - height of object in pixels(default: 100)
  • string offset_x_type - how to position object on x axis. Accepted values are positive or negative. Positive - means position from right, negative - from left; (default: 'negative'.)
  • int offset_x_val - value where to position object on x axis in pixels. For example: with offset_x_type : 'negative', we will provide pixels for css value left. (default: '0')
  • string offset_y_type - how to position object on y axis. Accepted values are positive or negative. Positive - means position from top, negative - from bottom; (default: 'positive'.)
  • int offset_y_val - value where to position object on y axis in pixels. For example: with offset_y_type : 'positive', we will provide pixels for css value top. (default: '0')
  • string image - image that should be used as background of object (default: '')
  • int sequence - z-index of object(default: 1)
  • sting id - id of div element be used as object. If id is not provided, then element will be created. Note: that some css styles will be overwritten for provided element(default: '')
Example input
add_object(
	{
		speed: 0.4, 
		height: 133, 
		width: 141, 
		offset_x_type: "positive", 
		offset_x_val: 400, 
		offset_y_val: 120, 
		sequence: 5, 
		id: "sun"
	}
)

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Scripts.com
RATE ME!

Try it out and Rate on JSclasses.org

Support

JS classes support forum or comments below


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus