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

    Smoothslides : Lightweight and Responsive jQuery slideshow

    Smoothslides : Lightweight and Responsive jQuery slideshow

    A simple, lightweight, and responsive jQuery slideshow by Kevin Thornbloom that features Ken Burns type animations.

    Features:

    • Lightweight [3.5Kb]
    • Four Animation Types: Zoom In, Zoom Out, Pan Left, Pan Right
    • Easily add captions
    • CSS3 transitions for smoother effects
    • Responsive image sizes

    TileBox jQuery : Modern Responsive LightBox

    TileBox jQuery : Modern Responsive LightBox

    TileBox jQuery – Modern Responsive LightBox is a small jQuery plugin that is used to create modern lightbox with CSS3 Animation Effects and customizing options for modern browsers. Please check demos below to see how it works.

    Features:

    • Responsive Design.
    • CSS3 Animation Effects.
    • Size Switcher.
    • Combine Inline and AJAX content.
    • Support Touch Swipe and Left, Right Keys to move prev/next box.
    • Full Screen Custom Content.
    • Show/Hide Thumbnail Ribbon.

    Plumcube : Compass extension for building pure-CSS 3D cubes

    Plumcube : Compass extension for building pure-CSS 3D cubes

    A compass extension for creating 3D cubes of all shapes and sizes… as long as that shape is a cube.

    Note that the plumcube plugin relies on the ‘Bleeding Edge’ version of SASS, because 3D CSS animation is the Internet of the future. If you are already a SASS-y individual, be sure to check your currently installed version (sass -v) and upgrade to the pre-release gem (3.3.0.alpha – get it with gem install sass --pre) if necessary.

    jQuery Immersive Slider

    jQuery Immersive Slider

    Immersive Slider let you create a unique immersive slider experience that changes the whole container to match the viewing slide like you see at the Google’s TV website. The plugin will let you assign background images per slide without you doing all the hard work.

    The plugin is capable of blurring the first image it finds in each slide, blow them up and use it as a background without you having to manually set each slide a background image. This is done using the CSS3 style called Filter which only works on Chrome, and maybe a performance hog.

    brandsBox : Logos Slider jQuery Plugin

    brandsBox : Logos Slider jQuery Plugin

    Logos slider jQuery plugin.

    Features:

    • Responsive
    • Configurable Grid
    • Hardware, CSS3 Transitions
    • 6 Smooth Sliding Transitions
    • Animations Speed Control
    • Hover Effects
    • 6 Color Modes for Logos
    • Logos Opacity Control
    • Sliding Modes
    • XML / JS Items Management
    • Major Browsers Support

    MetNav 2 : Another jQuery Metro UI navigation menu

    MetNav 2 : Another jQuery Metro UI navigation menu

    MetNav 2 is jEffectBox’s 2nd jQuery navigation menu plugin based on Window 8 Metro theme. It’s very lightweight and looks good on almost all major browsers and devices. It’s a Windows 8 Tile base navigation menu which supports unlimited sub menus. It supports responsive design and works well on touch devices.This plugin is dedicated to all Metro lover in the world.

    Features:

    • Supports unlimited number of sub-menus.
    • Supports responsive design.
    • Looks good in almost all major browsers and devices.
    • Very easy to integrate to any website.
    • Full documentation included.
    • Very lightweight, only 3kb of JavaScript (minified version is 2kb).
    • Control appearance through CSS, so it can be restyled.
    • Supports touch devices.

    Medium-Style Page Transition with jQuery & CSS3

    Medium-Style Page Transition with jQuery & CSS3

    In this article, I will outline how to achieve Medium’s page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

    Storyline 3D Slider with jQuery & CSS3

    Storyline 3D Slider with jQuery & CSS3

    Storyline 3D Slider is a great plug-in for your template, which will make it have a stunning look. The S-3D-S will help you showcase your work in a splendid creative way. Your products has never been displayed so great!

    If you are a proud author or musician or super talented designer, blogger or photographer – the S-3D-S is just for you! It offers 19 colour schemes, 8 scroll effects, 6 slide styles, responsive design, infinite scroll & possibility to work smoothly on mobile devices. You can include your own html code and make your own styles to fit your site.

    Features:

    • 19 color schemes
    • 8 incredible scroll effects
    • 6 different post styles (blog, circle, image, audio, book, text)
    • 5 ways to navigate trough slides
    • Responsive design
    • Touch enabled
    • Infinity scroll
    • Lots of different post settings
    • Custom image roll over settings
    • CSS3 and JQuery powered effects

    7 Slider : jQuery Responsive Image Slider

    7 Slider : jQuery Responsive Image Slider

    7 Slider is one of the most complete image slider ever. It is built in latest jQuery and mobile compatible so anyone can easily use it without any restriction. And it is fully responsive and modern features like Video embed,Lightbox are supported which make it more stunning.

    Features:

    • 250+ wonderful animations(2d,3d) – Animations will come more as new version released.
    • Native browser support
    • Html5/Css3 transitions support – It uses html5/css3 transition for modern browsers.
    • Image Overall Loading – 7 Slider loads all images at once so that he/she doesn’t wait again while slides.
    • Image Preview support – 7 Slider provides image preview option on hover.
    • Customizable width and height – Width and height can be set.
    • Fully responsive – It’s fully responsive so it can be attached in touch device.
    • Full width functionality involved – Full width slider is available
    • Lightbox support – It supports lightbox based on users’ demand.
    • Touch device support – Touch events are supported.
    • Mouse swipe navigation support – Swipe functionality is available so users feel comfortable to navigate.
    • Video content support(Youtube,Vimeo) – Embeded videos are supported.

    Blueprint Split Layout with CSS3 & JavaScript

    Blueprint Split Layout with CSS3 & JavaScript

    This Blueprint is a layout with two sides, sometimes seen in portfolio websites of couples and partners. The idea is to show an initial two-sided view and when clicking on a side, the whole page transitions into the respective direction. The individual page of the selected person is shown.

    The Blueprint comes with some example media queries and a second demo where the disappearing side scales down. It will work in modern browsers (from IE9 on).