Best jQuery Core Java Script Plugins & Tutorials with Demo

Favloader : JavaScript library for Animated Loading Favicon

Favloader : JavaScript library for Animated Loading Favicon

favloader is a vanilla JavaScript library for loading animation in favicon that work when tab is not active.

Treeviz : Represent Tree Diagrams with JavaScript

Treeviz : Represent Tree Diagrams with JavaScript

Treeviz is a javascript module aims at providing an easy interface in order to represent tree diagrams on screen with the ability to handle dynamic data flows. The data format must be JSON.

Interactive Animated Landscape with JavaScript

Interactive Animated Landscape with JavaScript

Today we are going to explore a playful animated landscape with a psychedelic look. The idea is to show how an experimentation on art and design with a generative process can lead to interesting interactive visuals which can be used in a variety of mediums like web, print, illustration, VJing, installations, games and many others. We made 3 variants of the landscape to show you how small changes in parameters can change a lot in visuals.

The demos are made with three.js and the animations and colors are controlled in a custom GLSL shader. For the letter animations we are using TweenMax.

melonJS : A fresh & lightweight HTML5 Game Engine

melonJS : A fresh & lightweight HTML5 Game Engine

melonJS is an open source HTML5 game engine that empowers developers and designers to focus on content.The framework provides a collection of composable entities and support for a number of third-party tools.

Features:
  • A fresh & lightweight 2D sprite-based engine
  • Standalone library (does not rely on anything else, except a HTML5 capable browser)
  • Compatible with most major browsers (Chrome, Safari, Firefox, Opera, IE) and mobile devices
  • Device motion & accelerometer support
  • High DPI & auto scaling
  • Multi-channel HTML5 audio support and Web Audio on supported devices
  • Lightweight physics implementation to ensure low cpu requirements
  • Polygon (SAT) based collision algorithm for accurate detection and response
  • Fast Broad-phase collision detection using spatial partitioning
  • 3rd party tools support for physic body definition (PhysicEditor, Physic Body Editor)
  • Advanced math API for Vector and Matrix
  • Tween Effects
  • Transition effects

Rallax.js : Dynamic Parallax Scrolling Effects Library

Rallax.js : Dynamic Parallax Scrolling Effects Library

Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.

Ambient Canvas Backgrounds with HTML5 Canvas API

Ambient Canvas Backgrounds with HTML5 Canvas API

Today we’ll be exploring some ambient webpage background animations. The idea here was to create a collection of animations that are interesting to look at without being (too) distractive, and could be easily applied to the background of a webpage. Each animation is created using vanilla (es6+) JavaScript with the Canvas API.

Store.js : Powerful API for LocalStorage

Store.js : Powerful API for LocalStorage

Store.js is local storage using a simple but powerful API.

Audio Recorder Polyfill

Audio Recorder Polyfill

MediaRecorder polyfill to record audio in Edge and Safari 11.

  • Spec compatible. In the future when all browsers will support MediaRecorder, you will just remove polyfill.
  • Small. 1 KB (minified and gzipped). No dependencies. It uses Size Limit to control size.
  • One file. In contrast to other recorders, this polyfill uses “inline worker” and don’t need a separated file for Web Worker.

Motion Transition Effect CSS & TweenMax

Motion Transition Effect CSS & TweenMax

Today we’d like to share a little speedy motion effect with you. The idea is based on the Dribbble shot Ping Pong Slow Motion by Gal Shir where you can see a ping pong ball being shot from one racket to the other. The motion in the animation is enhanced by squeezing the ball and making some background stripes’ height pulsate. This is exactly what we want to do in a slideshow transition: we’ll squeeze the image and add some background effect. Additionally, we’ll make the letters of the title fly away consecutively.

Envy : Bring Charts to Terminal

Envy : Bring Charts to Terminal

Envy is a bring charts to terminal.