Last active
March 8, 2017 11:36
-
-
Save netzwerg/3e2ec63003d32642fc148cba7187aa53 to your computer and use it in GitHub Desktop.
D3.js Bouncing FHNW
This file contains hidden or 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
| license: apache-2.0 | |
| border: no |
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Bouncing FHNW</title> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| h2 { | |
| margin-top: 0; | |
| color: grey; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Animated Transitions via Mouse Interaction</h2> | |
| <svg viewBox="0 -50 240 192.28636" width="200"> | |
| <path d="m 26.463962,49.029452 c 2.30898,-3.26268 7.60735,-13.44113 23.07861,-13.44113 10.89791,0 16.69265,4.34466 18.99603,6.51421 6.65366,6.51978 7.06078,15.88396 7.06078,21.17675 l 0,45.147698 -27.95866,0 0,-39.682006 c 0,-0.80312 -0.13398,-10.078062 -9.50359,-10.078062 -9.91076,0 -10.17288,9.102047 -10.17288,11.539297 l 0,38.220771 -27.964252,0 0,-71.076248 26.463962,0 0,11.67872 z" | |
| id="path716" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"/> | |
| <path d="m 104.50618,0 -4.868918,0 0,142.28636 4.868918,0 0,-142.28636 z" id="path712" | |
| style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"/> | |
| <path d="m 228.58845,33.597249 c -5.2426,0 -9.49245,4.24985 -9.49245,9.48688 0,5.23702 4.24985,9.48687 9.49245,9.48687 4.802,0 6.92692,-3.46347 6.98269,-3.29057 2.71612,8.28777 -11.68987,51.271501 -31.37751,51.271501 -6.3692,0 -8.34911,-5.158937 -8.34911,-11.834887 0,-7.89178 2.2811,-15.93973 5.16451,-26.865534 3.0396,-10.78079 5.76686,-21.09867 7.29502,-26.62571 l -18.97374,0 c -2.58784,9.31956 -21.15444,63.959714 -36.88781,63.959714 -1.97433,0 -4.10484,-2.12493 -4.10484,-5.91745 0,-2.11935 1.82374,-9.56495 2.73841,-12.29222 l 6.21305,-21.249254 c 1.3664,-4.40602 3.34076,-10.16172 3.34076,-14.41715 0,-7.44003 -5.15893,-11.68988 -11.22698,-11.68988 -17.14998,0 -24.28326,15.33181 -27.78019,21.55043 l 2.889,1.82375 c 1.66761,-2.72727 9.2582,-15.6274 14.41716,-15.6274 0.76408,0 1.37198,0.90909 1.37198,3.63635 0,1.82376 -1.05966,5.91745 -2.13048,9.71554 l -6.52538,21.544857 c -1.06524,3.954257 -3.6475,11.544867 -3.6475,17.004977 0,10.016707 7.59062,15.025067 14.26657,15.025067 24.33904,0 34.91346,-29.447787 38.4048,-37.94191 l 0.30119,0.301171 c -0.45734,1.67317 -2.5767,10.624622 -2.5767,15.181222 0,13.05073 5.82822,22.459517 18.57777,22.459517 36.94917,0 57.12202,-74.695881 31.61733,-74.695881" | |
| id="path720" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"/> | |
| </svg> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| <script> | |
| const paths = d3.selectAll("svg path").data(['n', '|', 'w']); | |
| const bounce = () => { | |
| d3.select(d3.event.target) // d3.select(this) does not work in arrow functions | |
| .transition() | |
| .duration(300) | |
| .ease(d3.easeCubicOut) | |
| .attr("transform", "translate(0,-30)") | |
| .transition() | |
| .duration(500) | |
| .ease(d3.easeCubicIn) | |
| .attr("transform", "translate(0,0)") | |
| }; | |
| paths.on("mouseover", bounce); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment