Get a site

A collection of simple, useful and cool jQuery/CSS3 Tutorials

February 29th, 2012 by Villa Tommaso Leave a reply »


Scroller is a plugin for jQuery that allows display images in the form of round markers.

Scroll jQuery

jQuery tubular

This is a really cool jQuery that i have bookmarked in my favorites, i am pretty sure i will need it and i can’t wait to use it actually. jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background.

jQuery tubular

jQuery: Smooth Scrolling Internal Anchor Links

Here’s a neat little jQuery trick to fancy up your internal anchor links, by making them scroll smoothly to their target as opposed to jumping instantly. Internal anchor links are very common place, e.g. “back to top” links, or FAQ pages which list all the questions at the top. Making them visually scroll to their target not only looks a bit fancy, it also gives some visual feedback to the user as to their new position on the page.

jQuery Smooth Scrolling

Image hover/fade effect using jQuery

For this tutorial, you will need to make two images, one which is the normal state (ie. the image which will display on the page when the mouse isn’t hovered) and also a hover over state for when the mouse is.

Image hover/fade effect using jQuery

Sliding Letters with jQuery

You want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. You can either have the same word or a different one and you can slide in the new letters all the same time or one after the other.

jQuery Sliding Effect

Animated Text and Icon menu with jQuery

This tutorial show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

Animated Text and Icon menu with jQuery


Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

Slides jQuery


LeanModal is a simple JQuery plugin for modal windows. It is built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn’t apply any styles to the target element, other than for displaying and positioning.


Notification messages with CSS3 & jQuery

Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks.In this article, you’ll learn how to create some alert messages with CSS3 and jQuery.


CSS3 & jQuery folder tabs

This Tutorial will show you how to create folder tabs using nothing more than pure CSS3.



Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.


Horizontal bar graph with CSS3 and jQuery

This is a tutorial about horizontal bar graph using jQuery, CSS3 properties (such as: gradients, border-radius, rgba) and CSS3 transitions.

Bar graph with CSS3&jQuery


Comments are closed.