MOTION BLUR EFFECT USING SVG FILTERS

Author:

  • Damián Muti
  • July 26, 2017

Made with:

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js, slick.js)

About the code:

This is an amazing experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: Yes

Dependencies: slick.css, jquery.js, slick.js

Download Demo and Code