50 Cool jQuery Effects and the Best CSS Animations

If you are a web designer or developer you are already aware of how to work jQuery and CSS. CSS3 and jQuery have radically changed web development. Want to animate beautiful and amazing elements, easily and without much effort or coding? For this showcase we picked beautiful preloading effects, adaptive modal, animated hover effects, elastic effects, buttons with built-in progress bars, inline help tips, navigation arrows, CSS effects, image slider effects, navigation styles, light boxes, image gallery effects, text effects and zoom-in effects. Sounds like a whole bunch of amazing stuff, right? These jQuery plugins will fill every animation need and make your site creative and innovative. Don’t forget to subscribe to our RSS or Follow us on Twitter if you want to keep track of our next post.

Progression.js

A jQuery plugin that gives users real time hints & progress updates as they complete forms.

Strength.js

The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password features.

Panorama Viewer

Easily embed panorama pictures on your site. Via jQuery, of course

Flip-Quote

jQuery Flip-Quote creates a pull-quote from a text quote found in the document that flips once its scrolled into view. And it has a click feature that scrolls into and highlights the source of the quote.

Tab Styles Inspiration

A couple of modern and subtle tab styles and effects. They use pseudo-elements, SVG and CSS transitions.

Page Preloader

A tutorial on how to re-create a page preloader effect as seen on the website of Fontface Ninja. They use CSS animations, 3D transforms and SVG.

Notification Styles Inspiration

Simple ideas and effects for unobtrusive website notifications. A little script is employed to showcase styles – and CSS animations are used for the effects.

Inspiration for Custom Select Elements

Inspiration for styling a custom version of the select element. There are many possibilities and they explore ideas on how to let a user select a style.

Adaptive Modal

Create modal windows that can be morphed from anything with jQuery Adaptive Modal.

Attractive Animated Hover Effects

Making CSS3 animation hover effects can be really easy! Previously, I shared a CSS3 animation library called Magic Animations by miniMAC. Today, we are going to use it as the animation engine for a series of thumbnail hover effects.

ElastiStack

ElastiStack is a little script that lets you navigate through a stack of items by dragging away the one on top. It comes with elastic touch – meaning when you drag the item on top, the others will follow as if connected elastically. Keep dragging for a while and the elastic will snap, the first item will be released and the next item will pop up.

Owl Carousel Slider

This is a beautiful jQuery plugin to create a responsive carousel slider.

Covering-Bad

Put two images on top of each other, and drag to slowly reveal the one underneath. Really good!

Buttons With Built-in Progress

Progress bars have become quite popular lately, and there are lots of plugins that can help you add one to your site. But how do you make one yourself? The problem is that there are plenty of implementations already, so in this tutorial, we are going to code something different – buttons that have built in progress meters.

Inline help tips

Do you have a form? Want to explain each field with a hover-on help tip? This jQuery plugin is for you.

Draggable Dual-View Slideshow

An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view it reveals a related-content area.

Ideas for Subtle Hover Effects

Creative and subtle hover effect that employs CSS 3D translate and pseudo elements.

Animated Arrow Navigations

First thing in the morning, I read up on my news, and I discovered a recently published CSS3 tutorial article titled Arrow Navigation Styles by Codrops. Here it is.

Remodal

Remodal is a flat, responsive, lightweight, fast, easy and customizable modal plugin with declarative state notation and hash tracking. All modern browsers are supported. You can easily define the background container for the modal.

Floatlabels

Float Label Patterns found their success after a blog post by Brad Frost. The idea is based on a Dribbble Shot by Matt D Smith. The Pattern is easy to explain. When a user interacts with an input field the placeholder value moves up, and stays above the typed text. This plugin allows you to add that functionalty to your forms.

Subscribe Better

Create a better, highly customizable subscription modal or newsletter signup window.

Flowtype

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size based on a specific element’s width.

shine.js

CSS3 box-shadow has been a really good addition to CSS. I remember before CSS3 was introduced it was a pain to go from wireframe to HTML and CSS when a shadow was needed. Not anymore!

Arrow Navigation Styles

Arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

Cool Social Buttons

A pretty set of social share buttons.

Awesome slide hover animation

SlipHover applies direction-aware hover animations for your image captions. Looks really good!

EasyZoom

EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original work by Alen Grakalic. EasyZoom supports touch-enabled devices and is easily customisable with CSS.

Shuffle Images effect

Shuffle Images will display and shuffle multiple images when a user moves the mouse around. Let your users take a peek at an image gallery. Or create an interactive animation out of a bunch of static images.

HexaFlip

HexaFlip is a JavaScript UI plugin that lets you use 3D cubes as interface elements. Dive into the process and learn best practices regarding flexible UI plugins.

ContentShare

ContentShare is a jQuery plugin that lets you share a text selection on social media. Supports Facebook and Twitter out of the box and you can add more networks easily.

Facebook Style Notification Popup

Are you looking for Facebook UI features? This post explains how to create Facebook style notification popups using jQuery, HTML and CSS. In just a few lines of code.

Ajax Upload and Resize an Image

Ajax upload and resize an images without refreshing the page using jQuery and PHP.

Login Page with Shake Effect

A simple Ajax login with a welcome page using MySQL database.

Timeline Design

Learn how to design a timeline based on a JSON data feed and using the CSS pseudo elements :before and :after. Pseudo elements are used to apply special effects to selectors.

jQuery Image Slideshow

A nice photo goes a long way towards making a design stand out. Sometimes a single picture is not enough and what you really need is a smooth slideshow of images to capture the user’s attention and bring dynamics to the app. This jQuery plugin will do just that.