利用CSS sprites制作随着鼠标移动的动画背景

分类栏目:用户体验 - 前端开发

14792

发布于 5 条评论

网页设计中的背景图是至关重要的,在之前的文章《网页设计中的背景创意和发展趋势》也有为大家分享过网页设计中关于背景的设计以及发展趋势,一个优秀的背景图可以为你的网站增添不少的精彩。在浩大的互联网中,各种创意层出不穷,也许你在一些网站上看到的背景会随着鼠标的移动而移动,这是非常充满创意而且有趣的设计,你认为呢?今天就为大家分享下如何制作一个随着鼠标移动的动画背景效果。

在开始制作动画背景效果前,先为大家介绍下CSS sprites,中文名为:CSS雪碧或者CSS精灵。它是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。这种技术的好处就是可以减少你的网站的HTTP请求数量,是通过使用CSS backgroundbackground-position属性来渲染的,也就是说是在css中定义的,并不适用于<img>标签。

CSS sprites示例

CSS雪碧的制作原理很简单,相信大家都知道,主要是制作一张背景图,图片里面包含aa:hovera:active各种状态下的图片,如果通过背景定位background-position来获取不同状态下相对应的图片。下面为示例:

一览众巅峰
CSS sprites demos, Make by:www.jiawin.com

制作动画背景解析与示例

之所以在上面为大家简单的介绍css雪碧,因为css雪碧不单单仅限于使用在图片上面,还可以结合jQuery来制作动画效果。在引入jQuery后,我们可以利用鼠标光标的位置,来确定不同的触发点,相对应的改变background-position的值,从而使图像发生动画。先来看看最终的效果,用鼠标在下面的图片上面来回移动就可以看到。

在开始之前,我们需要将连成动画的每一张图片(帧)连接起来制作成一张大的背景图。大家可以在一个视频中,按照一定的时间连续快速截取10张或者更多关键帧的图像,然后使用photoshop等图片处理工具把每张小图按照规定的顺序依次排列,最终输出一张大的背景图。示例:

image_composit

图片制作完后,接下来我们就写出简单HTML代码:

<div class="box">
  <a class="pic" href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="preview">一览众巅峰</a>
</div>

接下来,我们用jQuery为#preview添加样式:

$(document).ready(function() {
    $('#preview')
        .css('display', 'block')
        .css('width', 500)
        .css('height', 203)
        .css('background', 'url("our-image.jpg") no-repeat');
});

最后,就是设置背景的定位,以便在鼠标移动不同位置的时候显示正确的图像。我们的图片框架为500px,显示第一帧是背景图像X轴的坐标应该是0px,第二帧时背景图像的X轴的坐标为-500px,第三帧的背景图像的X轴的坐标为-1000px,以此类推,大家都可以计算后面相对应的数值。
那我们怎么实现随着鼠标光标的移动,图像也相对应的移动呢?我们该怎么动态的设置background-position?其实我们可以使用mousemove的事件来处理这个功能的实现,具体代码如下:

.mousemove(function(e) {
    var elementWidth = 500;
    var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
    var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
    $(this).css('background-position', '-' + bgPosition + 'px 0px');
});

制作动画背景完整代码

以下是完整的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#preview')
        .css('display', 'block')
        .css('width', 500)
        .css('height', 203)
        .css('background', 'url("landscape.jpg") no-repeat')
        .mousemove(function(e) {
            var elementWidth = 500;
            var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
            var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
            $(this).css('background-position', bgPosition + 'px 0px');
        });
    });
    </script>
</head>
<body>
    <a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="preview">一览众巅峰</a>
</body>
</html>

总结

这个效果的实现原理其实很简单,但是这个方式实现的效果有点缺陷,假如动画的效果比较复杂,那么组成动画的帧数将会出现很多,这就意味着合成的大背景图将会非常大,是会影响页面的加载速度的,同时动画的流畅性也将会受到影响。当然这种技术,在手机移动设备上将不会有作用的,因为检测不到鼠标光标。最后,我们也必须承认css雪碧是一个简单然而却非常使用的一个技术手段。

全部评论 / 5

  1. 演示好给力 :lol:

    阿兰 2013-01-09
    5
  2. 这样效率不高啊

    4
  3. 貌似优酷都在用这么吧

    3
  4. 有意思,学习了

    2013-01-09
    2
  5. 沙发了,感觉很不错,自己做了一个挺好的

    1