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

    Scroll Animation WordPress Plugin

    Scroll Animation WordPress Plugin

    Animate your WordPress content while user scrolling.

    • CSS3 transition.
    • Optional animation style.
    • Optional jQuery selector of the WordPress content you want to animate.
    • Animation trigger when user scroll to the content, you can customize the offset in the backend.
    • Optional to enable the scroll animation in a certain post/page only.
    • Compatible with latest jQuery and latest WordPress.
    • Enqueue the js and css only when needed. Keep WordPress page size smaller.

    Pushy : jQuery Off-Canvas Navigation Menu

    Pushy : jQuery Off-Canvas Navigation Menu

    Pushy is a jquery responsive off-canvas navigation menu using CSS transforms & transitions.

    Features:

    • Uses CSS transforms & transitions.
    • Smooth performance on mobile devices.
    • jQuery animation fallback for IE 7 – 9.
    • Menu closes when a link is selected.
    • Menu closes when the site overlay is selected.
    • It’s responsive!

    Wallop Slider : Simple Slider with CSS3 transitions

    Wallop Slider : Simple Slider with CSS3 transitions

    Wallop Slider is simple slider with CSS3 transitions.

    Features:

    • Mobile first
    • Progressive enhancement
    • Transitions/Animations are all in CSS
    • Minimal JavaScript
    • Flexible & Scalable
    • Custom events and API available
    • 3KB minified
    • Dependency free – That’s right, no jQuery

    Demos :

     

    Magic Responsive Slider & Carousel jQuery WordPress Plugin

    Magic Responsive Slider & Carousel jQuery WordPress Plugin

    Magic Slider and Carousel will help you to create the next generation of sliders, using the CSS3 transitions for layers and an ultra-smooth KenBurns effect. You’ll also be able to create interactive ‘magic’ carousels with YouTube, Vimeo and HTML5 video support; HTML5 audio support; Image support; Links support.

    Features:

    • touch screen navigation support for mobile
    • responsive design – available parameter to disable responsive behaviour
    • multimedia support: Images, YouTube, Vimeo, HTML5 video and HTML5 audio. HTML5 video and HTML5 audio will not work in IE7 & IE8
    • lightbox support
    • border – you can set the border size and border color for active and inactive image.
    • Fixed Dimensions Version, Full Width Version and Responsive Version
    • circle timer parameters for color, dimensions, transparency (available only for Perspective version)
    • width & height parameters
    • it supports links for each image with parameter for _self or _blank
    • autoplay parameter

    bespoke-fx : CSS slide transitions with JavaScript

    bespoke-fx : CSS slide transitions with JavaScript

    bespoke-fx is a CSS slide transitions for bespoke.js.This is useful when you want to transition a single slide in a different way to other slides.

    Side Navigation Menu with CSS3

    Side Navigation Menu with CSS3

    Side Navigation Menu with CSS3 transition property & without JS.We have a <nav> tag on the left of the screen with position: fixed;, a width and a fixed height.

    Then we have a list with <svg> images and hidden links with display: none;, when we do a :hover over <nav> tag we added more with to the <nav> and a display: block; so that the links appear.

    WOW.js : Reveal CSS animation as you Scroll down a page

    WOW.js : Reveal CSS animation as you Scroll down a page

    Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

    Advantages:

    • Smaller than other javascript parallax plugins, like Scrollorama (they do fantastic things, but can be too much heavier for simple needs)
    • Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
    • Fast execution and lightweight code: the browser will like it 😉

    Boxaroo : jQuery Animated Puch Pack into Lightbox

    Boxaroo : jQuery Animated Puch Pack into Lightbox

    Boxaroo packs a punch into the Lightbox – providing full customization control over the environment while catering to both beginners and developers. Packed to the gills with nearly 400MB of optimized graphics (66 Envato Marketplace Items) and over 170 optional settings – Boxaroo is possibly the most flexible and customizable Lightbox solution yet.

    Features:

    • 66 Envato Marketplace Items 
    • 170 Customization Settings
    • Minified Production + Source Code
    • 6 pre-built Skins
    • 10 CSS3 Preloaders with GIF Fallbacks
    • 800 Premium Backgrounds
    • 100+ Navigation Button Graphics
    • 100+ Seamless Tiles
    • Customizable Thumbnail Hover Effects
    • Comprehensive and Interactive Documentation

    Fullscreen Overlay Effects with CSS3 & JavaScript

    Fullscreen Overlay Effects with CSS3 & JavaScript

    Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

    The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes.

    jQuery Turtle : Turtle Graphics for jQuery

    jQuery Turtle : Turtle Graphics for jQuery

    jQuery-turtle is a jQuery plugin for turtle graphics.With jQuery-turtle, every DOM element is a turtle that can be moved using turtle graphics methods like fd (forward), bk (back), rt (right turn), and lt (left turn). The pen function allows a turtle to draw on a full-document canvas as it moves.

    Features:

    • Relative and absolute motion and drawing.
    • Functions to ease basic input, output, and game-making for beginners.
    • Operations on sets of turtles, and turtle motion of arbitrary elements.
    • Accurate collision-testing of turtles with arbitrary convex hulls.
    • Simplified access to CSS3 transforms, jQuery animations, Canvas, and Web Audio.
    • An interactive turtle console in either Javascript or CoffeeScript.