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"> </div> </body> </html>