Best jQuery Animation 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.

jumpyScroll – Plugin for Quick Page Scroll With Animation

jumpyScroll - Plugin for Quick Page Scroll With Animation

jumpyScroll plugin enhances the page scrolling from section to section, like a slider, only vertically.

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.

Flik Timeline : WordPress Responsive Timeline Plugin

Flik Timeline : WordPress Responsive Timeline Plugin

Build a simple, interactive, historical timeline with FLIK TIMELINE. The benefits of this timeline is that it’s simple, able to handle nearly any form of content (including image slider, thumbnail slider), printer friendly, and highly customizable .

  • Unlimited timeline for in post or page
  • Show images like slider or thumbnail slider
  • 5 different style
  • 8 different animation effect
  • Horizontal and vertical styles

baffle.js : JavaScript library for Obfuscating & Revealing Text

baffle.js : JavaScript library for Obfuscating & Revealing Text

A tiny javascript library for obfuscating and revealing text in DOM elements.

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!

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.

Clipped SVG Slider

Clipped SVG Slider

A simple slider, with morphing preview images animated using SVG properties.



Best jQuery websites design awards