Best jQuery Core Java Script Plugins & Tutorials with Demo

    html2canvas : Screenshots with JavaScript

    July 6, 2013 | Core Java Script
    html2canvas : Screenshots with JavaScript

    This script allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

    The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.It does not require any rendering from the server, as the whole image is created on the clients browser.

    Read More Demo

    IMCrypt : Image Protection with PHP & JavaScript

    July 5, 2013 | Core Java Script, PHP, Premium
    IMCrypt : Image Protection with PHP & JavaScript

    IMCrypt is an image protection script that basically scrambles and descrambles images you choose on your website so that they can be easily viewed, but not as easily downloaded. This is accomplished by “encrypting” the image one-time on the server side using PHP and “decrypting” it when the client needs it through a piece of Javascript.

    Read More Demo

    Interactive Particles Slideshow with Html5 & JavaScript

    July 4, 2013 | Animation, Core Java Script, HTML5, Slider
    Interactive Particles Slideshow with Html5 & JavaScript

    This is an experimental interactive slideshow component with math shapes and texts using Html5 Canvas. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.

    Read More Demo

    Flippant.js : JavaScript & CSS3 library for flipping things over

    July 4, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Popup Window
    Flippant.js : JavaScript & CSS3 library for flipping things over

    Flippant.js is a mini javascript and CSS3 library that lets you flip things over. It has zero dependencies, is easily customized, and exports a single function: flip.

    Read More Demo

    Loading Effects for Grid Items with CSS Animations & JavaScript

    July 3, 2013 | Animation, Core Java Script, CSS2 / CSS3.0, Responsive
    Loading Effects for Grid Items with CSS Animations & JavaScript

    Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.

    Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. If you’d like to use something else or no library at all, you’ll have to remove the initialization from the script and adjust the selectors etc. That should be pretty straightforward.

    Read More Demo

    Blueprint : View Mode Switch with CSS3 & JavaScript

    July 2, 2013 | Core Java Script, CSS2 / CSS3.0, Layout, Responsive
    Blueprint : View Mode Switch with CSS3 & JavaScript

    A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

    Read More Demo

    tracking.js : Real Time tracking techniques by the Camera

    July 2, 2013 | Core Java Script, Video & Audio, Web
    tracking.js : Real Time tracking techniques by the Camera

    The tracking.js brings to web elements tracking techniques of a real scene captured by the camera, through natural interactions from object tracking, color markers, among others, allowing the development of interfaces and games through a simple and intuitive API.

    Read More Demo

    GetEmPixels : Obtain an element’s em value in pixels using JavaScript

    June 30, 2013 | Core Java Script, Web
    GetEmPixels : Obtain an element’s em value in pixels using JavaScript

    Allows you to accurately obtain an element’s em value in pixels using JavaScript. No more blindly dividing by hard-coded values.

    Read More Demo

    Expanding Search Bar Deconstructed with JavaScript & CSS3

    June 28, 2013 | Animation, Core Java Script, CSS2 / CSS3.0
    Expanding Search Bar Deconstructed with JavaScript & CSS3

    One of the things we thought might be nice to change is the search input. We’ve put it from the sidebar into the header and we use a common effect where you have to click to expand the input. We have received many requests on explaining how we did it and today we’d like to show you how to create a search input like that from scratch. The aim is to maximize compatibility for mobile devices and older browsers (down to IE8). Although this might seem like a super-easy thing, we’ll have to apply some tricks in order to make it work properly.

    Read More Demo

    Nifty Modal Window Effects with CSS3 & JavaScript

    June 26, 2013 | Core Java Script, CSS2 / CSS3.0, Popup Window
    Nifty Modal Window Effects with CSS3 & JavaScript

    Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration.

    The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).

    Read More Demo