OpenVis Conf Intro by EE2dev

index.html

<!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>