Best jQuery Core Java Script Plugins & Tutorials with Demo

    Triple Panel Reveal Slideshow with TweenMax

    Triple Panel Reveal Slideshow with TweenMax

    Today we’d like to show you a little slideshow design with a “triple panel” layout. The infinite slideshow shows a preview of the next and previous slide on both sides of the page. When navigating we use a reveal effect for all three images and animate the titles. The animations are powered by TweenMax.

    AlphaTab : Music notation & Guitar Tablature rendering Library

    AlphaTab : Music notation & Guitar Tablature rendering Library

    AlphaTab is a cross platform music notation and guitar tablature rendering library.

    You can use alphaTab within your own website or application to load and display music sheets from data sources like Guitar Pro or the built in markup language named alphaTex.

    Features:

    • load GuitarPro 3-5, GuitarPro 6, AlphaTex or MusicXML (experimental)
    • render as SVG, HTML5 canvas, GDI+,…
    • adapt to your responsive design by dynamic resizing
    • play the music sheet via HTML5 Web Audio API and Flash

    Picasso.js : A Charting library streamlined for building Visualizations

    Picasso.js : A Charting library streamlined for building Visualizations

    Picasso.js is a charting library streamlined for building visualizations for the Qlik Sense Analytics platform.

    Full Image Reveal Effect with TweenMax Animation

    Full Image Reveal Effect with TweenMax Animation

    Today we’d like to share a simple fullscreen image reveal effect with you. The idea is to have an inital thumbnails layout at the bottom of the page and then animate the items when we click them. A covering element comes sliding in and when it moves out, the fullscreen image view is shown behind. We are using TweenMax for the animations.

    liike.js : Tiny JavaScript Tweening Library

    liike.js : Tiny JavaScript Tweening Library

    Liike is a Finnish word and means movementmotion. It’s a minimalistic library to create performant custom JS tweens no matter what you’re tweening.

    When you create a tween, Liike will create a single render loop on-demand for every tweens running and use DOMHighResTimeStamp (provided by requestAnimationFrame), which should be accurate to 5 µs. If the delay is 0, Liike will start the tween at the next animation frame and count the duration from there.

    Vivid.Js : JavaScript Library to use SVG Icons

    Vivid.Js : JavaScript Library to use SVG Icons

    Vivid.JS is a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.

    Motus : Scrolling Animation Library

    Motus : Scrolling Animation Library

    Motus is a animation library that mimics CSS keyframes when scrolling.

    Priority Nav Scroller with JavaScript

    Priority Nav Scroller with JavaScript

    Priority Nav Scroller is a plugin for the priority+ navigation pattern. When the navigation items don’t fit on screen they are hidden in a horizontal scrollable container with controls.

    Collapsing Logo Effect with JavaScript

    Collapsing Logo Effect with JavaScript

    Today we’d like to share a little collapsing logo effect with you. The idea is to have an initial view that scales down to a logo in the top left corner of the page. The logo can then be clicked again to expand it to the initial view. The effect is a recreation of the one seen on PracticalVR.

    Parallax Color Bars with JavaScript

    Parallax Color Bars with JavaScript

    Amazing animated color bars parallax effect on black & white image while page scrolling.In parallaxColorBars you can now add settings using the data-parallax-color-bar attribute. You still need to call $(element).parallaxColorBars() to initialize parallaxColorBars on the element.