Create Animated Rollovers with jQuery
Take a look at the finished web site here.
- Updating the CSS to prepare for animated captions
- Adding the jQuery hover statement
- Animating the thumbnail filmstrip backgrounds
Previewing the project across browsers and devices
(whooshing) - [Voiceover] Hi, this is Chris Converse, and this is a course on creating some animated rollovers for your website, using jQuery. So I want to start by opening up the Final Project, inside of the Exercise Files, and take a look at what we're gonna be creating throughout the course. In the first option, we're gonna be using jQuery to simply change elements that are already on the screen. And we're actually gonna use content from a previous course called "Creating an Interactive Video Gallery," as content for the course. Of course, you can use these same techniques in any website, targeting any HTML elements.
Now, in the video course, we had captions that were over top of these thumbnails. In this course, we're gonna take those captions and move them off the stage, so that we can't see them over top of the individual thumbnails, and when I roll my cursor inside of the thumbnails, we're gonna animate those captions up. We're also gonna take the play icons, set their transparency to about 50%, and then we're gonna bring the opacity of those up as well. In addition, if captions have different heights, we're actually gonna move the play icon so that it overlaps the caption box by the same amount each time. So when I roll over the next thumbnail, which is a three-line caption, you'll notice the icon will move up as well.
I roll into a caption that's only got one line of copy, the icon will move down again, to make the relationship of the play icon and the caption, the same. Now, in the second option, we're gonna change the background picture of the thumbnail as well. So let me open up option two, inside of our browser. Now, the first thing you'll notice in the lower left is we have a timer that's constantly counting, and if I roll my cursor inside of the thumbnails, we'll see that the background graphic of the thumbnail is changing, in addition to the animation of the play icon and the animation of the caption.
Now, as I roll into each one of these, we'll be switching the background graphics using CSS changes from jQuery. And this will give us a little bit of a more dynamic feel for the individual key frames for the video. Now, since we are standardizing on jQuery here, we do get the same user experience across different platforms. If we move over here into Windows 7, running IE9, I'm gonna take option two and just drag that into a browser and take a look at the same user experience running on Windows and IE9.
And next we'll move over to Windows XP. Now, over in XP we're gonna get the same user experience inside of IE7 and 8, as well. However, there's one thing that we can't support inside of 7 and 8, and that is setting transparency on an already semi-transparent PNG file. So one thing you'll notice when I roll into each one of these icons is once the icon has some transparency applied to it, through CSS and through jQuery, we'll get this black halo that shows around the outside of the PNG file. When I roll away, the PNG file will pick up its semi-transparency, but we won't be able to get rid of that black halo.
Create a Sliding Tabbed Panel with jQuery70,277 Views
Create an Expandable FAQ Listing with jQuery39,471 Views
HTML5 Projects: Integrating Google Store Locator46,252 Views
Create an Animated Bar Chart with jQuery44,547 Views
HTML5 Projects: Personalized Ads35,069 Views
PHP with MySQL Essential Training4,283,533 Views
Deke's Techniques1,567,617 Views
Git Essential Training2,861,219 Views
jQuery Essential Training1,042,234 Views