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

Cool CSS Loading Effects for Grid Images

Cool CSS Loading Effects for Grid Images

TutsMix has shared with us some cool CSS loading effects for grid images. You can use them on your portfolio, blog, or anywhere you want. The setup is quite simple. We use Normalize.css as an alternative to the traditional CSS reset, ZURB Foundation to create a responsive grid, Masonry to create a dynamic grid layout, imagesLoaded to check if the images have been loaded, and Infinite Scroll by Paul Irish to load more images and append them to the gallery.

Curtain Opening Effect Using jQuery And CSS

Curtain Opening Effect Using jQuery And CSS

In this tutorial we will show you how to create a curtain opening effect using jQuery and CSS. You have seen in many shows and dramas the curtains on the stage moves to left and right side on show starting and then moves to right and left in ending that’s exactly what we were going to create in this tutorial.

Scrollanim : CSS3 and JavaScript Scroll Animation

Scrollanim : CSS3 and JavaScript Scroll Animation

Scrollanim is a CSS3 and JavaScript library to create stunning scroll animations that work everywhere.Scrollanim uses kissui.position to manage and track elements. Please note that kissui.position is a builtin dependency and you don’t need to include anything in your page.

Multi-Layout Slideshow with JavaScript & CSS

Multi-Layout Slideshow with JavaScript & CSS

A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js.

Today we’d like to share a simple decorative slideshow component with you. The idea behind this slideshow is to have an individual layout for each slide, accompanied by a distinct effect. The images of each slide is meant to have a decorative purpose which could be suitable for an article header; or, for example, an ornamental quotes slideshow within an article.

Customizable Responsive Menu

Customizable Responsive Menu

Here is a tool where user can select a different web & mobile menu and generate a responsive menu.All you have to do is select the navigation type and generate the HTML code to be downloaded in simple easy steps. This does not stop here; this website also allows you to choose different menu styles for desktop and mobile devices to generate the HTML code for responsive menu.

Responsive 3D Folding Panel with jQuery

Responsive 3D Folding Panel with jQuery

A secondary content panel that folds flat, powered by CSS Transformations and jQuery.

3D fold effects are pretty popular nowadays, mostly because they have been integrated quite often in mobile apps. A beautiful example is the iOS Peek Calendar app. Thanks to CSS3 transformation and transitions, we can create a similar interaction in the browser!

Lightgallery.js : JavaScript Lightbox Gallery

Lightgallery.js : JavaScript Lightbox Gallery

Lightgallery.js is a full featured JavaScript lightbox gallery. No dependencies.

  • Fully responsive.
  • Modular architecture with built in plugins.
  • Touch support for mobile devices.
  • Mouse drag supports for desktops.
  • Double-click/Double-tap to see actual size of the image.
  • Animated thumbnails.
  • Social media sharing.
  • YouTube, Vimeo, Dailymotion, VK and HTML5 video support.
  • 20+ Hardware-Accelerated CSS3 transitions.
  • Full screen support.
  • Supports zoom.

Above & Beneath: Featured Content Layout Effect with CSS

Above & Beneath: Featured Content Layout Effect with CSS

Today we’d like to share a little aquatic landing page template with some special effects with you. The idea is to show a big headline in the initial view and when a grid/menu icon is clicked, the view slides down (below the water) and some featured content or menu items get shown. The transitions are accompanied by some fitting background sounds.

Multiple.js : Sharing background across Multiple Elements

Multiple.js : Sharing background across Multiple Elements

An experiment in sharing background across multiple elements using CSS without any coordinates processing by JavaScript.

Jets.js : Native CSS Search Engine

Jets.js : Native CSS Search Engine

Imagine a situation – your HTML markup renders at backend side, it contains some list of data. At one point you need to implement search by this list. It can be easily achieved by using Jets.js with a browser’s native search speed.



Best jQuery websites design awards