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

    jQuery Smoove – Gorgeous CSS3 Scroll Effects

    jQuery Smoove - Gorgeous CSS3 Scroll Effects

    Smoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page.

    Adjector.js : A Minimal and Elegant Content Flipper

    Adjector.js : A Minimal and Elegant Content Flipper

    In this tutorial I’ll help you add one such snippet to your own website. Adjector.js is a flexible, minimal and elegant content flipper/rotator which takes only a few minutes to integrate.Adjector.js is a great jQuery plugin which anyone can use and make his/her content talk.

    Revolution Lightbox with JavaScript & CSS3

    Revolution Lightbox with JavaScript & CSS3

    Revolution Lightbox is a full blown multimedia responsive lightbox that runs on all major browsers and mobile devices like iPhone, iPad, iOS, Android and Windows8. It has support for image, video (mp4), audio (mp3), Vimeo, YouTube, iFrame, AJAX, HTML content, Google maps and flash.

    Revolution Lightbox has high performance using OOP code and the latest CSS3 techniques, ready for mobile with swipe support, very flexible, easy to setup and extremely customizable. The playlists / content can be created using simple HTML markup or JSON, plus the visual and programmatic settings can be modified at runtime, this allows to have different themes with various settings in the same.

    Timeline with CSS3 & jQuery

    Timeline with CSS3 & jQuery

    The timeline drop can have many different purposes. From explaining history and chronological events like process or history. The timeline features a beautiful CSS transition that is triggered by the user’s scroll. Video and images are also supported as content types for the feed.

    Features:

    • Image and video support
    • Infinite scroll supported
    • 100% Responsive

    Animated Icons with CSS3

    Animated Icons with CSS3

    A sample pack (10) of animated icons from Kickdrop. Full icon set coming soon! These retina-ready icons were animated in Adobe After Effects and are exported as .png sprites-sheets. Sprite-sheets contain a collage of frame-by-frame stills that make up an animation (This technique has a long history in gaming).

    We used Stitches , a .png sprite sequence generator, to create the final sheets. After generating the sprite sheets, we used pure CSS3 to animate through the sprite sheet on hover. The mixture css animations and sprite-sheets creates an interesting combination to create visually rich, game-like experiences.

    Canvas Headings : jQuery Animated Text Plugin

    Canvas Headings : jQuery Animated Text Plugin

    With this jQuery plugin you can easily create cool looking headings for your pages!

    Features:

    • Canvas headings with a fallback to default HTML
    • Gradient fill text
    • Image fill text animated and non animated
    • Text shadow/glow
    • Normal and gradient strokes
    • Works with all fonts
    • Rotated text
    • 3D text
    • 3D shadows
    • Distorted text

    On-Scroll Animated Header with CSS3 & jQuery

    On-Scroll Animated Header with CSS3 & jQuery

    We present the very popular fixed, on scroll animated header that changes it’s size and the orientation or visibility of the components within based on the user’s scroll action. As the user begins to scroll and engage with content, the header area is elegantly minimized to leave more of the viewport open for content.

    Live LESS Theme Customizer

    Live LESS Theme Customizer
    • Live edit the visuals of a web page in a browser with the help of Less.js (colors, padding and any other CSS properties)
    • Edit the Less variables and see the results immediately on the preview page.
    • Generates the customized CSS file (and the minified version).
    • Provides a way to the user to freely overwrite any style by hand.
    • Can use any web fonts (by adding the @import’s into the custom Less code).
    • Related variables – filter the variables that affects the appropriate element
    • Can import any customized Less file with comment hinting – it is very easy to set up the customizer.
    • Can save any color in the color picker and reuse them later.
    • The preview is in an iframe so any multi-paged theme can be edited without reloading the editor (the same Less variables can be used on every page, with the actual customizations applied to every page).
    • Javascript interface – load any pre-defined theme programmatically (see the theme selector in the advanced demo).
    • Very easy to set up the customizable variables (they are getting parsed from a Less file)

    Ideas for Subtle Hover Effects with CSS3

    Ideas for Subtle Hover Effects with CSS3

    Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.