Luce Digitale/JQ Sunny Panorama – Basic

DEMO

 

Today I code a little panorama viewer.
Yesterday I discovered Firefox 24 do not support ‘background-position-x’ and ‘background-position-y’ so I have to split ‘background-position’ values by javascript.

<!DOCTYPE html>
<html>
<!-- Luce Digitale/JQ Sunny Panorama                                                         -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<title>Luce Digitale/JQ Sunny Panorama - Base</title>

<style type="text/css" media="screen">
/* sunnypanorama container style START */
#sunnypanorama {
 width: 800px; height: 600px; /* Panorama Container - width and height of the display box */ 
 margin:0 auto;
 border:3px solid #CECECE;
 background: url(css/images-gimme-code-2013-0027/360-panorama-2975x600px.jpg) repeat 0 0; /* The panorama is the background image */
 background-position: 0px 0px; /* Chrome IE Firefox work well */ 
}
/* sunnypanorama container style END */
</style>
 
<script type="text/javascript" src="js/jquery-2.0.3.js"></script> 
 
<script> 
$(document).ready(function(){

    // You have to store the return of 'setInterval' in a variable
    var moveLeftId = null; 	
	
	// Firefox 24 do not support 'background-position-x' and 'background-position-y' so we have to split 'background-position' values by javascript
	var bgposx = 0;
	var bgposy = 0;
	
  // Anim of panorama image on mouse enter event, the cycle is infinite -> css 'background: repeat'
  $("#sunnypanorama").mouseenter(function(){
  
    if (moveLeftId !== null) return; // Use to stop setInterval
	
	// PANORAMA MOVE START ##################################
	moveLeftId = setInterval(function(){ // You have to store the return of 'setInterval' in a variable
	
	bgposx = bgposx-1; // -1 move background to left +1 move background to right
	var bgpos =  bgposx +'px' + ' ' + bgposy +'px'; // create the value for css 'background-position' as -> 0px 0px
	$("#sunnypanorama").css({'background-position': bgpos});
	
	},20); // subtract 1 px every 20 millisecond
	// PANORAMA MOVE END #####################################
	
  });
  
   // Stop the Anim
  $("#sunnypanorama").mouseleave(function(){
    clearInterval(moveLeftId);
	moveLeftId = null;
  });
  
});
</script> 
 
</head>
 
<body>
<p>Luce Digitale/JQ Sunny Panorama - Animate Image on Mouse Enter</p>
<div id="sunnypanorama">&nbsp;</div>
</body>
 
</html>

My official WebSite >