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: 13 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>