Design, CG Graphics & Inspiration

16 New jQuery Tutorials

The great majority of people reading our blog know that jQuery is a light Javascript library, which simplifies the interaction between Javascript and HTML. It has a lot of useful Ajax and JavaScript features to allow you enhance semantic coding and user experience. Some of the tutorials presented here combine both jQuery and CSS which helps to achieve the wanted result. So why don’t you choose any of these nice tutorials and follow the motto “write less, do more”?

3D Gallery with CSS3 and jQuery

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. In this tutorial we want to share an experimental 3D gallery with you that uses CSS 3D transforms.
3D Gallery with CSS3 and jQuery in 16 New jQuery Tutorials
Demo

Item Blur Effect with CSS3 and jQuery

In this tutorial we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.
Item Blur Effect with CSS3 and jQuery in 16 New jQuery Tutorials
Demo

Lateral On-Scroll Sliding with jQuery

In this tutorial we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.
Lateral On-Scroll Sliding with jQuery in 16 New jQuery Tutorials
Demo

Direction-Aware Hover Effect with CSS3 and jQuery

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
Direction-Aware Hover Effect with CSS3 and jQuery in 16 New jQuery Tutorials
Demo

Parallax Content Slider with CSS3 and jQuery

A simple parallax content slider with different animations for each slider element and a background parallax effect.
Parallax Content Slider with CSS3 and jQuery in 16 New jQuery Tutorials
Demo

Timeline Portfolio

Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests.
Timeline Portfolio in 16 New jQuery Tutorials
Demo

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 in this tutorial – we will be spicing up a plain old product page with some CSS3 magic!
Making an Impressive Product Showcase with CSS3 in 16 New jQuery Tutorials
Demo

Making a jQuery Countdown Timer

In this tutorial we are going to build a neat jQuery plugin for displaying a countdown timer. It will show the remaining days, hours, minutes and seconds to your event, as well as an animated updates on every second. Note: the plugin is also available on Github.
Making a jQuery Countdown Timer in 16 New jQuery Tutorials
Demo

Shiny Knob Control with jQuery and CSS3

In this tutorial we will be writing a jQuery plugin for creating a shiny knob control. Aptly named knobKnob, this plugin will use CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.
Shiny Knob Control with jQuery and CSS3 in 16 New jQuery Tutorials
Demo

Parallax Scrolling Effect With CSS & jQuery

In this tutorial you will learn how to create a parallax scrolling effect using CSS & jQuery. This is a growing trend now in website design with many single page websites using this technique to create interesting and interactive websites.
Parallax Scrolling Effect With CSS & jQuery in 16 New jQuery Tutorials
Demo

Create a Ribbon DropDown Menu with CSS3 and jQuery

In this tutorial, I’ll show you how to create a simple ribbon dropdown menu using CSS3 and jQuery. The menu is cross-browser compatible so it will be easy for you to adapt in your project. And to spice up a little bit the menu, I used the superfish javascript class and “Oswald” font from Google fonts library.
Create a Ribbon DropDown Menu with CSS3 and jQuery in 16 New jQuery Tutorials
Demo

Free jQuery Photo Gallery

In this tutorial, I’ll show you how to create a minimalistic jQuery photo gallery. You can use it to present your latest works or as a photo album. You can sort projects / photos via categories menu. The gallery is cross-browser compatible so it’ll be easy for you to adapt in your project.
Free jQuery Photo Gallery in 16 New jQuery Tutorials
Demo

Thumbnail Proximity Effect with jQuery and CSS3

In this tutorial we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.
Thumbnail Proximity Effect with jQuery and CSS3 in 16 New jQuery Tutorials
Demo

Password strength verification with jQuery

In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.
Password strength verification with jQuery in 16 New jQuery Tutorials
Demo

Typography Effects with CSS3 and jQuery

In this tutorial we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.
Typography Effects with CSS3 and jQuery in 16 New jQuery Tutorials
Demo

You might also be interested in..

jQuery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made Solutions

  • AndrewG,
  • May 28, 2012

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • There are some great ideas here, thanks. I really like the ‘Direction Aware Hover Effect’ – I will definitely have to think of a reason to use that one soon. also, some of the text jquery text effects are really good. It will be great to have  a play with this and be able to use real text in the websites.

  • There are some great ideas here, thanks. I really like the ‘Direction Aware Hover Effect’ – I will definitely have to think of a reason to use that one soon. also, some of the text jquery text effects are really good. It will be great to have  a play with this and be able to use real text in the websites.