Scroller Responsive Effects

_.md

[ Launch: Scroller Responsive Effects ] 6088330 by roundrobin
[ Launch: Tributary inlet ] 6088249 by roundrobin

config.json

{"description":"Scroller Responsive Effects","endpoint":"","display":"svg","public":true,"require":[{"name":"InterpolationZoom","url":"http://d3js.org/d3.interpolate-zoom.v0.min.js?83165af"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

console.log('hello');

var size = 320;

var index = 1;
var easeColor1 = "#ffffff";
var easeColor2 = "#000000";
var toogleColor = 1;
var width = 960,
    height = 500,
    radius = 10;

var p0 = [250, 200, 60],
    p1 = [560, 300, 120];


function transition(svg, start, end) {
  var center = [width / 2, height / 2],
      i = d3.interpolateZoom(start, end);

  d3.select('svg')
      .attr("transform", transform(start))
    .transition()
      .delay(250)
      .duration(i.duration * 2)
      .attrTween("transform", function() { return function(t) { return transform(i(t)); }; })
      .each("end", function() { d3.select(this).call(transition, end, start); });

function transform(p) {
    var k = height / p[2];
    return "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
  }
}



var svg = d3.select('svg')
  .attr('width', size+'px')
  .attr('height',size+'px')
  .style('background', '#1B9C97')
  .call(transition, p0, p1);


//.attr('viewBox', "0 0 "+size+" "+size)
    //.call(d3.behavior.zoom().on("zoom", scroll))

var r = 50;


var circle = svg.append("circle")
.attr({
  r: 50,
  cx: size/2,
  cy: size/2,
  fill: "#4B364B",
  id: "circle-1"
});