LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

        
    
        
    
    
    

    

Blur Transition SVG Filter + CSS Transition (best in Chrome)

GO!
CSS
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);

*{box-sizing: border-box;}
body{ background-color:#e6e6e6;font-family: 'Oswald', sans-serif;}

#wrap-animate{
    display:border-box;
    width:600px; 
    margin:0px auto;
}

.animate-box{
    position:relative;
    width:100%;
    margin-bottom:80px;
}
.animate-box h3{
    margin-bottom:20px; 
    font-size:1.6em;
}
.animate-box h3 small{
    font-weight:300; 
    font-style:italic;
}
.animate-box a{
    margin-bottom:20px;
    background:#55F;
    color:#fff;
    border-radius:5px; 
    padding:8px;
    font-weight:300;
    display:inline-block;
    cursor:pointer;
}
.box{
    -webkit-filter: url("#blur");
    filter: url("#blur");
    background-color:#F08; 
    width:50px;
    height:50px;
    position:absolute;
    left:0;
    border-radius:10px;
    transform: scale(1) translate3d(0,0,0);
}
.box.animate{
    left:100%;
    transform: scale(1) translate3d(0,0,0);
}

.animation{transition: all .3s cubic-bezier(.1,1,.7,1);}

JS
var filters = document.querySelector(".filters"),
    defs = filters.querySelector("defs"),
    blur = defs.querySelector("#blur"),
    start = null,
    animationActive = false,
    animDuration = null,
    blurFilter = blur.firstElementChild;

    function setBlur(x, y) {
    	blurFilter.setAttribute("stdDeviation", x + "," + y);
    }

    function microtime(get_as_float) {
     var now = new Date().getTime() / 1000;
     var s = parseInt(now, 10);
     return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
    }

    function stepMotionBlur(duration) {
    	if (!animDuration)
      	animDuration = duration;
      if (!start)
      	start = microtime(true);
      var nowTime = microtime(true);
      var progress = nowTime - start;
      var percProgress = progress * 100 / animDuration * 10;

      if (percProgress > .8) {
      	setBlur(10 - (percProgress * 5), 0);
      } else {
      	setBlur(10 + (percProgress * 5), 0);
      }
      if (percProgress >= 1) {
      	setBlur(0, 0);
        start = null;
        animationActive = false;
        return;
      }
      requestAnimationFrame(stepMotionBlur);
   }

   $(function() {
   	$('a').on('click', function() {
    	if (!animationActive) {
    		animationActive = true;
    	  $(this).next().toggleClass('animate');
     	 stepMotionBlur(300);
    	}
    });
   });
Host Instantly Drag and Drop Website Builder

 

Description

Little experiment for create a blur movement effect using SVG filter and CSS transition.
Term
Mon, 11/27/2017 - 22:09

Related Codes

Pen ID
Pen ID
Pen ID