Motion Blur Experiment

index.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="intro">
  <h1>Motion Blur Experiment</h1>
  <h2>by <a href="http://codepen.io/lbebber">Lucas Bebber</a></h2>
  <p>Click on the button below</p>
</div>
<button class="open-modal">Open Modal</button>

<div class="modal-overlay"></div>

<div class="modal">
  <button class="close-modal">×</button>
  <div class="icon">
    <i class="fa fa-user-plus"></i> 
  </div>
  <h1>Some Title</h1>
  <input class="input-text" type="text" placeholder="some field"/>
  <input class="input-text" type="text" placeholder="some other field"/>
  <input class="input-submit" type="submit" value="Some Button"/>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">
    <defs>
      <filter id="blur">
          <feGaussianBlur id="blur-filter" in="SourceGraphic" stdDeviation="0,0" />
      </filter>
  </defs>
</svg>

Motion Blur Experiment.markdown

Motion Blur Experiment

Experiment with motion blur applied to a modal window, using SVG filters.

A Pen by Lucas Bebber on CodePen.

License.

script.js

$(document).ready(function(){
  var $obj=$(".modal")
  		  ,$overlay=$(".modal-overlay")
    ,blur=$("#blur-filter").get(0)
  ;
  
  function setBlur(v){
    blur.setAttribute("stdDeviation", v);
  }
  function getPos(){
    return $obj.position();
  }
  
  var lastPos=getPos();
  function update(){
    var pos=getPos();
    var limit=20;
    var dx=Math.min(limit,Math.abs(pos.left-lastPos.left)*0.5);
    var dy=Math.min(limit,Math.abs(pos.top-lastPos.top)*0.5);
    setBlur(dx+","+dy);
    
    lastPos=pos;
    requestAnimationFrame(update);
  }
  update();
  
  var isOpen=false;
  	function openModal(){
      /*$overlay.css({
        display:"block"
      })*/
      TweenMax.to($overlay,0.1,{autoAlpha:1});
      
      TweenMax.fromTo($obj,0.6,{y:-($(window).height()+$obj.height())},{delay:0.2,y:"0%",ease:Elastic.easeOut,easeParams:[1.1,0.7],force3D:true});
  }
  function closeModal(){
    TweenMax.to($overlay,0.1,{delay:0.55,autoAlpha:0});
    TweenMax.to($obj,0.55,{y:$(window).height()+$obj.height(),ease:Back.easeIn,force3D:true});
  }
  $(".open-modal").click(function(){
	    openModal();
  })
  $(".close-modal,.modal-overlay,.input-submit").click(function(){
    closeModal();
  })
  
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300)

font-roboto="Roboto", sans-serif
white=#eeeaea
black=#333344
grey=#cdcccc
gray=grey
red=#cc4411
  
absolute-fill()
  position absolute
  top 0
  left 0
  bottom 0
  right 0

$default-button
  background red
  border none
  color white
  font-family font-roboto
  font-weight 700
  outline none
  
*
  box-sizing border-box

a
  color inherit
  
body
  background white
  color black
  font-family roboto
  overflow hidden
  &::before
    content ""
    display none
    absolute-fill()
    background rgba(10,0,0,0.1)

h1, h2, h3
  font-weight 300
  margin 0

.icon
  font-size 60px
  color red

.modal-overlay
  background alpha(black,0.4)
  absolute-fill()
  opacity 0
  visibility hidden

  
.modal 
  background white
  text-align center
  width 230px
  height 320px
  absolute-fill()
  border-radius 3px
  margin auto
  padding 20px
  //box-shadow 0px 8px 13px 6px rgba(0,0,0,0.03);
  filter url('#blur')
  transform translate3d(0,-900%,0);
  
  h1
    margin-bottom 20px

input
  margin-bottom 10px
  padding 10px
  font-family roboto
  border none 
  width 100%

&.input-text
  background white
  border-bottom 2px solid gray
  outline none
  color black

&:focus
  border-bottom-color red

&::placeholder
  color black

&.input-submit
  @extend $default-button
  margin-top 10px

.close-modal
  background none
  border none
  position absolute
  font-size 20px
  right 10px
  top 10px
  color black
  outline none

.open-modal
  absolute-fill()
  width 200px
  height 40px
  margin auto
  @extend $default-button
  
.intro
  text-align center
  absolute-fill()
  margin auto
  height 120px
  transform translate(0,-90px)

.filters
  position absolute
  width 0
  height 0