photozoom_block

blocks "port" https://github.com/nthitz/photozoom/

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  <style>
  </style>
</head>

window.onmousemove = mousemove;
    window.onresize = resize;

function imageLoaded() {
      // document.body.appendChild(img);
      resize();
      d3.timer(animate);

}
    var photoW = 1440;
    var photoH = 900;
    var aspectRatio = photoW / photoH;
    var width = window.innerWidth;
    var height = window.innerHeight;
    var easing = d3.ease('cubic-in-out')
    var frames = 50;
    var globalTicker = 0;

var rotationAmountDegrees = 6.4;
    var rotationAmount = Math.PI * rotationAmountDegrees / 180;

var translateXScale = d3.scale.linear()
    var translateYScale = d3.scale.linear()

var scaleXScale = d3.scale.linear()
    var scaleYScale = d3.scale.linear()

var rotationScale = d3.scale.linear().range([0, rotationAmount]);

var mouse = [0,0]
    var fromMouse = false;

var saving = false;

// set scales

var zoomedInWidth = width * 0.456;
      var zoomedInHeight = height* 0.46;
      // var zoomedInHeight = 1 / aspectRatio* zoomedInWidth;

var translateX = width * 0.36;
      var translateY = height * 0.21

var zoomInAmountX = width / zoomedInWidth;
      var zoomInAmountY = height / zoomedInHeight;

var translateXAmount = zoomInAmountX * translateX;
      var translateYAmount = zoomInAmountY * translateY;

translateXScale.range([0, -translateXAmount])
      translateYScale.range([0, -translateYAmount])

scaleXScale.range([1, zoomInAmountX])
      scaleYScale.range([1, zoomInAmountY])

}
    function animate() {
      ctxt.clearRect(0,0, width, height);
      ctxt.globalCompositeOperation = "multiply"
      var globalPct = globalTicker / frames;
      if(fromMouse) {
        globalPct = mouse[0] / (window.outerWidth - 100);
        while(globalPct > 1) { globalPct -= 1}
      }
      globalPct = easing(globalPct)
      var ticker = globalPct * frames;
      var iterations = 8
      for(var i = 0; i < iterations; i++) {
        ctxt.save();
        var pct = (ticker + ((i - ~~(iterations / 2)) * 1.5)) / frames;
        while(pct > 1) { pct -= 1}
        while(pct < 0) { pct += 1}
        ctxt.globalAlpha = 0.2
        ctxt.translate(
          translateXScale(pct), translateYScale(pct)
        )
        ctxt.scale(scaleXScale(pct), scaleYScale(pct))
        ctxt.translate(width/2, height/2)
        ctxt.rotate(rotationScale(pct))
        ctxt.drawImage(img, -width/2,-height/2, width, height);

ctxt.restore();
      }

globalTicker += 1;
      if(globalTicker > frames) {
        globalTicker = 0;
      }
      if(saving) {
        saveFrame();
        if(globalPct >= 1) {
          d3.select('canvas').remove();
          d3.select('body,html').style('overflow', 'auto')
          return true;
        }
        return false;
      }
    }

function saveFrame() {
      d3.select('body').append('a')
        .attr('title', globalTicker)
        .attr('download', globalTicker)
        .attr('href', canvas.toDataURL('image/jpeg', 1.0))
        .text(globalTicker)
        .style({
          color: 'white',
          "font-size": "20px",
          "margin": "1em",
          "display": "block"
        })
    }
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js