Mercurial Mercurial > periplus / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
toolkit/javascript/d3/examples/hello-world/hello-transition.html
author Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
Thu, 10 Apr 2014 14:20:23 +0200
changeset 47 c0b4a8b5a012
permissions -rw-r--r--
add toolkit.html + démonstrateurs

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, transition!</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

body {
  font: 14px Helvetica Neue;
  text-rendering: optimizeLegibility;
  margin: 1em;
}

div {
  font-size: 42px;
  margin-top: .5em;
  background-color: steelblue;
  color: white;
  text-align: right;
}

    </style>
  </head>
  <body>
    Your lucky number is:<br>
    <div></div>
    <script type="text/javascript">

transform();

function transform() {
  d3.select("div")
      .style("width", "0%")
      .style("background-color", "steelblue")
      .text("hello\u00a0")
    .transition()
      .ease("bounce")
      .duration(2000)
      .style("width", "100%")
      .style("background-color", "brown");
}

window.addEventListener("keypress", transform, false);

    </script>
  </body>
</html>
periplus