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

    3D FlipBook – Responsive jQuery Plugin

    3D FlipBook - Responsive jQuery Plugin

    Responsive design – book resizes so it fits screen width or screen height depending on the layout, thumbnails are placed horizontally or vertically depending on the layout.

    Features:

    • optimized for mobile – look and feel of a native app on mobile with touch swipe, pinch zoom etc
    • easy to use and customize – create book and change book settings in the xml. Change style in the css
    • no Flash Player needed – works everywhere
    • choose between 2 types of flip animation – 2d or 3d flip animation customizable animation speed and transition type
    • show all pages – vertical or horizontal thumbnails depending on the layout, with scrollbar, optimized for mobile devices
    • advanced zooming support with mouse wheel zoom on desktop, pinch zoom on mobile, scrollbars when zoomed, touch swipe, click and drag
    • real fullscreen support – if fullscreen is not supported by the browser, the icon will not be shown in the menu, if fullscreen is supported it will expand the book in real full screen mode, not browser full screen
    • 2 sets of iocns included – light and dark

    GFX : 3D CSS3 animation library with jQuery

    GFX : 3D CSS3 animation library with jQuery

    GFX is an 3D CSS3 animation library that extends jQuery with some useful functionality for programmatically creating CSS3 transitions. CSS3 transitions are superior to manual ones (using setTimeout) since they’re hardware accelerated, something particularly noticeable on mobile devices.

    GFX currently only supports WebKit browsers (Safari/Chrome). Firefox support is planned.

    jQuery Scroll Content Presenter with CSS3

    jQuery Scroll Content Presenter with CSS3

    It is an extension that allows you to create an unique and beautiful style of navigation , showing the contents of your site through animations and colors to engage your visitors. Scroll Content Presenter builds the navigation menu for you based on the structure of your HTML.

    Features:

    • Vertical and horizontal navigation
    • Custmom scroll
    • Parallax animation
    • CSS3 transitions
    • Built using bootstrap
    • Generate navigation menu for you

    Textillate.js : jQuery Plugin For CSS3 Text Animations

    Textillate.js : jQuery Plugin For CSS3 Text Animations

    Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.

    jQuery Smart Responsive Menu with CSS3

    jQuery Smart Responsive Menu with CSS3

    Smart Responsive Menu is powerful dropdown menu solution that will work with mobile devices and different screen sizes. Menu relies on CSS media queries to modify menu display for different resolutions. By default, plugin changes paddings and font sizes for screen resolution higher than 480px. For less than 480px, menu changes from horizontal navigation into vertical and gets hidden behind the menu item.

    Styling Effects:

    • Gradient: with three different gradient styles
    • Rounded: with one class for the rounded display
    • Box Shadow: with one class for the shadow
    • Text Shadow: with two classes for different shadows
    • Transitions: with five different transition effects
    • Menu Links: with three types of characters and arrows

    box2d : jQuery Convert your DOM into Physical objects

    box2d : jQuery Convert your DOM into Physical objects

    jquery.box2d.js is a simple jquery plugin that transforms DOM elements into actual physical objects. well, physical in a flat 2d-browser-world.In Short about box2d :

    • we clone the selected DOM elements into absolute possitioned … well … clones.
    • we animate them via dynamically (javascript styly) set CSS3 transforms / translate / rotate combos
    • the values for this CSS/javascript mambo-jumbo are calculted via box2d-web

    opentip : JavaScript Tooltip framework

    opentip : JavaScript Tooltip framework

    Opentip is an open source javascript tooltip based on the protoype framework.

    Features:

    • Stems (little pointers)
    • Automatic content download with AJAX
    • Different styles
    • Automatic repositioning of the tooltip if it’s not in the viewport of the browser anymore
    • All kind of triggers (The tooltip can be triggered by mouse over, click, form submit,… everything you can think of really)
    • CSS3 Animations
    • Well tested, with over 200 unit tests

    Selectik : jQuery cross-browser Select plugin

    Selectik : jQuery cross-browser Select plugin

    Selectik is jQuery select plugin, easy use, cross-browser alternative to the standard select form element which can be customised with CSS. All features of custom select and help you can find on demo page.

    Features:

    • TAB key control
    • original select key control
    • mouse wheel control
    • search by first letter
    • custom/default scroll
    • smart positioning
    • auto/cutsom width

    jQuery & CSS3 3D Interactive Photo Stack

    jQuery & CSS3 3D Interactive Photo Stack

    In today’s demo, I’ve taken a gallery of images of the jQuery team and transformed them into an interactive 3D stack. CSS3 provides the underlying styling for this whilst jQuery is used for calculations and positioning.

    Well, think of skewing as a way to transpose an image at particular angles – basically, pulling the X axis at one angle and the Y axis in another. It sounds a little complicated, but this technique is really great for simulating 3D perspective effects.

    jQuery ViewMaster CSS3 Slideshow

    jQuery ViewMaster CSS3 Slideshow

    A jQuery CSS3 slideshow.This is a slideshow demo I put together to try out some jQuery manipulation of CSS3 rotation and translation. It’s based on the old ViewMaster toy.Use arrow keys or click any photo.