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

Morphing Page Transition with CSS & SVG

Morphing Page Transition with CSS & SVG

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use Charming. In the demos we use an “intro transition” in order to showcase the effect, but that’s of course only one of the many use cases for this kind of page transition.

Inspiration for Menu Hover Effects with CSS & JavaScript

Inspiration for Menu Hover Effects with CSS & JavaScript

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.

Animated Image Pieces with JavaScript & CSS

Animated Image Pieces with JavaScript & CSS

A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments. Powered by anime.js.

Letter Effects and Interaction Ideas with CSS & JavaScript

Letter Effects and Interaction Ideas with CSS & JavaScript

Today we’d like to share some more letter effects with you. Just like in the first set, we play around with hover and click interactions to create some fun typography animations. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters.

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

Performs a smooth 2D/3D transition from one HTML element A to another element B.

Features:

  • Runs a single transition or a sequence of transitions;
  • Transition effect is automatically computed between two slides;
  • Fallbacks to browsers that do not support 3D transformations and CSS3 animations;
  • Highly customizable:
    • Any markup you want. Only restriction is sliders to be contained in a parent blocked element;
    • Strong event driven support;
    • Single transition or a sequence of transitions (movie mode);
    • Transition duration, easing function animation and zoom vertexes;
    • Optional user zoomming and panning between each transition.
  • Responsive design, suitable for any window sizes;

Letter Effects and Interaction Ideas with CSS

Letter Effects and Interaction Ideas with CSS

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters. We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

Folder Preview Ideas with CSS

Folder Preview Ideas with CSS

oday we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. We are using anime.js to power the animations.

Foldable : Full Stack CSS3 powered jQuery Accordion

Foldable : Full Stack CSS3 powered jQuery Accordion

Foldable is the full stack CSS3 powered jQuery Accordion.

Responsive and device-ready with a lot of options to customize it that can be easily be part of your projects.

Fully animated open-close actions using built-in CSS3 animations with a smart auto fallback to jQuery animations for oldie browsers

STIMED.js : jQuery plugin for controlling CSS styles over Time

STIMED.js : jQuery plugin for controlling CSS styles over Time

STIMED.js is a jQuery plugin for controlling CSS styles over time. There are almost endless possibilities for using timed CSS properties. You could change webpage colors to make them more calm at night and more contrast during daytime, or hide a specific element in a certain time, or just move an element in sync with time…

Ember Burger Menu : Off-canvas Sidebar

Ember Burger Menu : Off-canvas Sidebar

An off-canvas sidebar component with a collection of animations and styles using CSS transitions.

Features:

  • Easy to use & setup off-canvas menu
  • Mix and match from many menu & menu item animations
  • Control your menu from anywhere in your app
  • Swipe gesture support with changeable thresholds
  • Easily create your own animations


Best jQuery websites design awards