Icontem

File: example_y.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Panorama  >  example_y.html  >  Download  
File: example_y.html
Role: Example script
Content type: text/plain
Description: Example script y orientation
Class: Panorama
Display layers that can scroll at different speeds
Author: By
Last change: credits changed
Date: 6 years ago
Size: 2,260 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;
	overflow: hidden;
}
#bug
{
	background-image: url("./images/bug.png");
}
#bug 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;
	font-weight: bold;
}
</style>
</head>
<body style='text-align: center;'>
<div id='bug'><a href='javascript:alert("you clicked me")'></a></div>
<div id='content'>
somecontent here
<p>try to click</p>
<div> the bug </div>
</div>
<script type="text/javascript" src="./panorama.packed.js" ></script>
<script type="text/javascript">
//create panorama instance
var building = new panorama("y", {positive: "#97bff3", negative: "#97bff3"});
//add layers and objects
building.add_layer({speed: 1, size: 681, offset_val: 200, image: "./images/wand.png", sequence: 1});
building.add_object({speed: 0.9, width: 200, height: 183 , offset_y_val: -100, offset_x_val: 700, image: "./images/window.png", sequence: 2});
building.add_object({speed: 0.9, width: 200, height: 183 , offset_y_val: 350, offset_x_val: 700, image: "./images/window.png", sequence: 2});
building.add_object({speed: 0.9, width: 200, height: 183 , offset_y_val: 800, offset_x_val: 700, image: "./images/window.png", sequence: 2});
building.add_object({speed: 0.6, height: 133, width: 141 , offset_y_val: 350, offset_x_val: 100, image: "./images/sun.png", sequence: 2});
building.add_object({speed: 0.4, height: 67, width: 50, offset_x_type: "positive", offset_x_val: 700, offset_y_val: 400, sequence: 5, id: "bug"});
</script>
</body>
</html>