Home / Blog / effect

数字滚动动画效果

Author: Vic.Wang 2015/01/19 Tags:动画效果css动画animation

最近弄智库,看见百度文库有个文档数的数字在页面加载完后会有个小动画,数字一直向上刷,给人的感觉是文档数量一直在不断的增加。看了下实现效果,自己模拟了下,还挺不错的,效果如下:

智库已有文档

,

说说原理吧,首先将数字按竖排的方式拼成CSS Sprite,然后定义好背景,通过JS改变背景的position的值,需要把数字和背景关联起来哦。因为数字是竖排的,所以在执行animate动画的时候,会有快有慢,这就形成了这个效果。

关键代码:

        $(this).animate({
            'backgroundPositionX': '0px',
            'backgroundPositionY': '-' + nums + 'px'
        }, 1500);
                    

注意:需要注意的是:背景图定位的CSS属性在JS里要用 backgroundPositionX 和 backgroundPositionY 哦,backgroundPosition 这样写带属性是不生效的。

HTML代码:

        

智库已有文档

,

CSS代码:

        .paper-wrap {
            width: 233px; height: 155px;
            margin: 0 50px;
            background: #f1f1f1;
            color: #333;
            font-family: 'Microsoft YaHei',Arial;
            text-align: center;
        }

        .paper-wrap .title {
            margin-bottom: 25px;
            padding-top: 10px;
            font-size: 18px;
        }

        .paper-wrap .nums {
            margin: 10px auto 10px;
        }

        .paper-wrap span {
            display: inline-block;
            width: 19px; height: 30px;
            background: url(../images/effect/numroll.png) no-repeat;
        }

        .paper-wrap em {
            font-size: 14px;
            vertical-align: 5px;
        }

        .paper-wrap .unit {
            vertical-align: 10px;
        }
                    

jQuery代码:

        $(function() {
            var $wrap = $('.js-nums'),
                nums;

            $wrap[0] && $wrap.find('.num').each(function() {
                nums = $(this).data('num') * 30;
                $(this).animate({
                    'backgroundPositionX': '0px',
                    'backgroundPositionY': '-' + nums + 'px'
                }, 1500);
            });
        });