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

Grid Layout with Scrollable Content View

Grid Layout with Scrollable Content View

Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.

Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

Today we’d like to share a simple fullscreen menu with you. The menu layout is powered by CSS Grid and we make its boxes appear with a reveal animation. The animations are made using TweenMax.

CSS Checkbox Library

CSS Checkbox Library

A huge collection of pure css checkboxes.

Light Modal : Pure CSS based Modal

Light Modal : Pure CSS based Modal

Light Modal is a new lightweight, powerful and easy to use CSS modal for content and images.

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.