Best jQuery Core Java Script Plugins & Tutorials with Demo

Smooth Scrolling with Inner Image Animations to a Web Page

Smooth Scrolling with Inner Image Animations to a Web Page
A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.

Darkmodejs : Utility package for managing Dark Mode on the Web

Darkmodejs : Utility package for managing Dark Mode on the Web

Darkmodejs is utility package for managing Dark Mode on the Web.Dark Mode is a feature in modern Operating Systems which allows you to change your default UI from a light to dark theme. On the web we can take advantage of this to control the theme of our website.

Utilises the matchMedia API and its listeners, in combination with the prefers-color-scheme media query, in order to fire functions whenever you’re in Dark Mode.

Bounds.js : Asynchronous Boundary Detection

Bounds.js : Asynchronous Boundary Detection

Asynchronous boundary detection – lazy-loading, infinite scroll, and more.Whether you’re lazy-loading images, implementing infinite-scroll, or avoiding an ex-lover… it’s important to set boundaries.

AutoTyper JS : JavaScript plugin for Animated Typewriting

AutoTyper JS : JavaScript plugin for Animated Typewriting

A vanilla javascript plugin for animated typewriting. Autotyperjs can be accessable in global variable as autoTyper. It exposes outside two functions, start and stop. Multiple instances can be created by using new keyword. Its compatible with Chrome, Firefox, Safari, Internet Explorer and Edge.

Pdfmake : Client/Server side PDF printing in pure JavaScript

Pdfmake : Client/Server side PDF printing in pure JavaScript

Pdfmake is a PDF document generation library for server-side and client-side in pure JavaScript.

Features:

  • line-wrapping,
  • text-alignments (left, right, centered, justified),
  • numbered and bulleted lists,
  • tables and columns
    • auto/fixed/star-sized widths,
    • col-spans and row-spans,
    • headers automatically repeated in case of a page-break,
  • images and vector graphics,
  • convenient styling and style inheritance,
  • page headers and footers:
    • static or dynamic content,
    • access to current page number and page count,
  • background-layer,
  • page dimensions and orientations,
  • margins,
  • custom page breaks,
  • font embedding,
  • support for complex, multi-level (nested) structures,
  • table of contents,
  • helper methods for opening/printing/downloading the generated PDF,
  • setting of PDF metadata (e.g. author, subject).

Freezeframe.js : Library that Pauses Animated Gifs

Freezeframe.js : Library that Pauses Animated Gifs

Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.

Spotlight : Lightweight Image Gallery Plugin

Spotlight : Lightweight Image Gallery Plugin

Spotlight is a web’s most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

Spotlight runs out of the box:

  • No additional Javascript coding
  • No additional HTML snippets
  • No additional CSS resources
  • No additional images/assets
  • No additional handling of dynamic content and event listener

Filerobot : JavaScript Image Editor

Filerobot : JavaScript Image Editor

he Filerobot Image Editor is the easiest way to integrate an easy-to-use image editor in your web application. Integrated with few lines of code, your users will be able to apply basic transformations like resize, crop, rotate and various filters to any image. Once edited, the Image Editor will return an URL to the resulting image and deliver it rocket fast over CDN all around the World.

Pinker : JavaScript library for Rendering Code Dependency Diagrams

Pinker : JavaScript library for Rendering Code Dependency Diagrams

Pinker is a standalone JavaScript library for rendering code dependency diagrams on your web page.Pinker is a standalone JavaScript library for rendering code dependency diagrams on your web page.Pinker gives the user control over the layout of the diagram, so you can render more complicated diagrams.

Supports: UML diagrams, nested scopes, arrows crossing scopes, and aliases.

Draggable Image Strip with TweenMax

Draggable Image Strip with TweenMax

A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.. The idea is to show a strip of differently sized images that can be dragged. When clicking and holding to drag, a title element appears and the images get scaled. This separates the images and gives the whole thing an interesting look. When a number gets clicked, the same separation happens and then the images fly up. Another larger version of the images slides in from the bottom.