A short code excerpt from this visualization I created for the longform article “Iouri Podladtchikov – You only fly once” by the Neue Zürcher Zeitung.
It's a very simple way to create an interactive animation based on video material. Hover over the image to go through the animation.
I used Final Cut Pro to crop and export the frames of a short video sequence, which I then stitched together into a single film strip using ImageMagick: convert folder-of-stills/* +append filmstrip.jpg
| <!DOCTYPE html> | |
| <head> | |
| <title>Kinetoscope</title> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style type="text/css"> | |
| .viewer { | |
| border: 5px solid #6d95ad; | |
| cursor: ew-resize; | |
| margin: 60px auto 0 auto; | |
| opacity: 0; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var frameWidth = 0, | |
| numberOfFrames = 0, | |
| posToFrame = d3.scale.linear().clamp(true); | |
| var viewer = d3.select('body').append('div') | |
| .attr('class', 'viewer'); | |
| var frames = viewer.append('img') | |
| .attr('src', 'filmstrip.jpg') | |
| .on('load', init); | |
| function init() { | |
| frameWidth = this.offsetHeight; | |
| numberOfFrames = this.offsetWidth / this.offsetHeight; | |
| posToFrame | |
| .interpolate(interpolateFrame) | |
| .domain([frameWidth, 0]) | |
| .range([0, ((numberOfFrames - 1) * -frameWidth)]); | |
| viewer | |
| .on('mousemove', onMove) | |
| .on('mouseleave', onRelease) | |
| .on('touchstart', function(){ d3.event.preventDefault() }) | |
| .on('touchmove', onMove) | |
| .on('touchend', onRelease) | |
| .style({ | |
| width: pct(100), | |
| height: px(frameWidth) | |
| }) | |
| .transition().duration(1000) | |
| .style('opacity', 1) | |
| .transition() | |
| .style({ | |
| 'border-radius': px(frameWidth), | |
| width: px(frameWidth) | |
| }) | |
| } | |
| function onMove(){ frameAtPos(d3.mouse(this)[0]) } | |
| function onRelease(){ frameAtPos(frameWidth) } | |
| function frameAtPos(pos) { | |
| frames.style('margin-left', posToFrame(pos) + 'px'); | |
| } | |
| function interpolateFrame(a, b) { | |
| return function(t) { | |
| return Math.floor(((b - a) * t)/frameWidth) * frameWidth | |
| } | |
| } | |
| function pct(val){ return val + '%'; } | |
| function px(val){ return val + 'px'; } | |
| </script> |
