Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Outside of the parentheses, we are going to type window.photoWidth. Then we are going to multiply that times window. totalPanels+1. Then let's come out to the beginning of that line. Let's put both of those statements inside another set of parentheses. Then inside of the ending parenthesis, we are going to multiply that times -1. Then outside of the parentheses, plus, two tick marks for a string literal, semicolon, and then inside, the letter px.
So with our new photo position, let's hit a few new lines. Start with dollar sign, parentheses, two tick marks inside for a string literal, .marquee_photos. Outside, type animate, beginning and ending parentheses, semicolon. Inside of the animate statement, let's put beginning and ending bracket. Inside of the brackets, we are going to type left:. Let's come up here and copy the variable name newPhotoPosition.
Now outside of the brackets, we are going to type comma, space, 1000 milliseconds, and then a comma, space, function, beginning and ending parentheses, beginning and ending bracket. Let's split that open on the brackets. And inside of this callback function, dollar sign, parentheses, tick marks inside for a string literal .marquee_photos, outside of the parentheses .css beginning and ending parentheses, semicolon, inside of the parentheses for CSS, two tick marks for a string literal. Ee are going to type left, outside of the string literal comma, two tick marks for a string literal, put a minus sign in there, then two plus signs, two tick marks again for a string literal, the letters px, and inside of the plus signs, window.photoWidth.
So now what this script is going to do is redefine a new photo position. We are going to take the total panels and add one, multiple that whole value times -1, and that's going to give us an animation value of the entire photo line- up, so going all the way up to the sixth photo, which is really a duplicate of the second photo. Then we are going to animate to that new state, so marquee_photos animate, left is going to be the newPhotoPosition. That's going to happen over the course of 1000 milliseconds, or one second. Then we are going to run a callback function.
This function is going to run this statement here after the animation happens. So the photo lineup is going to animate to the extreme right side, moving to the maximum left negative value, and then once it's done, we are going to reset the CSS property back to the original state where the London photo second item is set to -700 pixels on the left CSS property. Now to test this, let's hit File > Save, let's come back out to our browser, and let's hit Reload.
Now to test this, I am going to come out and hit the fourth panel. Notice that we animate through the entire lineup because right now we only have the script in place to test from the last panel to the first. So I am on the last panel. Let's click on the first panel, and then notice that the entire photo lineup continues to animate toward the left, showing me the very last photo in the photo lineup. Now once this animation completed, the photo lineup then reset itself to the initial state that we saw when we first hit Reload, which is the photo lineup is now only at -700 pixels on the left.
So now that we have the wraparound effect working from the last panel to the first, in the next movie, we'll set up the animation states to make it work from the first panel to the last.
Get unlimited access to all courses for just $25/month.Become a member
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.