HTML5 SVG超酷表单运动模糊动画特效

这是一款效果非常炫酷的HTML5 SVG表单运动模糊动画特效。这个运动模糊特效使用SVG过滤器，并结合TweenMax.js来制作打开和关闭表单时的运动模糊效果。

制作方法

HTML结构

该运动模糊特效的HTML结构中，div.modal-overlay是一个遮罩层，div.modal是表单，还有一个<svg>元素，是用于制作运动模糊的SVG过滤器。

<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>        
              

CSS样式

在CSS样式中，遮罩层开始设置透明度为0，visibility: hidden;将其隐藏，后面采用jQuery代码来动态显示它。

.modal-overlay {
  background: rgba(51,51,68,0.4);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
}                
              

表单元素.modal设置了固定大小，并使用filter属性为它绑定SVG过滤器。同时还使用translate3d将其在Y轴方向上隐藏起来。

.modal {
  background: #eeeaea;
  text-align: center;
  width: 230px;
  height: 320px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 3px;
  margin: auto;
  padding: 20px;
  -webkit-filter: url("#blur");
          filter: url("#blur");
  -webkit-transform: translate3d(0, -900%, 0);
          transform: translate3d(0, -900%, 0);
}                
              

为了制作input元素占位符效果，分别使用了不同浏览器厂商前缀的-placeholder属性。

::-webkit-input-placeholder {
  color: #334;
}
::-moz-placeholder {
  color: #334;
}
:-ms-input-placeholder {
  color: #334;
}
::placeholder {
  color: #334;
}                
              

JAVASCRIPT

在js代码中，通过setBlur(v)函数来设置动画模糊效果，参数v是通过计算得出的dx和dy值。

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();                
              

表单模态窗口的打开和关闭由TweenMax.js来完成。分别使用openModal()和closeModal()函数来实现。

var isOpen=false;
function openModal(){
  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();
});