This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery framework allows the creation of powerful and dynamic web pages and web applications (source: Wikipedia).
Super Simple Lightbox with CSS and jQuery
Rather than using a bloated plugin that has features you’ll never use, this tutorial shows you how to create a super simple lightbox for handling images. It’s perfect for image galleries, portfolios, and more!
Animated Scroll to Top
A detailed tutorial on how to create an animated scroll to top, it is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.
Creating a Modern Gallery with Raphael
How to create a modern gallery (with cool animation effect) using Raphael library and jQuery. First of all, check out Raphael website and read the documentation. In this tutorial we will use just a little part of this what Raphael offer.
Simple Tooltip w/ jQuery & CSS
There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. The markup is as simple as possible but at the same time flexible enough to accommodate various scenarios you would run into.
Circular Content Carousel with jQuery
The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
This is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away. DiagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2
Parallax Slider with jQuery
Making use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.
Dropdown Login Form
A simple jQuery dropdown login form, it’s easy to implement and lightweight and does everything you need it to. All you have to do is implement and hook it up to your website.
Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users. Using Smart Wizard 2.0 you can easily do input validation and so it is good for user registration and kind of tasks.
Animated Skills Diagram with Raphaël
Expanding Fullscreen Grid Portfolio
A neat experimental portfolio template. The main idea is to have a grid layout that is created with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image. Each item has a little slideshow of thumbs which will be animated to the right position once the portfolio item gets “expanded”.
Simple Vote Using JQuery Animate
Simple idea to use JQuery animate function in voting system, the idea is just expanding the div element (css width property) using the animate function, we just need to add the same value on the width element.
A self-contained jQuery plugin that enables element and fullscreen overlays, with optional static and dynamic modal content – that virtually eliminates the need for additional html or css code.
Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in this css) that essentially acts as a window where two other items of your choosing “peek” through.
Triggered Infinite Scroll
This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.(Custom trigger, non-automatic. Twitter-style)