[ Launch: blurrrrrrrrrrrr FILTER fade ] 5584493 by enoex
[ Launch: blurrrrrrrrrrrr FILTER fade ] 5422491 by enoex
[ Launch: blurrrrrrrrrrrr FILTER fade ] 5422471 by enjalot
[ Launch: blurrrrrrrrrrrr FILTER circle ] 5422321 by enoex
[ Launch: blurrrrrrrrrrrr FILTER ] 5418074 by enoex
[ Launch: blurrrrrrrrrrrr FILTER ] 5418024 by enoex
[ Launch: Tributary inlet ] 5417941 by enoex
-
-
Save erikhazzard/5584493 to your computer and use it in GitHub Desktop.
Blur Fade Effect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"Blur Fade Effect","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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Overview: There are two images, one blurred and one not blurred. | |
// To acheive the unblur effect, a clipping mask with a bunch of circles | |
// is used on the blurred image. | |
var svg = d3.select("svg") | |
//Config | |
var circleRadius = 40; | |
var blurAmount = 5; | |
//CLIP | |
var clips = svg.append('svg:defs') | |
.append('svg:mask') | |
.attr({id: 'mask'}); | |
var addMask = function addMask(x,y){ | |
//To achieve the unblur effect, we add circles to the clip mask | |
var clip = clips.append('svg:circle') | |
.attr({ | |
cx: x, | |
cy: y, | |
r: circleRadius, | |
fill: '#ffffff', | |
'class': 'clipCircle' | |
}); | |
return clip; | |
}; | |
//Blur filter | |
var defs = svg.append('svg:defs'); | |
var filterBlur = defs.append('svg:filter') | |
.attr({ id: 'blur' }); | |
filterBlur.append('feGaussianBlur') | |
.attr({ | |
'in': "SourceGraphic", | |
'stdDeviation': blurAmount | |
}); | |
//IMAGE | |
var imageUrl = 'http://i.imgur.com/Lk4L4Pg.jpg'; | |
//Add blurred image | |
svg.append('svg:image') | |
.attr({ | |
x: 0, | |
y: 0, | |
filter: 'url(#blur)', | |
'xlink:href': imageUrl, | |
width: 800, | |
height: 500, | |
fill: '#336699' | |
}) | |
//MASK | |
// Add masked image (regular, non blurred image which will be revealed | |
var mask = svg.append('svg:image') | |
.attr({ | |
x: 0, | |
y: 0, | |
'xlink:href': imageUrl, | |
'mask': 'url(#mask)', | |
width: 800, | |
height: 500, filter: 'url(#blur2)', | |
fill: '#336699' | |
}); | |
var clicking = false; | |
var mouseMove = function move(e){ | |
//erase on mouse over | |
var x = parseInt(d3.event.pageX - 25 + circleRadius/2,10); | |
var y = parseInt(d3.event.pageY - 25 - circleRadius,10); | |
//Add mask | |
var clip = addMask(x,y); | |
var fill = '#000000'; | |
var r = 0; | |
if(clicking){ | |
var fill = '#ffffff'; | |
var r = circleRadius; | |
} | |
clip.transition().ease('quadratic') | |
.delay(400).duration(7000) | |
.attr({ | |
fill: fill, | |
r: r | |
}) | |
.each('end', function end(){ | |
this.remove(); | |
}) | |
}; | |
//attach event | |
svg.on('mousemove', mouseMove); | |
svg.on('mousedown', function(){ clicking = true; }); | |
svg.on('mouseup', function(){ clicking = false; }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment