Skip to content

Instantly share code, notes, and snippets.

@poezn poezn/_.md

Created Jul 17, 2014
Embed
What would you like to do?
depth blur prototype
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
{"description":"depth blur prototype","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"assets.svg":{"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"controls":{},"inline-console":true,"thumbnail":"http://i.imgur.com/SRr2Kpf.png"}
var currentLevel = 1;
function renderBlur() {
g.selectAll(".blur")
.transition()
.duration(500)
.attr({
"stdDeviation": function(d, i) {
if (i+1 != currentLevel) {
return Math.abs(currentLevel - (i + 1)) * 10;
}
return 0;
}
})
};
renderBlur();
d3.selectAll(".level1 rect")
.on("click", function() {
console.log(1); currentLevel = 1; renderBlur();
d3.selectAll(".level1 rect").transition().style("opacity", 1)
d3.selectAll(".level2 rect, .level3 rect").transition().style("opacity", 0.5)
});
d3.selectAll(".level2 rect")
.on("click", function() {
console.log(2); currentLevel = 2; renderBlur();
d3.selectAll(".level2 rect").transition().style("opacity", 1)
d3.selectAll(".level1 rect, .level3 rect").transition().style("opacity", 0.5)
});
d3.selectAll(".level3 rect")
.on("click", function() {
console.log(3); currentLevel = 3; renderBlur();
d3.selectAll(".level3 rect").transition().style("opacity", 1)
d3.selectAll(".level1 rect, .level2 rect").transition().style("opacity", 0.5)
});
#display {
background-color: #FFF;
}
.level1 {
fill: #4A90E2;
}
.level2 {
fill: #F5A623;
}
.level3 {
fill: #B8E986;
}
.level1 rect {
filter: url(#svgBlur1);
}
.level2 rect {
filter: url(#svgBlur2);
}
.level3 rect {
filter: url(#svgBlur3);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.