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

    Offside.js : JavaScript Off-canvas Push Menu

    Offside.js : JavaScript Off-canvas Push Menu

    Offside.js is a minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation. It’s goal is to provide a super-lightweight, efficient and customizable way of handling off-canvas menus/elements on modern website and web applications.

    Features:

    • Minimal DOM manipulations
    • No library dependencies
    • Uses CSS3 3D transforms (if you want to)
    • No injected style. Offside entirely relies on classes manipulations
    • BEM-like style
    • Degrades gracefully on browsers not supporting CSS3 3D transforms
    • Handles multiple off-canvas elements
    • Left/right off-canvas

    Diagonal Slideshow with JavaScript & CSS

    Diagonal Slideshow with JavaScript & CSS

    A slideshow with a “diagonal” look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.The animations are powered by TweenMax.

    Splitting : JavaScript microlibrary to Split an element by Words & Characters

    Splitting : JavaScript microlibrary to Split an element by Words & Characters

    Splitting is a JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!

    Most Splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.

    Micron.JS : MicroInteraction library with CSS Animations & JavaScript

    Micron.JS : MicroInteraction library with CSS Animations & JavaScript

    Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.

    Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

    Slide Out Box Menu with CSS Grid & TweenMax

    Slide Out Box Menu with CSS Grid & TweenMax

    Today we’d like to share a little menu with you. The idea is to reveal the boxes of a grid individually from the top right corner of the page similar to the Expanding Grid Menu we did a while back. The animations are powered by TweenMax.

    Motion Reveal Slideshow with CSS & TweenMax Js

    Motion Reveal Slideshow with CSS & TweenMax Js

    Today we’d like to share another slideshow with you. The idea is to have a bit more of motion when navigating between the slides and showing another preview part with a fullscreen image.The animations are powered by TweenMax.

    Full Image Reveal Effect with TweenMax Animation

    Full Image Reveal Effect with TweenMax Animation

    Today we’d like to share a simple fullscreen image reveal effect with you. The idea is to have an inital thumbnails layout at the bottom of the page and then animate the items when we click them. A covering element comes sliding in and when it moves out, the fullscreen image view is shown behind. We are using TweenMax for the animations.

    Motus : Scrolling Animation Library

    Motus : Scrolling Animation Library

    Motus is a animation library that mimics CSS keyframes when scrolling.

    Simple Button Checks with jQuery

    Simple Button Checks with jQuery

    Simple button checks is a simple plugin for transform checkbox inputs into html buttons for css customize. High performance, keyboard support and preserve original input click/change events.

    Grid Layout with Motion Hover Effect and Content Preview

    Grid Layout with Motion Hover Effect and Content Preview

    Today we’d like to share a little grid layout with you. We use CSS Grid and a playful hover effect on the grid items which are composed of different wildly placed elements. When an item is clicked, we slide in a content preview overlay and animate the grid items out and the preview items in. For the animations we use TweenMax by Greensock.