A little audio-synchronised animation using Kiln’s Talkie library.
Last active
December 12, 2015 08:18
-
-
Save robinhouston/4742544 to your computer and use it in GitHub Desktop.
Head & Shoulders
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Head & Shoulders – Talkie demo 02</title> | |
| <link rel="stylesheet" type="text/css" href="http://kiln.it/talkie/ui/1.0/talkie.css"> | |
| <style> | |
| body { background: white; font-family: Helvetica, Arial, sans-serif; } | |
| #wrapper { width: 800px; margin: auto; position: relative; } | |
| #controls { width: 790px; padding: 0 5px; } | |
| #controls audio { width: 100%; } | |
| #stickman { width: 360px; height: 423px; margin: auto; display: block; } | |
| #credits { text-align: right; margin: 8px 6px 0 0; } | |
| #credits a { color: #C3004D; } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://kiln.it/talkie-1.min.js"></script> | |
| </head> | |
| <body id="example-02-head-shoulders" onunload=""> | |
| <div id="wrapper"> | |
| <object id="stickman" data="stickman.svg" type="image/svg+xml" onload="init()"></object> | |
| <audio id="controls" controls="controls"> | |
| <source src="http://kiln.it/talkie/examples/audio/02.head-shoulders.ogg" type="audio/ogg"> | |
| <source src="http://kiln.it/talkie/examples/audio/02.head-shoulders.mp3" type="audio/mpeg"> | |
| </audio> | |
| <div id="credits"> | |
| Code by <a href="http://kiln.it">Kiln</a> | |
| <span style="margin: 0 0.5em">•</span> | |
| Singing and artwork by Miri Tilden (age 5½) | |
| </div> | |
| </div> | |
| <script> | |
| function init() { | |
| var svg = document.getElementById("stickman").contentDocument, | |
| animate = Talkie.animate(svg); | |
| var arms = animate.select("#arms"); | |
| function touch(body_part) { | |
| return arms.morphTo("#arms-"+body_part, 200).and( | |
| animate.select("#"+body_part).style("opacity", "1", 100)); | |
| } | |
| var stickman = animate.select("#stickman"); | |
| var timeline = Talkie.timeline("#controls", { | |
| 0.1: stickman.attr("transform", "translate(500 0)", 2000), | |
| 2.6: stickman.attr("transform", "translate(0 0)", 1000), | |
| 4.5: function() { | |
| // Make the stickman jump | |
| stickman.element.attr("transform", "translate(0 0)") | |
| .transition().duration(600).ease(function(t) { | |
| return 1 - Math.pow(2*t-1, 2); | |
| }).attr("transform", "translate(0 -100)"); | |
| }, | |
| 6.0: touch("head"), | |
| 6.5: touch("shoulders"), | |
| 7.2: touch("knees"), | |
| 7.7: touch("toes"), | |
| 8.2: touch("knees"), | |
| 8.7: touch("toes"), | |
| 9.0: touch("neutral"), | |
| 10.0: touch("eyes"), | |
| 11.2: touch("ears"), | |
| 12.3: touch("mouth"), | |
| 13.5: touch("nose"), | |
| 14.0: touch("neutral"), | |
| 14.3: touch("head"), | |
| 15.1: touch("shoulders"), | |
| 15.7: touch("knees"), | |
| 16.2: touch("toes"), | |
| 16.7: touch("knees"), | |
| 17.2: touch("toes"), | |
| // move the arms into the neutral position and zoom in on stickman’s face. | |
| 18.0: touch("neutral").and( | |
| stickman.attr("transform", "scale(1.8) translate(-165 -50)", 1000)) | |
| }); | |
| Talkie.ui.playButton("#wrapper", timeline); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <svg | |
| version="1.1" | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="720" | |
| height="945" | |
| viewBox="0, 100, 576, 656" | |
| preserveAspectRatio="none"> | |
| <defs/> | |
| <g | |
| id="stickman" | |
| transform="translate(-500 0)" | |
| style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1;fill-rule:nonzero;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1;stroke-miterlimit:10"> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="torso" | |
| d="M296.4609375,335.8515625 C288.826075803,353.640986188 274.481633005,376.194804361 273.62890625,389.05078125 C273.163786485,396.063073187 276.18122157,440.856660183 273.62890625,469.92578125 C271.69480176,491.953904939 274.91464368,541.748669815 273.62890625,554.56640625 | |
| C272.973351575,561.101742976 271.174824529,573.972879232 271.59375,575.98046875"/> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="arms" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 386.083547104,498.900584772 427.19140625,509.7265625 | |
| C440.733781046,513.293020374 399.046488869,501.778822345 391.75,496.66015625M254.8671875,461.140625 C246.518646437,460.514562973 217.719030153,462.868109434 213.3515625,458.02734375 C203.367314502,446.961112943 189.182153474,458.611704973 161.4609375,443.49609375 C149.703241717,437.084947915 138.675094984,432.348110283 133.82421875,433.15625"/> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="head" | |
| d="M299.453125,341.40625 C309.80597923,343.13671702 306.596050307,338.281503947 330.51171875,346.59765625 C374.331464812,361.835017606 405.142811229,375.872978869 424.609375,377.38671875 C430.823668536,377.869948562 420.211330198,314.505702539 421.1484375,315.15234375 | |
| C427.439082179,319.493138114 405.842251789,273.032903422 393.47265625,249.76953125 C390.185585555,243.587570918 382.679418865,238.730840039 369.60546875,237.31640625 C322.081770901,232.174951416 291.652392502,233.824285837 243.3359375,235.2421875 | |
| C232.365387321,235.564130849 223.735423188,242.723085486 221.1953125,248.38671875 C218.936426198,253.423311706 211.412719178,260.775264543 213.23828125,270.52734375 C213.952581518,274.343107068 211.270382549,280.243646648 217.66015625,283.90625 | |
| C222.832705862,286.871143349 235.577594914,288.741952186 241.4921875,296.28515625 C247.144807693,303.494252564 253.004559204,317.316433386 261.4453125,320.6953125 C272.061016814,324.944836249 282.10855649,330.669400366 285.703125,334.3046875 | |
| C288.804261212,337.440952824 295.588737589,340.743749142 300.578125,344.3359375"/> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="right-leg" | |
| d="M272.3984375,577.92578125 C285.877590688,586.920563922 276.303241922,573.99075011 312.8359375,604.91015625 C349.788541023,636.18495101 409.634683078,668.459967738 428.3828125,690.703125 C429.887620334,692.488459235 427.403901618,696.309453036 420.4609375,687.58984375 | |
| C412.819777534,677.993376266 361.477850567,653.827653346 354.80859375,648.8828125 C351.499456729,646.429292362 328.486334528,644.691487057 314.3359375,633.31640625 C308.718211073,628.800484051 297.593446597,629.81425935 288.42578125,617.171875"/> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="left-leg" | |
| d="M275.77734375,579.53125 C247.599135714,583.527883403 231.442441774,590.450366465 187.94921875,591.98828125 C172.948992291,592.518687333 132.316748957,611.044188479 132.5234375,613.7421875"/> | |
| <!-- neutral arm position --> | |
| <path style="display:none;" | |
| id="arms-neutral" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 386.083547104,498.900584772 427.19140625,509.7265625 | |
| C440.733781046,513.293020374 399.046488869,501.778822345 391.75,496.66015625M254.8671875,461.140625 C246.518646437,460.514562973 217.719030153,462.868109434 213.3515625,458.02734375 C203.367314502,446.961112943 189.182153474,458.611704973 161.4609375,443.49609375 C149.703241717,437.084947915 138.675094984,432.348110283 133.82421875,433.15625"/> | |
| <!-- head --> | |
| <path style="display:none;" | |
| id="arms-head" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 450.357957269,418.659434271 467.96484375,391.21875 | |
| C481.451447604,370.199608504 498.105082619,208.149916095 417.125,270.91015625M254.8671875,461.140625 C246.518646437,460.514562973 220.750280153,440.375921934 195.12890625,423.23828125 C182.740215059,414.951725697 152.045434724,352.947642473 152.234375,324.4140625 C152.323050746,311.022336037 221.585251234,141.293422783 274.85546875,227.85546875"/> | |
| <!-- shoulders --> | |
| <path | |
| style="display:none;" | |
| id="arms-shoulders" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 377.588426019,485.428965521 395.1953125,457.98828125C408.681916354,436.969139754 374.224361914,388.665354037 298.392716795,448.343393105M254.8671875,461.140625 C246.518646437,460.514562973 220.750280153,440.375921934 195.12890625,423.23828125 C185.864535711,420.576725697 172.168396681,404.31279193 183.913043478,390.612092391 C199.091393137,377.550528972 249.600027049,398.069407837 251.520720109,429.729449728"/> | |
| <!-- knees --> | |
| <path | |
| style="display:none;" | |
| id="arms-knees" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 375.402403537,487.43437673 391.80859375,515.609375 | |
| C418.826447604,562.008202254 407.513424414,595.270822787 366.240373045,630.242000442M252.3359375,458.875 C243.987396437,458.248937973 228.906370356,441.834315647 195.12890625,452.60546875 C177.144614423,458.340403738 163.693872224,469.115611223 159.4609375,492.19921875 C157.045464104,505.371602335 156.389938734,537.359829033 197.16796875,579.79296875"/> | |
| <!-- toes --> | |
| <path | |
| style="display:none;" | |
| id="arms-toes" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 375.402403537,487.43437673 391.80859375,515.609375 | |
| C418.826447604,562.008202254 444.947018164,639.891916537 430.353654295,677.363094192M252.3359375,458.875 C243.987396437,458.248937973 228.906370356,441.834315647 195.12890625,452.60546875 C177.144614423,458.340403738 163.693872224,469.115611223 159.4609375,492.19921875 C157.045464104,505.371602335 137.440719984,532.859829033 136.78125,600.125"/> | |
| <!-- eyes --> | |
| <g id="eyes" style="opacity:0"> | |
| <circle | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="left-eye" | |
| cx="292.628396739" | |
| cy="278.666779891" | |
| r="8.561311141304"/> | |
| <circle | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="right-eye" | |
| cx="347.417119565" | |
| cy="302.493546196" | |
| r="5.71824048913"/> | |
| </g> | |
| <path | |
| style="display:none;" | |
| id="arms-eyes" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 399.021047104,520.740258685 427.19140625,509.7265625 | |
| 440.733781047,513.293020374 446.88344539,456.534257127 362.08423913,317.185971467M254.8671875,461.140625 C246.518646437,460.514562973 217.719030153,462.868109434 213.3515625,458.02734375 C203.367314502,446.961112943 189.182153474,458.611704973 173.383491848,423.765794837 C162.634627587,371.62706748 197.523600419,318.087240718 270.634001359,290.501358696"/> | |
| <!-- ears --> | |
| <g id="ears" style="opacity:0"> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="right-ear" | |
| d="M421.122961957,273.454483696 C434.264293801,270.19938386 445.870840409,267.090179244 468.959918478,261.605298913 C475.346438225,260.088161831 476.668629467,269.695493647 477.984375,272.194972826 C480.371643339,276.729989178 483.467114641,284.832114285 476.902173913,289.345108696 | |
| C473.637846142,291.58913398 468.982860634,299.329647645 459.99048913,297.409646739 C457.610228605,296.901426815 442.470094787,302.003058632 433.69361413,302.221467391"/> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| id="left-ear" | |
| d="M205.483695652,254.268342391 C197.112278802,255.735668608 187.479596193,250.94472958 180.752038043,258.60326087 C178.911452784,260.69855005 167.915766182,262.912611863 167.814538043,271.956521739 C167.779971445,275.044765862 163.063458008,283.37410195 169.440896739,288.14673913 | |
| C173.285989819,291.024263316 199.833134064,290.789601894 216.42798913,280.620244565"/> | |
| </g> | |
| <path | |
| style="display:none;" | |
| id="arms-ears" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 399.021047104,520.740258685 427.19140625,509.7265625 | |
| C440.733781047,513.293020374 446.88344539,456.534257127 456.602581522,313.99439538M254.8671875,461.140625 C246.518646437,460.514562973 217.719030153,462.868109434 213.3515625,458.02734375 C203.367314502,446.961112943 189.182153474,458.611704973 173.383491848,423.765794837 C162.634627587,371.62706748 137.77631781,316.460882023 163.288213315,302.772418478"/> | |
| <!-- mouth --> | |
| <g id="mouth" style="opacity:0"> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:2" | |
| d="M249.523777174,281.855298913 C265.716887735,285.337715085 272.353033486,284.9929238 289.241168478,290.39673913 C302.21451328,294.54791151 325.201186647,312.066823497 343.210597826,319.457201087 C348.714036921,321.715603238 363.10524866,328.461814052 377.449728261,310.793478261"/> | |
| </g> | |
| <path | |
| style="display:none;" | |
| id="arms-mouth" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 399.021047104,520.740258685 427.19140625,509.7265625 | |
| C440.733781047,513.293020374 446.88344539,456.534257127 364.786684783,337.582710598M254.8671875,461.140625 C246.518646437,460.514562973 217.719030153,462.868109434 213.3515625,458.02734375 C203.367314502,446.961112943 189.182153474,458.611704973 173.383491848,423.765794837 C162.634627587,371.62706748 188.976046071,329.820257023 265.693783967,302.044836957"/> | |
| <!-- nose --> | |
| <g id="nose" style="opacity:0"> | |
| <path | |
| style="fill:none;stroke:#804000;stroke-width:4" | |
| d="M317.190169218,293.07363605 C313.910390491,288.65014994 310.630611763,284.226663829 307.350833035,279.803177719 C300.021761276,285.237293042 298.485595566,295.583900474 303.919710888,302.912972233 C309.35382621,310.242043992 319.700433642,311.778209703 327.029505401,306.34409438 | |
| C334.358577161,300.909979058 335.894742871,290.563371626 330.460627549,283.234299867 C325.98520675,277.1982336 318.000081067,274.942857497 311.028149257,277.745651485 C313.082155911,282.854979673 315.136162565,287.964307861 317.190169218,293.07363605 | |
| z"/> | |
| </g> | |
| <path | |
| style="display:none;" | |
| id="arms-nose" | |
| d="M252.3359375,458.875 C260.91480721,459.76574507 269.556497496,456.469855777 282.3203125,461.98828125 C283.937362724,462.687411655 298.022128855,460.881717069 310.33984375,468.21484375 C315.314787691,471.176585799 399.021047104,520.740258685 389.412036622,452.87890625 | |
| C379.803265287,397.940604981 358.604792095,342.042632537 325.556118191,323.299513176M254.8671875,461.140625 C246.518646437,460.514562973 217.719030153,462.868109434 213.3515625,458.02734375 C203.367314502,446.961112943 189.182153474,458.611704973 186.615941705,417.388850241 C187.384627587,369.405775859 218.416232317,334.388573753 292.432680816,304.327383354"/> | |
| </g> | |
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { background: white; font-family: Helvetica, Arial, sans-serif; } | |
| #wrapper { width: 800px; margin: auto; position: relative; } | |
| #controls { width: 790px; padding: 0 5px; } | |
| #controls audio { width: 100%; } | |
| #stickman { width: 360px; height: 423px; margin: auto; display: block; } | |
| #credits { text-align: right; margin: 8px 6px 0 0; } | |
| #credits a { color: #C3004D; } | |
| #play { width: 158px; height: 158px; position: absolute; top: 165px; left: 321px; background-image: url(play.png); background-repeat: no-repeat; cursor: pointer; } | |
| #play:hover { background-position: 0 -158px; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment