50 Cool jQuery Effects and the Best CSS Animations

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.

progression

Strength.js

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

Strength

Panorama Viewer

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

Panorama Viewer

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.

Flip-Quote

Tab Styles Inspiration

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

35 Cool jQuery and Css Animation Effects

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.

35 Cool jQuery and Css Animation Effects

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.

35 Cool jQuery and Css Animation 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.

35 Cool jQuery and Css Animation Effects

Adaptive Modal

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

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.

Attractive Animated 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.

ElastiStack

Owl Carousel Slider

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

Owl Carousel Slider

Covering-Bad

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

Covering

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.

Buttons With Built-in Progress

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.

inline help tips

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.

35 Cool jQuery and Css Animation Effects

Ideas for Subtle Hover Effects

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

 Ideas for Subtle Hover Effects

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.

Animated Arrow Navigations

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.

Remodal

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.

floatlabels

Subscribe Better

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

Subscribe Better

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.

flowtype

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.

Arrow Navigation Styles

Cool Social Buttons

A pretty set of social share buttons.

Cool Social Buttons

Awesome slide hover animation

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

awesome slide hover animation

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.

EasyZoom

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.

Shuffle Images effect

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.

HexaFlip

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. ContentShare

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.

Facebook Style Notification Popup

Ajax Upload and Resize an Image

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

Ajax Upload and Resize an Image with PHP

Login Page with Shake Effect

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

Login Page with Shake Effect

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.

Timeline Design

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.

jQuery Image Slideshow

Sideways Jquery Full Screen Image Gallery

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Jquery Cursor Following Menu

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Jquery Animated Responsive Image Grid

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Jquery Chop Slider

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Magnifying glass for image zoom using Jquery and CSS3

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Responsive jQuery Image and Content Slider

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Flyout Image Slider

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Portfolio Flipping Slider Using jQuery & CSS3

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Create a simple jQuery hover call-to-action box

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

New Search Form Using Jquery

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Circle Hover Effects

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Grab Dribble Feed

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Modern Light box With CSS3

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Camera API

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Flipping Circle with CSS3

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Swatch Book

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Image Accordion

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Jquery Triple Panel Image Slider

30 Fresh and Useful CSS3 & Jquery Effects with Tutorials from 2012

Edoardo L'Astorina

Edoardo L'Astorina

Edoardo L'Astorina has 15 years of experience in software development. Edoardo has had a major role in the new Transport for London site and led the development of the new Royal Opera House site. Edoardo has developed sites and apps for Intuit, Stint, JPC, The Crocodile and Miura Edoardo started Blu Frame to help companies develop sites that stand out, load fast and are easy for users to access Edoardo is passionate about risotto, Terrence Malick movies, Oasis songs and rowing