Best jQuery Core Java Script Plugins & Tutorials with Demo

    Microsite Concept with Rotating Background

    Microsite Concept with Rotating Background

    An animated microsite concept with rotating background made with CSS3, jQuery and GSAP’s TweenMax. A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain. Companies have different reasons for investing in microsites. Microsites have the advantage of opening wide out-of-the-box thinking and strategy and can be used to help brands achieve a number of things. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story or to inspire a specific call-to-action.

    jQuery Plugin to Detect Device Type : js.device.selector

    jQuery Plugin to Detect Device Type : js.device.selector

    ES6 class and jQuery Plugin which get the current Device Type and Display Type of a Browser while making CSS Breakpoints available in JavaScript.

    This solution make it possible to define your breakpoints only once (in CSS) and pass them automatically into JavaScript.

    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.

    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.

    Text Trail Effect with CSS & TweenMax

    Text Trail Effect with CSS & TweenMax

    Today we’d like to share a little text effect for a slideshow with you. It’s based on the animation seen in the Dribbble shot Abstract is hiring. The idea is to show a trail of a text when transitioning between slides of a slideshow. The animations are made using TweenMax.

    PPO : A small and useful Utils library for JavaScript

    PPO : A small and useful Utils library for JavaScript

    Every frontend developer has written his own utils library, and we often write methods that are easily forgotten and highly used. ppo is a super small and useful utils library for JavaScript. It and lodash underscore lazy.js almost no coupling. I sorted out the most frequently used function functions in everyday development. These functions are almost ubiquitous in your development, and they are not found in lodash underscore.

    Fake 3D Image Effect with WebGL

    Fake 3D Image Effect with WebGL

    Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.WebGL is becoming quite popular these days as it allows us to create unique interactive graphics for the web. You might have seen the recent text distortion effects using Blotter.js or the animated WebGL lines created with the THREE.MeshLine library. Today you’ll see how to quickly create an interactive “fake” 3D effect for images with plain WebGL.