Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo

    Fullscreen Slideshow with HTML5 Audio and jQuery

    Fullscreen Slideshow with HTML5 Audio and jQuery

    In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

    Sliding Background Image Menu with jQuery

    Sliding Background Image Menu with jQuery

    Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as the size of the image, the hover effect and custom default states.

    Simple Overlay – jQuery plugin

    Simple Overlay - jQuery plugin

    A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

    Use custom effects, customize using CSS hooks, define custom callbacks for further action, take advantage of CSS3 and more.

    Create a grid Image Gallery that has intersecting highlights with jQuery and CSS

    jQuery CSS grid Image Gallery

    In this image gallery, I wanted to create the effect of intersecting lines to highlight the selected image in a grid like a crosshair. I used differing opacities of images horizontally across from the current image and vertically above or below the image to achieve this effect. This gallery uses jQuery Masonry to achieve the animated resizing effect of the grid.

    Simple jQuery Text Resizer

    jQuery Text Resizer

    The idea of this plugin is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, it will take advantage of that body class when you are writing your CSS to size the different elements appropriately.

    Analog JQuery clock

    JQuery Analog clock

    In this tutorial we will use JQuery and a plugin named jQueryRotate.The main idea behind making this watch is to rotate the three images according to the actual time tt/mm/ss. We split that time up in hours, minutes and seconds. Then use some math to convert each of the three values into an angle between 0 and 360. one for each of our three pointers. Then we use a timer function in JQuery to do that every second. That will make it look like the pointers is ticking like a real watch.

    gSlider Lightweight jQuery Image Slider

    Lightweight jQuery Image Slider

    gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.

    jQuery ListMenu Plugin

    jQuery ListMenu Plugin

    This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable ‘first-letter’ based menuing system, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a submenu. Mousing off of the letter or menu closes the submenu. Mousing between letters is very fast and the columns in the submenu are nicely balanced.

    Using Flux Slider jQuery plugin

    jQuery Flux Slider

    Using Flux Slider jQuery plugin Today I will make review (example of implementation) of fresh and cool slider plugin – Flux. This slider using CSS3 animation with great transition effects (like: bars, zip, blinds, blocks, concentric, warp). And, what is most great – now it can support 3D transitions too (bars3d, cube, tiles3d, Blinds3D effects).

    Accordionza a jQuery accordion Plugin

    jQuery accordion Plugin

    This plugin cost $9 and will allow you to easily configure all effects and speed, pause on hover, autoplay and autorestart, collapseable captions and more. Three accordion styles are included. Create your own with some HTML  & CSS skills. Solid — No wobbly edges as often seen in other accordion scripts. Progressive enhancement. All content is still viewable without JavaScript enabled.