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

    Fullscreen Hover Loop Effect with CSS & TweenMax

    Fullscreen Hover Loop Effect with CSS & TweenMax

    Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.

    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.