Icontem

File: example_x.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Panorama  >  example_x.html  >  Download  
File: example_x.html
Role: Example script
Content type: text/plain
Description: Example script x orientation
Class: Panorama
Display layers that can scroll at different speeds
Author: By
Last change: credits changed
Date: 6 years ago
Size: 1,822 bytes
 

Contents

Class file image Download
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Fee free to distribute and modify code, but keep reference to its creator
 *
 * This class helps to create moving panorama view effect by adding multiple objects and layers
 * which will move with with provided speeds based on mouse cursor positions
 *
 * Online documentation: http://webcodingeasy.com/JS-classes/Create-moving-panorama-effect
**************************************************************/
-->
<html>
<head>
<style type='text/css'>
body
{
	text-align: center;
}
#sun
{
	background-image: url("./images/sun.png");
}
#sun a
{
	display: block; 
	width: 141px; 
	height: 133px;
}
#content
{
	width:1000px; 
	margin: 0 auto 0 auto; 
	height:500px; 
	border: 3px solid black; 
	position: relative; 
	z-index: 4;
}
</style>
</head>
<body>
<div id='sun'><a href='javascript:alert("you clicked me")'></a></div>
<div id='content'>
somecontent here
<p>try to click</p>
<div> the sun </div>
</div>
<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 and objects
vista.add_layer({speed: 0.2, size: 100, offset_val: 520, image: "./images/zaale_big.png", sequence: 3});
vista.add_layer({speed: 0.3, size: 350, offset_val: 220, image: "./images/kalni.png", sequence: 2});
vista.add_layer({speed: 0.5, size: 550, offset_val: 20, image: "./images/sky.png", sequence: 1});
vista.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"});
</script>
</body>
</html>