<!--
/*************************************************************
* 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> |
Stumble It!
Bookmark in del.icio.us
Download
