Join Joseph Lowery for an in-depth discussion in this video What we're going to build, part of CSS: Transitions and Transforms.
- View Offline
Ready to tackle a full-fledged transition and transform project? In this chapter we'll build a very cool photo carousel that combines 2D and 3D effects for an enhanced user experience, and it also gracefully degrades for older browsers. Let's take a look at the final product, so you have an overview of what we'll be tackling. So I have opened here in my browser spotlight.htm file from the Chapter 5/ 05_01 Final folder, and here in the middle of the page I have an intriguing series of images. The middle image is in a standard rectangular shape and a couple of images to the left and right slightly angled.
So if I go and hover over the middle image, it scales up nicely to about twice its original size, and it's framed by a nice little drop shadow, and when I move my mouse away, the image returns to its original size and the drop shadow disappears. Now if I hover over any of the other images, nothing like that happens, so it's only on the center image. I can also see something else in the background between the three images, but I can't really quite make out what it is. Well, perhaps if I click the Next button here on the lower right.
All right, my circle or carousel if you will, of the images is rotated, now putting the one image previously on the right, front and center. And if I hover over that image now, it scales up, so I can see more detail and grows a drop shadow. Okay, by clicking Next again, I can see that there are a series of images. They're actually ten in all, and now, pretty obviously, if I click Previous, the carousel will reverse itself, all pretty nifty. Now there is one other button on the top-right, labeled Toggle Axis that's caught my eye. Let's see what that does.
Beauty, as my Canadian friends would say, the images rotate and fly into their new position to create a vertical carousel, and all my interactive controls, including the hover, work as before. And if I toggle the axis again, we go back to horizontal. I adapted the code for this project from a demo created by David DeSandro. He's got a real testbed going on here where you can interactively increase or decrease the number of images, as well as toggle the backface visibility on and off. Let me show you what I mean.
So, right now we have nine images here, and if I scale it up to--oh, let's say 16, 16 separate panels now appear. And like the carousel we're going to build, there are Next and Previous buttons, as well as a button for toggling the carousel axis. One control that I left out of our variation was the toggle backface visibility, because it didn't seem to make as much sense in context, but let me show you what it does. So if I click on toggle backface visibility, I get an arc if you will of the carousel without seeing the background and everything still works, and my carousel works as well.
Now I can toggle the backface visibility back on if we want and play with it over and over again. Now there are a few other differences between the version we're going to build and the demo version. I added the hover scale up feature, and I also made it backwards compatible with older browsers. For those browsers, viewers will see a single image straight on, and when they click Next, the next image will appear just like a regular slideshow. They won't of course, see the 3D carousel or the control that toggles the axis. I hope you're as excited about this innovative presentation tool as I am, and ready to get started building it. Let's get going!
- Understanding transition basics
- Working with 2D and 3D transforms
- Animating color changes
- Fading objects
- Changing the size of page elements and fonts
- Transitioning multiple properties at the same time
- Understanding keyframes and animations
- Working in the z-index
- Crafting transitions in Dreamweaver