reynish
11/5/2014 - 4:46 PM

README.md

thumbnail.png
content_copyfile_download
  • Rendered
  • Source
index.html
content_copyfile_download
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  padding: 40px;
}

h1, h2 {
  font-family: "Helvetica Neue";
  padding-bottom: 120px;
}

h2 {
  padding-bottom: 240px;
}

</style>

<div id="ElementToScroll">

  <h1>Smooth scrolling!</h1>
  
  <h2>Get ready to scroll, in 3, 2, 1…</h2>
  
  <h1>Whee!</h1>
  <h1>Whee!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!!!!!!!!!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!!!!!!!!!!!!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!!!!</h1>
  <h1>Whee!!!</h1>
  <h1>Whee!!</h1>
  
  <h2>All done!</h2>

</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

console.log(document.body.getBoundingClientRect().height)
console.log(window.innerHeight)
console.log(document.body.getBoundingClientRect().height - window.innerHeight)


d3.transition()
    .delay(1500)
    .duration(7500)
    .tween("scroll", scrollTween(document.body.getBoundingClientRect().height - window.innerHeight));

function scrollTween(offset) {
  return function() {
    var i = d3.interpolateNumber(window.pageYOffset || document.documentElement.scrollTop, offset);
    return function(t) { scrollTo(0, i(t)); };
  };
}

</script>
README.md
content_copyfile_download
  • Rendered
  • Source

This example uses a custom tween that interpolates the window’s vertical scroll offset.