Image Distortion Effects with SVG Filters

Image Distortion Effects with SVG Filters

Today we would like to share three animated distortion effects by SVG filters that we apply to an image when hovering a text link. We use feTurbulence and feDisplacementMap to create different kinds of fragment and wave-like distortions. These kind of effects have become quite popular and there are many variations.

Iro.js : HSV color picker widget for JavaScript

Iro.js : HSV color picker widget for JavaScript

Iro.js is a HSV color picker widget for JavaScript with a modern, SVG-based user interface.

Features:

  • Simple: Low friction API, with robust support for hex, rgb, hsl and hsv color formats.
  • Extendable: Tweak the library to your requirements with Plugins and custom UI elements
  • Consistent behaviour: Works across all modern browsers and devices, including touchscreens.
  • Small footprint: 7kb minified and gzipped, with absolutely no jQuery or extra css/images in sight.
  • Great design: The controls are designed to be intuitive and responsive, plus they’re built with SVG so they look super crisp at any resolution.
  • Transparency support: Optional transparency slider with the transparency plugin.

PLON : Simple SCSS & JS framework based on jQuery

PLON : Simple SCSS & JS framework based on jQuery

PLON is a simple SCSS & JS framework based on jQuery and Gulp.

  1. This framework was created for front-end developers who don’t want any base visual styling, for people who likes to start from a blank page and have full controll over the effect of their work.
  2. SCSS structure and class naming encourages developers to use objective CSS (OOCSS).
  3. jQuery plugins are very easy to install and to debug.
  4. Provides each plugin as a separate file – so you don’t have to use unnecessary code.

Frappe DataTable : A Simple Modern and Interactive Datatable Library

Frappe DataTable : A Simple Modern and Interactive Datatable Library

Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. Originally built for ERPNext, it can be used to render large amount of rows without sacrificing performance and has the basic data grid features like inline editing and keyboard navigation. It does not require jQuery, like most data grids out there.

Maps Journey Replay : JavaScript Library

Maps Journey Replay : JavaScript Library

Javascript Library that loads a journey JSON object (coordinates + timestamp) and creates a replay on a map.

AutoNumeric.js : Automatically Format your Numbers & Currencies

AutoNumeric.js : Automatically Format your Numbers & Currencies

AutoNumeric is a Javascript library that provides live as-you-type formatting for international numbers and currencies.

viewRecorder : jQuery Plugin for Record User Activity

viewRecorder : jQuery Plugin for Record User Activity

viewRecorder is Jquery Plugin purpose for recording activity when user visit a website.

QuixNav – Bootstrap Admin Dashboard Navigation

QuixNav - Bootstrap Admin Dashboard Navigation

QuixNav is a bootstrap admin dashboard navigation menu.QuixNav have a different menu styles :

  • Modern
  • Compact
  • Mini
  • Vertical
  • Horizontal

Geocomplete : jQuery plugin for Google Maps Autocomplete

Geocomplete : jQuery plugin for Google Maps Autocomplete

Geocomplete is a simple plugin for Google Maps Autocomplete.

Vidbacking : jQuery Video Background Plugin

Vidbacking : jQuery Video Background Plugin

Vidbacking is a small jQuery plugin to simplify the process of showing HTML5 video as background. You can use this for showing a video file or Youtube video on whole page background or to show the video as the background of a <div>, <section>, like elements.

Features:

  • Cross Browser Video Background Plugin.
  • Support mp4, webm video files.
  • Support Youtube video.
  • Very small file size (4kb total).
  • Easy to use.
  • Can be used for both page background or for an element background.
  • Image fallback when video not supported.
  • Pause video when out of viewport.
  • Multiple instances on same page possible.
  • Device friendly, responsive.