<input id="blur-on" type="checkbox" checked /><label for="blur-on"> Motion Blur</label> <br />
<input id="image-on" name="mode" type="radio" /><label for="image-on"> Use Image</label>
<input id="text-on" name="mode" type="radio" checked /><label for="text-on"> Use Text</label>
<div class="object">
<div class="blur-outer">
<div class="blur-inner">
<span class="test-text"><span class="small">Motion</span> <br/> Blur</span>
<img class="test-image" src="http://lorempixel.com/200/200" alt="" />
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur id="blur-filter" in="SourceGraphic" stdDeviation="12,0" />
</filter>
</defs>
</svg>
debug=false
svg
display none
body
background black
font-size 14px
font-weight bold
color white
overflow hidden
.object
position absolute
left 40%
top 40%
text-transform uppercase
padding 20px
font-size 80px
if debug
background rgba(255,0,0,0.2)
#blur-on:checked~.object>.blur-outer
filter url('#blur')
.test-image
display none
#image-on:checked~.object
.test-image
display block
.test-text
display none
.blur-outer
transform-origin 50% 50%
if debug
background rgba(0,255,0,0.2)
.blur-inner
transform-origin 50% 50%
animation text-gfx-anim 3s
animation-fill-mode forwards
if debug
background rgba(0,0,255,0.2)
.small
font-size 0.69em
input
margin 10px
View Compiled
$(document).ready(function(){
var $obj=$(".object")
,$outer=$obj.children(".blur-outer")
,$inner=$outer.children(".blur-inner")
,blur=$("#blur-filter").get(0)
;
function setBlur(v){
blur.setAttribute("stdDeviation", v);
}
function setMotionBlur(angle,dist){
TweenMax.set($outer,{
rotation:angle+"rad",
force3D:true
})
TweenMax.set($inner,{
rotation:-angle+"rad",
force3D:true
})
setBlur(dist+",0");
}
function anim(){
TweenMax.to($obj,0.2+(Math.random()*0.4),{
x:((Math.random()*200)-100)+"%",
y:((Math.random()*200)-100)+"%",
ease:Back.easeOut,
onComplete:anim
})
}
anim();
function getPos(){
return $obj.position();
}
var lastPos=getPos();
function update(){
var pos=getPos();
var dx=pos.left-lastPos.left;
var dy=pos.top-lastPos.top;
var speed=Math.sqrt((dx*dx)+(dy*dy));
var angle=Math.atan2(dy,dx);
setMotionBlur(angle,speed);
//setBlur(speed+","+0);
lastPos=pos;requestAnimationFrame(update);
}
update();
})
This Pen doesn't use any external CSS resources.