Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save marksyzm/9527543 to your computer and use it in GitHub Desktop.
Save marksyzm/9527543 to your computer and use it in GitHub Desktop.
A Pen by Mark Elphinstone-Hoadley.
<div></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="svgBlur">
<feGaussianBlur stdDeviation="0 0" />
</filter>
</defs>
</svg>
var $filter = $("#svgBlur"),
filter = $filter.find("feGaussianBlur").get(0),
$div = $("div");
$.when($.getScript("//cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"),$.getScript("http://www.greensock.com/js/src/plugins/ThrowPropsPlugin.min.js")).done(function () {
var onUpdate = function () {
var position = $div.data("position"),
x,
y;
if (position) {
x = this.x - position.x;
y = this.y - position.y;
filter.setAttribute(
"stdDeviation",
x + " " + y
);
}
$div.data("position",{
x: this.x,
y: this.y
});
};
Draggable.create(
$div, {
type:"x,y", edgeResistance:0.65,bounds: document.body,
throwProps:true,
force3D:false,
zIndexBoost: false,
onDrag: onUpdate,
onThrowUpdate: onUpdate
}
);
});
body {
background: #222;
width: 100%;
height: 100%;
}
div {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
-webkit-filter: url(#svgBlur);
filter: url(#svgBlur);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment