轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / Google首页纪念现代舞先驱玛莎·葛兰姆的跳舞小人动画

Google首页纪念现代舞先驱玛莎·葛兰姆的跳舞小人动画

前言

2011年5月11日,是美国现代舞大师玛莎葛兰姆(Martha Graham)的117岁诞辰,玛莎葛兰姆大师独创了玛莎葛兰姆式的舞蹈技法,以收与放为技巧充分展现舞者的感情,成为现代舞的创立人之一。GOOGLE为了纪念现代舞先驱,用巧妙的技术和奇特的创意在首页创建了一副跳舞的图。

效果图

M5X60F01010P00004U1

整个动画实际上是由155张小图片做出来的(GOOGLE的设计师太NB了),就像放电影那样,如下图:

M5X60F01010P0000P02

代码分析

虽然原理很简单,就是用JS来控制播放上面的图片,不过里面还有很多技巧是值得学习的,下面是我对代码的分析。

HTML代码

这部分很简单,就一个div容器:

CSS部分

JS部分

demo地址

点击前往

271/470
273/470

相关阅读

文章评论

  • 努力~~各位。。。

  • 测试转发

  • 有点意思

    • 这ID好熟,报上名来

      • 干嘛??

        • 老是莫莫回复,我认识么

          • 不是有链接么【奇客网络】

    • 前几天出了个玩转模仿的,下次出篇文章介绍下。还有你的头像加上个奇客的链接呗,这样就可以直接点过去了

      • 玩转魔方

  • Lex

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子