.. Your Daily Design Dosis

10+ Fresh and Awesome jQuery/CSS3 Plugin Tutorials

| 3 Comments

CSS3 will redefine the possibilities in web design and web development more and more. When combined with an action oriented language such as jQuery, the range of effects and applications that can be created are amazing.

There are a lot of jQuery and CSS3 tutorials on the interwebs where newbie as well as professional designers and developers can get some great ideas on how to use both ‘languages’ to create awesome (visual) effects. In this article you will find a fresh and useful collection of tutorials and techniques that make use of cool CSS3 properties and are powered with some jQuery, hope you’ll like my hand-picked collection?

In case you’ll be needing responsive jQuery plugins, please check these posts: 10 Free and Responsive jQuery Slide/Gallery Plugins and jQuery Plugins for Fluid Layouts/Responsive Web Design. But enough babbling for now, let’s hit the road Jack!

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

Source

Smooth Scrolling to internal links with jQuery

jQuery allows you change the way you interact with your website with very little code. jQuery has an animate function which allows you to animate anything that jQuery does, including scrolling. Animate scrolling creates a better effect to the visitor than to just job to a place on the page.

JQuery Interal Link Scrolling

Source

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

Source

Halftone Navigation Menu With jQuery & CSS3

Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Halftone Navigation Menu

Source

Typography Effects with CSS3 and jQuery

Today 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. We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines.

Typography Effects

Source

Making a Page Flip Magazine with turn.js

The page flip effect used to be the quintessential Flash animation. In this tutorial we are going to use PHP and the turn.js plugin, an implementation of the page flip effect with pure CSS3 and jQuery, to build a pretty magazine. We will fetch the most popular images from Instagram every hour, and use them as pages.

Page Flip Magazine with turn.js

Source

Thumbnail Proximity Effect with jQuery and CSS3

Today 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. We will be using the jQuery Proximity plugin by James Padolsey.

thumbnail proximity effect

Source

CSS3 & jQuery folder tabs

Nice tutorial combining CSS3 and jQuery to  create folder tabs. This is just another small example that shows the CSS3 awesomeness. Everything is great also for older browsers, the tabs degrade nice.

CSS3 & jQuery folder tabs

Source

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. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

3D Gallery with CSS3 and jQuery

Source

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.

Ribbon DropDown Menu with CSS3 and jQuery

Source

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

Next in the Orman Clark’s coded PSD series is his awesome looking Vertical Navigation Menu. We’ll recreate it with CSS3 and jQuery while using the minimal amount of images possible. The only images we’ll be using are for the icons.

Source

Parallax Content Slider with CSS3 and jQuery

A simple parallax content slider with different animations for each slider element and a background parallax effect. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself.

Parallax Content Slider

Source

TouchTouch – A Touch Optimized Gallery Plugin

I want to share a little experiment with Tutorialzine readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.

A Touch Optimized Gallery Plugin

Source

Arctext.js – Curving Text with CSS3 and jQuery

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Curving Text

Source

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

3 comments

on this article: “10+ Fresh and Awesome jQuery/CSS3 Plugin Tutorials”
  1. Waow, waow , too many goods tutorials i have to make time to try them all O,O, thanks for sharing GTG.

    • Hi Jesus,

      thanks for your super kind words and a new abbreviation (GTG ;-P)! Glad you liked them as much as I did .. and I have the same problem, finding time to look thoroughly at the codes and to experiment with them (I have the ‘bad’ habit to check if I can tweak the codes to make the plugin responsive ;-P). Some of these CSS3/jQuery Plugins I already had the pleasure to investigate better ;-P

      Wish you lots of success playing around with these, I know you’ll enjoy it! Have a great day, mate! Cheers & Ciao ..!