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.
Download | View Demo | Link Site
Using CSS3 to Create Pretty Buttons
Once upon a time when a web design required a nice, functional and scalable button it needed to be designed in photoshop at first, implemented with the sliding doors technique later and you may have had to spice things up with a little javascript in the end. With CSS3 everything is changing – everything is easier and certainly better
Download | View Demo | Link Site
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.
Download | View Demo | Link Site
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 inthis page) using jQuery. It is required that you have basic knowledge in HTML, CSS and jQuery to complete the tutorial.
Download | View Demo | Link Site
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+
Download | View Demo | Link Site
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!
Download | View Demo | Link Site
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.
Download | View Demo | Link Site
jQuery’s Data Method – How and Why to Use It
jQuery’s data method gives us the ability to associate arbitrary data with DOM nodes and JavaScript objects. This makes our code more concise and clean. As of jQuery 1.4.3 we also have the ability to use the method on regular JavaScript objects and listen for changes, which opens the doors to some quite interesting applications.
Download | View Demo | Link Site
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
Download| View Demo
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.
