<!--
/*************************************************************
* 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>
|
Download
