1. Hover Slide Effect with jQuery
Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.
2. Using CSS3 to Create Pretty Buttons
3. Rotating Image Slideshow w/ CSS3 and jQuery
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
4. Create a Slide-out Panel at the Top of Your Website Using jQuery
In this tutorial we’ll show you how to create a panel with slide-out content at the top of you page (like the one in this page) using jQuery. It is required that you have basic knowledge in HTML, CSS and jQuery to complete the tutorial.
5. CSS3 Slideup Boxes
This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+
6. Create a Flip Effect by Using CSS3
There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari and Chrome browser. Here’s a quick look at how the transform property can produce a flip effect, and how it can be used to create a super fancy one!
7. Animated Portfolio Gallery with jQuery
The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.
The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides.
8. jQuery’s Data Method – How and Why to Use It
9. jQuery Blinds Slideshow using CSS Sprites
Compatibility Works great on the following browsers:, Firefox 3.5, IE 8, IE 7, IE 6 (imagine my surprise!), Opera 10, Chrome 4, Safari 4
10. Making Better Select Elements with jQuery and CSS3
This is why, today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.