Mousing near the right edge scrolls right; mousing near the left edge scrolls left.
Last active
May 17, 2016 17:00
-
-
Save tophtucker/8870d312ee3ce9442a48a79d684ce056 to your computer and use it in GitHub Desktop.
Photoscroll
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| .gallery { | |
| overflow-x: scroll; | |
| } | |
| .gallery-inner { | |
| width: 300%; | |
| height: 100%; | |
| } | |
| .gallery-inner img { | |
| width: 100%; | |
| } | |
| </style> | |
| <body> | |
| <div class="gallery"> | |
| <div class="gallery-inner"> | |
| <img src="panorama.jpg"> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="http://d3js.org/d3.v4.0.0-alpha.35.min.js" charset="utf-8"></script> | |
| <script> | |
| var gallery = document.querySelector('.gallery') | |
| // scale from mouse position as fraction of gallery width | |
| // to how many pixels to scroll per render frame | |
| var scrollScale = d3.scaleLinear() | |
| .domain([0,.2,.8,1]) | |
| .range([-100,0,0,100]) | |
| // default to stationary | |
| var mousePosition = .5 | |
| // on mousemove, save mouse position fraction | |
| d3.select(gallery).on('mousemove', function() { | |
| mousePosition = d3.mouse(this)[0] / this.offsetWidth | |
| }) | |
| // scroll according to last known mouse position | |
| d3.timer(function() { | |
| gallery.scrollLeft += scrollScale(mousePosition) | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment