HTML5 and JavaScript animation that shows the molecular structure of Caffeine. The double bonds in Caffeine are displayed by darkening the lines.
A Pen by Tomasz Foster on CodePen.
Created
March 4, 2014 15:01
-
-
Save anonymous/9348010 to your computer and use it in GitHub Desktop.
A Pen by Tomasz Foster.
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
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> | |
| <div class="caffeine"> | |
| <div class="startText"> | |
| <p>move your mouse here</p> | |
| <img src="https://raw.github.com/TomaszFoster/tomaszfoster.github.io/master/img/arrow.png" class="arrow"> | |
| </div> | |
| <div id="container" style="height:200px;width:200px"></div> | |
| <h2>caffeine</h2> | |
| </div> | |
| <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script> |
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
| /*This JavaScript is an animation that, upon mouseover, will reveal | |
| a caffeine molecule, complete with darker bonds that signify the | |
| double bonds. | |
| One improvement I'd like to make later would be to assign the ending locations | |
| geometrically, versus using key-value pairs for the ending locations. | |
| This would also allow me to dynamically name and create tweens based | |
| upon the number of keys. Another day... */ | |
| //first, let's set the stage | |
| var stage = new Kinetic.Stage({ | |
| container: 'container', | |
| width: 200, | |
| height: 200 | |
| }); | |
| //create a layer in this stage | |
| var layer = new Kinetic.Layer({ | |
| y: -30, | |
| x: 10 | |
| }); | |
| //hexagon numbers | |
| var h1 = 34.4; | |
| var h2 = 20; | |
| //pentagon numbers | |
| var p1 = 12.3; | |
| var p2 = 38; | |
| var p3 = 23.5; | |
| var p4 = 32.4; | |
| /* here are the key-value pairs for the ending coordinates.*/ | |
| var points = {1:[50, 260, 50, 220], | |
| 2:[50, 220, 50+h1, 220-h2], | |
| 3:[50+h1, 220-h2, 50+(2*h1), 220], | |
| 4:[50+(2*h1), 220, 50+(2*h1), 260], | |
| 5:[50+(2*h1), 260, 50+h1, 260+h2], | |
| 6:[50+h1, 260+h2, 50, 260], | |
| 7:[50, 220, 50-h1, 220-h2], | |
| 8:[50+h1, 220-h2, 50+h1, 180-h2], | |
| 9:[50, 260, 50-h1, 260+h2], | |
| 10:[50+h1, 260+h2, 50+h1, 300+h2], | |
| 11:[50+(2*h1), 260, 50+(2*h1)+p2, 260+p1], | |
| 12:[50+(2*h1), 220, 50+(2*h1)+p2, 220-p1], | |
| 13:[50+(2*h1)+p2, 220-p1, 50+(2*h1)+p2+p3, 240], | |
| 14:[50+(2*h1)+p2+p3, 240, 50+(2*h1)+p2, 260+p1], | |
| 15:[50+(2*h1)+p2, 220-p1, 50+(2*h1)+p2+p1, 220-p2-p1] | |
| }; | |
| //create key-value pairs for the tweens | |
| var tweens = {}; | |
| /*now, let's make each 'stick' and assign it (almost) the same | |
| properties, only variation is in the starting points, where I shift | |
| them each by 5 pixels, since they each have a strokeWidth of 5 */ | |
| var list = {}; | |
| for(i=0;i<15;i++){ | |
| var temp = 'stick'+(i+1); | |
| list[temp] = new Kinetic.Spline({ | |
| points: [60+(i*5), 130, 60+(i*5), 90], //here's the only difference | |
| tension: 0.5, | |
| opacity: 0.6, | |
| stroke: '#FFF', | |
| strokeWidth: 5, | |
| lineCap: 'round' | |
| }); | |
| //add each new layer | |
| layer.add(list[temp]); | |
| var temp = 'stick'+i+'Tween'; | |
| //the tweens with single bonds depicted with opacity = 0.6 | |
| if (i!=3 && i!=7 && i!=8 && i!=13){ | |
| tweens[temp] = new Kinetic.Tween({ | |
| node: list['stick'+(i+1)], | |
| duration: 1, | |
| easing: Kinetic.Easings.EaseOut, | |
| y: -100, | |
| opacity: 0.5, | |
| points: points[i+1] | |
| }); | |
| }else{ | |
| //the tweens with double bonds depicted with opacity = 1.0 | |
| tweens[temp] = new Kinetic.Tween({ | |
| node: list['stick'+(i+1)], | |
| duration: 1, | |
| easing: Kinetic.Easings.EaseOut, | |
| y: -100, | |
| opacity: 1, | |
| points: points[i+1] | |
| }); | |
| } | |
| } | |
| //now add all the layers to the stage | |
| stage.add(layer); | |
| var keys = Object.keys(tweens); | |
| //on mouseover, play all the tweens | |
| stage.getContainer().addEventListener('mouseover', function() { | |
| for(i=0;i<15;i++){ | |
| tweens[keys[i]].play(); | |
| } | |
| }); | |
| //on mouseout, reverse the tweens | |
| stage.getContainer().addEventListener('mouseout', function() { | |
| for(i=0;i<16;i++){ | |
| tweens[keys[i]].reverse(); | |
| } | |
| }); | |
| // here's the transform for the alternative text | |
| $("#container").hover( | |
| function(){ | |
| $(".altText").animate({ color: "#CCC" }, 2000); | |
| $(".startText").animate({ color: "#301E12" }, 1000); | |
| $(".arrow").animate({opacity: 0}, 1000); | |
| }, | |
| function(){ | |
| $(".altText").animate({ color: "#301E12" }, 1000); | |
| } | |
| ); | |
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
| body { | |
| background: #301E12; | |
| } | |
| .caffeine { position: absolute; top:50%; left:50%; margin:-200px 0 0 -100px; } | |
| .caffeine h2 { | |
| font-family: helvetica; | |
| font-size: 50px; | |
| color:#DDD; | |
| text-align: center; | |
| text-shadow: 2px 2px #666; | |
| margin-top:0px; | |
| } | |
| .caffeine .altText { | |
| font-family: helvetica; | |
| font-size: 20px; | |
| color:#301E12; | |
| text-align: center; | |
| } | |
| .startText { | |
| font-family: helvetica; | |
| font-size: 15px; | |
| color:#CCC; | |
| text-align: center; | |
| margin-right: 50px; | |
| } | |
| .startText img { | |
| position: absolute; | |
| margin-left: 100px; | |
| margin-top: -40px; | |
| } | |
| .altText { | |
| margin-top:-20px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment