Scroller Responsive Effects

_.md

[ Launch: Tributary inlet ] 6088249 by roundrobin

config.json

{"description":"Scroller Responsive Effects","endpoint":"","display":"svg","public":true,"require":[],"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 scroll = function(){
  
  
  if(index % 80 == 0){
    var circle = d3.select('#circle-1');	
    console.log('i am scrolling');
    
    
    var color = toogleColor == 1 ?  easeColor1 : easeColor2;  

    circle
    .transition()
    .duration(500)
    .ease('circle')
    .attr('fill', color);
    
    toogleColor *= -1;
    
    
  }
  
  index++;
};



var svg = d3.select('svg')
  .attr('width', size+'px')
  .attr('height',size+'px')
  .style('background', '#1B9C97')
  .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"
});