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

Expanding Grid Menu with CSS Grid

Expanding Grid Menu with CSS Grid

A CSS Grid powered menu with a box look inspired by the effect seen in the “Ableton Live 10: What’s New” video.In right at the beginning: a couple of differently sized boxes slide out and fill the screen. We thought this might be a nice idea applied to a menu using CSS Grid.

ReboundGen : Editable CSS3 Animations Library

ReboundGen : Editable CSS3 Animations Library

REBOUNDGEN calculates springy CSS3 Keyframe animations based on a few simple parameters you define. It uses Facebook’s Rebound.js for the math and outputs SCSS style sheets for each animation. So, you can import just the ones you need. A variety of nice animations can be accomplished using a small set of parameters.

Splash Transition with CSS and SVG

Splash Transition with CSS and SVG

In this tutorial we’ll be creating an eye catching animation, just using SVG paths and CSS transitions. To make things easier, we will also be using Pug and Sass, HTML and CSS preprocessors respectively. They will allow us to write much cleaner and more organized code, and also help with maths.

Woah.css : CSS Animation Library for eccentrics

Woah.css : CSS Animation Library for eccentrics

Woah.css is a css animation library for eccentric web developers.Woah.css has three different types of animations to choose from.

  • Woah animations — These are very eccentric and barely practical, but are very fun and showy.
  • Wow animations — These are still a little eccentric, but could very well be used in normal websites.
  • Normie animations — These are very basic.

CSS Glitch Effect Slideshow

CSS Glitch Effect Slideshow

A simple slideshow that uses the CSS Glitch Effect for the slide transitions. In a slideshow we have a different scenario: we want to apply the glitch effect at a specific moment and exchange the image with the new one of the next slide. This kind of animation can also be used for hover effects.

This slideshow does exactly that: it transitions to the next slide using the glitch effect. Under the hood, it exchanges the glitch layers one by one and stops glitching once the last image is switched.

Delighters : CSS Animations on Page Scroll

Delighters : CSS Animations on Page Scroll

Delighters is add CSS animations to delight users as they scroll down.

Features:

  • Declarative
  • Flexible
  • Light footprint
  • Framework-agnostic
  • Supports desktop, mobile & tablets
  • Degrades gracefully to your default styling

LC Lightbox : Modern jQuery Lightbox Plugin

LC Lightbox : Modern jQuery Lightbox Plugin

LC Lightbox is a modern jQuery lightbox focused on contents.Show and mix images, videos, iframes and HTML.

Totally responsive and adaptive, is extremely flexible to be tailored in the minimum details!

  • Elements Slideshow (manually or automatically initialized)
  • Thumbnails Navigation (with customizable sizes and optional data-type icon)
  • Effective Socials Share (with WhatsApp option on mobile)
  • Element Contents (title, description and author)
  • Images “right-click” protection
  • Elements direct download (not requiring PHP scripts)
  • Components Toggling (thumbnails and texts).
  • 100% CSS Driven

Web Slide – Bootstrap 4 Mega Menu Responsive

Web Slide - Bootstrap 4 Mega Menu Responsive

Build your mobile-first web projects with web slide navigation system that’s give you all type of ready made responsive menu items for your any type of websites. Made with pure css, html, jquery, so you can customize it as you want that suits your website layout.

Features:

  • Ecommerce vertical tabbing mega menu
  • Full & Fixed website menu
  • Bootstrap 4 compatible
  • Horizontal multi level dropdown menu
  • Top fixed functionality
  • Animation effects menus
  • Off Canvas Menu
  • RTL menu

Vivify : Free CSS Animation Library

Vivify : Free CSS Animation Library

Vivify is free CSS animation library.

Outdoors Template with CSS Grids

Outdoors Template with CSS Grids

Today we’re very excited to share an experimental implementation of one of Gil Huybrecht’s designs with you. Gil creates fantastic signature designs with amazing animations and he kindly permitted us code up one of his works.

An implementation of Gil Huybrecht’s “Outdoors” design project powered by layered CSS grids.