Animating text inspired by this amazing codepen from Blake Bowen.
Github page for startext.js: https://github.com/EE2dev/startext
Observable to follow...
Last active
June 10, 2018 17:57
-
-
Save EE2dev/66c18f6626e186db0c252a57fceb5327 to your computer and use it in GitHub Desktop.
OpenVis Conf Intro
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
| license: mit |
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> | |
| <meta charset="utf-8"> | |
| <head> | |
| <title>animated intro</title> | |
| <link href="https://ee2dev.github.io/startext/lib/startext-v12.css" rel="stylesheet"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> | |
| <script src="https://ee2dev.github.io/startext/lib/startext-v12.min.js"></script> | |
| </head> | |
| <body> | |
| <aside style="display:none"> | |
| <img id="star-texture" src="https://ee2dev.github.io/startext/lib/stars-02.png"> | |
| <img id="star-texture-white" src="https://ee2dev.github.io/startext/lib/stars-02w.png"> | |
| </aside> | |
| <script> | |
| var myIntro = []; | |
| var page1 = ["Come and join us", "on May 14th-16th 2018", "and attend", "the OpenVis Conf in Paris, France"]; | |
| page1.defaultLine = startext.STARS; | |
| myIntro.push(page1); | |
| var page2 = ["You will learn", "from the best", "about the practice of ", "visualizing data with open source tools on the web"]; | |
| page2.defaultLine = startext.ROTATION; | |
| myIntro.push(page2); | |
| var page3 = ["An amazing collection", "of world-renowned experts", "cover topics combining the best of visualization with", "machine learning, climate change, augmented reality and much more!"]; | |
| page3.defaultLine = startext.SCALE; | |
| myIntro.push(page3); | |
| var page4 = ["As if that's not enough", "there will also be", "workshops about", "observable, picasso, bokeh, D3.js, vega-light and other topics!"]; | |
| page4.defaultLine = startext.STARS; | |
| myIntro.push(page4); | |
| var myChart = startext.chart(myIntro); | |
| d3.select("body") | |
| .append("div") | |
| .attr("class", "chart") | |
| .call(myChart); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment