mootools_使用MooTools进行背景动画

mootools

Updated 4/25/2011: The background animation has been updated to work well with Internet Explorer 7 and 8, and more efficiently with every other browser. This was accomplished by adding the wait property to the animation, and using an initial setStyle assignment to work around an IE8 background-position bug.

2011年4月25日更新：背景动画已经更新，可以与Internet Explorer 7和8协同工作，并且可以与其他所有浏览器一起更有效地工作。 这是通过将wait属性添加到动画中并使用初始setStyle分配来解决IE8 background-position错误来实现的。

One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. I ran across this great jQuery tutorial that walks you through animating a background image of a page. Here's a quick MooTools code snippet that shows you how you can add this sweet effect to any element on a page.

通过动画框架(如MooTools和jQuery)可以轻松实现的甜美效果之一。 我遇到了这个很棒的jQuery教程 ，它引导您动画化页面的背景图像。 这是一个快速的MooTools代码段，向您展示如何将这种甜美效果添加到页面上的任何元素。

View Demo 观看演示

CSS (The CSS)

#animate-area	{ 
	background-image: url(clouds.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
}

The first step is assigning the image as a background image for our given container. Be sure to repeat the background horizontally!

第一步是将图像分配为给定容器的背景图像。 确保水平重复背景！

MooTools JavaScript (The MooTools JavaScript)

window.addEvent("domready",function() {
	//settings
	var duration = 40000;
	var length = 2000;
	var count = 0;
	
	var tweener;
	
	// Executes the standard tween on the background position
	var run = function() {
		tweener.tween("background-position", "-" + (++count * length) + "px 0px");
	};
	
	// Defines the tween
	tweener = $("animate-area").setStyle("background-position", "0px 0px").set("tween", { 
		duration: duration, 
		transition: Fx.Transitions.linear,
		onComplete: run,
		link: "cancel"
	});
	
	// Starts the initial run of the transition
	run();	
});

The first step, as always is getting our settings ready for the show. The next piece is putting the animation function in place. We increment the negative background left position counter calculation to keep the show rolling. Last step is playing the show!

与往常一样，第一步是为节目准备好我们的设置。 下一件是将动画功能放置到位。 我们增加负背景左位置计数器的计算，以保持节目的滚动。 最后一步是播放节目！

View Demo 观看演示

Make sure the animation speed is very slow and subtle -- a rapid background speed could make your users pass out. On the other hand, implementing it tastefully will make your website unique.

确保动画速度非常慢且微妙-快速的背景速度可能会使您的用户昏迷。 另一方面，高雅地实施它会使您的网站独一无二。

翻译自: https://davidwalsh.name/mootools-animate-background

mootools