15+ Useful and Fresh jQuery Plugins for your Site

jQuery is a Java script library which is designed in order to simplify the scripting of HTML. Learning jQuery can be great fun and engaging for developers. When using jQuery the range of effects and applications that can be created are mindblowing.

jQuery can be defined as a cross-browser JavaScript library. It is basically designed to simplify the client side scripting of HTML. jQuery is free and open source software that has been in use since it was introduced six years back in 2006. jQuery is one the most popular and efficient JavaScript library used today.

In this post I’ve collected 16 recent web design tutorials that explore the true potential of HTML5, CSS3 and with a mix of good old jQuery, hope you’ll like it! So .. let’s rock!

Swatch Box with CSS3 and jQuery

A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.

Source

 

Making an Impressive Product Showcase with CSS3

Impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic!

Source

 

Interactive Menu with CSS3 & jQuery

The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.

Besides being a menu, this example can also serve as a perfect single page website. For example, just think that a block can be named “Contact” and could contain a nice contact form.

Source

 

How to Create Login Form with CSS3 and jQuery

In this tutorial we will code the Login Form that you can find in Futurico UI Pro made by Vladimir Kudinov. To create it we will use CSS3 and jQuery.

Source

 

Slideshow with Impress.js

You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.

Source

 

Create Calendar using jQuery and CSS3

In this tutorial we will code the jQuery and CSS3 Calendar that you can find in Futurico UI Pro made by Vladimir Kudinov. To do it we will use CSS for all the styling and for “functionality” we will use jQuery and jQuery UI. From jQuery UI we will only use the “Datepicker” script. So you don’t have to download all the components available in jQuery UI and the file size will be lower.

Source

 

Portfolio Flipping Slider Using jQuery & CSS3

There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

Source

 

Fullscreen Slit Slider with jQuery and CSS3

In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll cut the current slide open in order to reveal the next or previous slide. Using different data-attributes, we’ll define the type, rotation angle and scale of a slide’s parts, giving us the possibility to create unique effects of each slide transition.

Source

 

Perfectly Rotate and Mask Thumbnails

Ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. Saying that, if you’re not achieving the rotation effect with CSS, you’re working too hard! Learn how to do it right!

Source

 

Creative Web Typography Styles

With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will also add hover transitions to make things a bit more interactive.

Source 

 

3D Thumbnail Hover Effects

In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.

Source

 

Classic Digg-Style Radio Buttons with CSS and jQuery

For this tutorial we explain how we can build custom radio button links similar to the old Digg category selection. You can click on any set of links which will also trigger an active state on the correlated radio input. This is one of the best ways to style a web form using a bit of simple JavaScript to enhance the user experience.

Source

 

3D Flipping Circle with CSS3 and jQuery

We’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

Source

 

FrameWarp – jQuery plugin for displaying pages in a neat overlay

While working on an exciting new web app, I found that I needed a way to show certain pages in an overlay window. This comes handy if you want to reuse something like a sharing or a settings page in different screens of your app.

Source

 

Google Play’s minimal tabs with CSS3 & jQuery

The tab navigation is an element you often meet in your daily browsing. There are so many ways, so many styles, but the idea is the same: you click a tab and see its content without a page refresh. In this article you’ll learn how to build some new CSS3 & jQuery tabs inspired by Google Play‘s design.

Source

 

Vertical Showcase Slider with jQuery and CSS Transitions

In this tutorial we will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, we will slide the preview section and the section with the description in opposite directions.

Source