2012-08-09 71 views
2

虽然reasearching一个项目,我碰到鳄鱼的网页http://www.lacoste.com/live/usa/home使用代码实现GIF效果 - 它是如何完成的?

什么吸引了我最了解这个页面的设计是外观上来看,它在徘徊变成什么似乎是360 GIF动画的显示,但仔细观察后,我意识到它们实际上是非常宽的JPEGS,它们以各种角度观看,以各种方式左右移动以创建动画运动的印象。

这是如何实现的?我想这是一种JavaScript的做法,但是如果有人能够用一些代码来解释这些基础知识,我将不胜感激。

非常感谢!

回答

3

固定大小格,背景图片和背景的位置变化Maked它。
检查在这里: http://jsfiddle.net/LLAlive/NX2FG/

+0

解释这很好,谢谢!我遇到的唯一问题是 - 我尝试使用这个稍大的图像,它不工作。你知道这是否有最大尺寸?问候! – 2013-04-23 08:40:02

2

你需要搜索的关键字是css sprites,而且这里有一个很好的解释:http://css-tricks.com/css-sprites/

+0

没有CSS精灵叫,因为它们是由CSS(ERGO,由上/下/左/右属性,悬停改变)命令? – 2012-08-15 17:00:02

+0

上面的例子更多的是与创建一个'旋转木马'效果的JavaScript,如@LLAlive – 2012-08-15 17:01:11

相关问题