Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.
Now in the first line, it sets up a variable, transformProp, that's used throughout these functions. The first function that follows that sets the initial parameters, including the default orientation is horizontal. If for some reason you wanted your carousel to appear vertically at first, you would change the value that's on line 11, this .isHorizontal from true to false. The Carousel3D prototype transform function handles the actual rotation when the Next or Previous button is clicked. What may not be obvious is that rather than rotate all the images, it's actually the outer container, the carousel itself, that rotates.
Finally, all the way down near the bottom there is a setTimeout function that appends a ready class to the body tag when everything is set to go, kind of like a jQuery document ready type function. Speaking of jQuery, well, that's our final script tag to include, so let's head back to the source code, create a new, and I'm going to link to the CDN or content delivery network copy of the latest jQuery library. So we start again with the script tag, same type and the source is going to be a URL http://code.jquery.com/jquery.js.
So let's open that up, and I'm going to walk through the code, it's not terribly long, but I did want to give you a clear view of what's happening. So after we open the tag, the first thing that happens on line 2 is we declare a variable inc, short for increment, to 1. And then we set up the overall function which has two sub-functions, the first one takes place whenever the Next button is clicked, and the actual function code starts on line 6, where you can see, I construct the string for current figure, consisting of #fig + whatever the increment value is.
Now there are some special conditions, because I am working with a set number of images, and that's with a conditional statement next takes care of. So if the increment is 10 then I set nextFig to #fig1. So we are on the very last image and the next one is going to be the first image in the series, fig1. Otherwise, the string nextFig is going to be calculated by combining our set label with increment +1. Make sense right? Now the next two lines, 12 and 13, add and remove the showFig class from the appropriate place.
So because this is the Next button, showFig will be added to the next figure to be shown, and it will be removed from the current figure. Then on line 14, I increment the variable inc, and line 15 is another check to see if we've gone out of bounds or not. So if the increment has increased to 11, we reset it to 1. Now the next function, starting on line 18 comes in to play whenever Previous is clicked. This is essentially the exact inverse of the previous function. So again, I'm setting up currentfig to be the same thing, but now, instead of if inc=10, we check to see if the increment is at 1, and if it is then previous fig, preFig, is equal to 10 and otherwise, we set it up so that preFig is equal to my standard string #fig, plus the increment - 1, because we're going in the other direction.
There are currently no FAQs about CSS: Transitions and Transforms.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.