gobstopper

_.md

[ Launch: gobstopper ] 6360876 by gelicia

config.json

{"description":"gobstopper","endpoint":"","display":"div","public":true,"require":[{"name":"parallax","url":"https://raw.github.com/wagerfield/parallax/master/deploy/parallax.min.js"}],"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,"thumbnail":"http://i.imgur.com/lxxFbQL.png"}

inlet.js

var display = d3.select("#display");
var scene = display.append("ul").attr("id", "scene");
var sceneSize = {height: 400, width : 700};

var layer0 = scene.append("li").attr("data-depth" , 0.00).classed("layer", true).append("svg");
var layer1 = scene.append("li").attr("data-depth" , 0.20).classed("layer", true).append("svg");
var layer2 = scene.append("li").attr("data-depth" , 0.40).classed("layer", true).append("svg");
var layer3 = scene.append("li").attr("data-depth" , 0.60).classed("layer", true).append("svg");
var layer4 = scene.append("li").attr("data-depth" , 0.80).classed("layer", true).append("svg");
var layer5 = scene.append("li").attr("data-depth" , 1.00).classed("layer", true).append("svg");

//sky
layer0.append("rect").attr({
  x: 37,
  y: 7,
  height: sceneSize.height,
  width: sceneSize.width,
  fill: "#BAEBFF"
});
//sun
layer1.append("circle").attr({
  cx: 531,
  cy: 182,
  r: 96,
  fill: '#FFD600'
});

//clouds
drawCloud(layer2, 92, 83);
drawCloud(layer3, 347, 67);
drawCloud(layer4, 213, 96);

//ground
layer5.append("rect").attr({
  x: 37,
  y: 267, 
  width : sceneSize.width + 143,
  height: 164,
  fill : "#3C991F"
});

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);//make parallax center at middle of scene instead of screen width/height? 

//hide my shame
function drawCloud(layer, x, y){
  var cloud1 = layer.append("g").attr("transform", "translate(" + x + "," + y + ")");
  
//cloud1
cloud1.append("circle").attr({
  cx: 15,
  cy: 26,
  r: 56,
  fill: '#E9CAE8'
});

cloud1.append("circle").attr({
  cx: 108,
  cy: 27,
  r: 46,
  fill: '#FAE1F9'
});

cloud1.append("circle").attr({
  cx: 72,
  cy: 54,
  r: 45,
  fill: '#FFCCE4'
});
  

}