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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
Demo
You might also be interested in..
jQuery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made Solutions
