Движещо се безконечно изображение. Как ?

VoodooNet

Registered
Здравейте!
Търся код за постигането на следния
ефект ( http://xnovarev.com/ ) движещото
се небе в горната част на страницата.
 
http://www.catswhocode.com/blog/animated-background-image-with-jquery

Демото не работи, но можеш да го изтеглиш.
 
Идеално, а има ли как да се направи да се движи максимално мазно ;)
Има в примера едно кофти прескачане дали има как да се оправи ?!?

Ето го кода:

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<style type="text/css" media="screen">
			body{
				background-color: #1D1D1D;
				margin:0;
				padding:0;
			}
			
			#header{
				height:141px; 
				background: #1D1D1D url(stars.jpg) repeat-x scroll left top;
				text-align:center;
				margin-top:-30px;
			}
			
			#header h1{
				padding-top:35px;
				font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
				color:white;
				font-size:45px;
			}
		</style>
	
	</head>
	<body>
		<div id="container">
			<div id="header">
					<h1>text</h1>	
			</div>

			<div id="content">

			</div>
		</div>
	</body>		
	
	<script src="jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
			var scrollSpeed = 70; 		// Speed in milliseconds
			var step = 1; 				// How many pixels to move per step
			var current = 0;			// The current pixel row
			var imageWidth = 1444;		// Background image width
			var headerWidth = 638;		// How wide the header is.
			
			//The pixel row where to start a new loop
			var restartPosition = -(imageWidth - headerWidth);
			
			function scrollBg(){
				//Go to next pixel row.
				current -= step;
				
				//If at the end of the image, then go to the top.
				if (current == restartPosition){
					current = 0;
				}
				
				//Set the CSS of the header.
				$('#header').css("background-position",current+"px 0");
			}
			
			//Calls the scrolling function repeatedly
			var init = setInterval("scrollBg()", scrollSpeed);
	</script>	

</html>
 
Мисля ,че трябва да промениш скороста във кода ето тук:
var scrollSpeed = 70; // Speed in milliseconds
намали го на 30 и прецени как е
 
Оправих се. На 150 върви по плавно въпреки, че пак си личи. Ще огледам още за вариант да се направи да върви максимално мазно...
 
Ако работиш с Флаш, може да го направиш и с него.

http://www.drivemedia.com/samples/clouds/clouds_loop.swf
 

Back
Горе