Best jQuery Core Java Script Plugins & Tutorials with Demo

Inspiration for Search UI Effects with CSS & JavaScript

Inspiration for Search UI Effects with CSS & JavaScript

Today we’d like to share a couple of ideas for search interaction effects with you. Mainly, we’d like to provide you with some inspiration for how to show the search interface in an interesting way. Maybe you’ve seen some modern animations for showing the search already, like Swiss Army Man or CMMNTY. Today we want to explore some different layouts combined with some engaging CSS animations.

Poly-Decomp.js : Decompose 2D polygons into convex pieces

Poly-Decomp.js : Decompose 2D polygons into convex pieces

Poly-Decomp.js is a library for decomposing 2D polygons into convex regions.

StoryMapJS : Maps that tell Stories

StoryMapJS : Maps that tell Stories

StoryMapJS is a simple tool to help you tell stories with maps. If you want information on creating JSON with your own code and embedding it, see the “Advanced” documentation on the StoryMap website.

TimelineJS v3: A Storytelling Timeline built in JavaScript

TimelineJS v3: A Storytelling Timeline built in JavaScript

TimelineJS 3 is a rewrite of the popular Timeline JS software. Please be clear that this is software which “does” the same thing, but it isn’t the same software, so some details will vary.

Particler : JavaScript Animated Canvas Particles Plugin

Particler : JavaScript Animated Canvas Particles Plugin

Particler is a pure javascript plugin which creates a canvas-particles based on your image. You can easy set up behavior of particles and make awesome stuff.

Features:

  • No dependencies — pure javascript;
  • Simple usage;
  • Easy customisation;
  • 15 options to set up particles behavior;
  • Small size — only 7kb minified, 3kb gzipped;
  • Good documentation and examples;
  • 3 built-in particle shapes.

Cannon.js : JavaScript 3D Physics Engine

Cannon.js : JavaScript 3D Physics Engine

A lightweight 3D physics engine written in JavaScript. Inspired by three.js and ammo.js, and driven by the fact that the web lacks a physics engine, here comes cannon.js. The rigid body physics engine includes simple collision detection, various body shapes, contacts, friction and constraints.

Features:

  • Rigid body dynamics
  • Discrete collision detection
  • Contacts, friction and restitution
  • Constraints
    • PointToPoint (a.k.a. ball/socket joint)
    • Distance
    • Hinge (with optional motor)
    • Lock
    • ConeTwist
  • Gauss-Seidel constraint solver and an island split algorithm
  • Collision filters
  • Body sleeping
  • Experimental SPH / fluid support
  • Various shapes and collision algorithms

Muuri : Filterable & Draggable Grid Layouts with JavaScript

Muuri : Filterable & Draggable Grid Layouts with JavaScript

Muuri creates responsive, sortable, filterable and draggable grid layouts. Yep, that’s a lot of features in one library, but we have tried to make it as tiny as possible. Comparing to what’s out there Muuri is a combination of Packery, Masonry, Isotope and jQuery UI sortable.

iTyped : Dead simple Javascript Animated Typing

iTyped : Dead simple Javascript Animated Typing

iTyped is a dead simple Javascript animated typing, with no dependencies. iTyped has a tiny size and easy to use.

Object Fit Images : JavaScript Polyfill for Object-fit & Object-position

Object Fit Images : JavaScript Polyfill for Object-fit & Object-position

Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, etc.

Features:

  • Fast and lightweight
  • No additional elements are created or necessary
  • Once set, position is taken care by the browser
  • srcset support
  • You can still access/change src and srcset properties and attributes: img.src = 'other-image.jpg'

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

Little Fragments: Simple Image Poster Effect with CSS & JavaScript

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. The pieces are very small which creates an interesting and creative look. We’ll be showing you today how to create a similar effect with CSS and some JavaScript.



Best jQuery websites design awards