jQuery has always been used to create random animations and effects on web pages. I have written a simple script in jQuery that animates the text in such a way that it looks like if it is spinning on its axis. I have used simple jQuery functions to provide the effect. Main logic is increasing and decreasing the ‘letter-spacing’ CSS property of the text which gives the simple spinning effect.
Virtual Piano Chords and Scales as a jQuery plugin
Virtual Piano Chords is a jQuery plugin to easily create virtual piano chord/scale to better understand how chords and scales related to each other visually and mathematically.
The Options are
- number_of_keys : To specify the number of keys needed
- key_width : Key Width in pixels
- key_height : Key Height in pixels
- chord_color : Color of the Chord
- scale_color: Color of the Scale used
Twitter like Real Time Wall Update Using Pusher API and jQuery
If you have ever dreamt of showing real time data on your website then this tutorial is for you. In this tutorial I will show you how to show real time updates and data on you web pages. Here I will use Pusher API to create a two way communication between the client and server. The Pusher API uses websockets for the two way communication and its free for starting your development.
Here I have created a Twitter/Facebook style real time updating wall script that will display the status updates of the users in real time.
Hazaar : jQuery PDF Viewer Plugin
At the moment this is a plugin for jQuery to render a PDF. It uses the PDF.js library from Mozilla to render the PDF completely inside the browser. Requires no extra software to be installed on the client computer, such as Adobe Acrobat Reader.
Features:
- View PDFs in the browser without extra software. PDFs are rendered in JavaScript!
- Skip to any page immediately, or by next/prev.
- Zoom in/out
- Download the source PDF directly!
- Loading status progress indicator!
FrameIt : Responsive jQuery Plugin
FrameIt is a Responsive jQuery plugin for frame images.Objective of the plugin is to create a plugin that works on mobile devices, smartphones and desktop without loss functionality. This plugin is “responsive”, which means it’s 100% compatible with responsive web designs.
Features:
- Responsive and mobile Ready
- Support for all majors browser
- Fully customizable frames shapes with css classes
- Fully configurable animation of the frames
- Separate images for each frame
- Anchor frames. Follows any link you want
- +20 presets for all images orientations
- CSS3 Real Shadow Effects
- CSS3 responsive background images (even on unsupported browser)
Windy: A jQuery Plugin for Swift Content Navigation
Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name. This plugin idea is inspired by the CSS shaders examples as shown in the CSS shaders Flipbook video by Adobe.
There are several options available, including defining the range of spreading the items when navigating, speed (CSS transitions), adding custom navigations, etc.