Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now in order to add the wraparound effect to our autoplay, we are going to need to go down to the function that we have called autoAdvance and make some changes inside of there. So let's scroll down to near the bottom. We'll see a function called autoAdvance. And so what we are going to do inside of here is first get rid of this conditional statement that checks to see whether the currentPanel equals to totalPanels and then sets the currentPanel to zero. Let's just delete that. What we are going to do instead is inside of this if statement where we check to see if the autoPlay equals true, we are going to put another conditional statement inside of here.
So let's add a few line returns. This statement that already exists which checks the nth-child of the marquee_nav that was clicked and then we run a trigger event on that, we are going to keep this, but this is the animation set we need for a normal animation state. And so in a conditional statement above this, we are going to check to see whether or not we are going from first to last or last to first. So on a line above, we are going to type if, beginning and ending parentheses, beginning and ending bracket. Let's split the brackets open. After the bracket we are going to type else, beginning bracket. And then this is the line we are going to keep, so let's keep that line, and then after we are going to put our ending bracket.
So inside of the parentheses for this if statement, we are going to check to see whether or not we want to change the animation based on, again, whether we are going to first to last or last to first. So inside of the parentheses, we are going to check for window.currentPanel, double equals for absolute the equality with window.totalPanels. So what we are going to do inside of here, let's come down and copy this entire statement in the else area, let's copy that to the clipboard, let's paste it inside if here, and what we want to change in here is instead of calculating the currentPanel plus one, we want to set the nth-child to one.
So let's come in here and select all of the items inside of the parentheses for nth-child. Let's hit Delete and then put a number 1. Now in the autoPlay we only ever have to detect for going from the last item to the first item, because the autoPlay doesn't play in reverse. So here we are checking to see if the currentPanel is at the totalPanels. If it is, we are going to run the animation based on the nth-child of one and then run the click event. Otherwise, we are going to let the current panel decide what the nth-child is and then we'll get our animation between, let's say the third panel and the first panel for example.
So with that change, let's scroll up to the very top. Let's uncomment out our setInterval that we did in the beginning in the movie, just so that this didn't autoplay while we were making our adjustments. Let's hit File > Save and let's go back out to our browser and hit Reload. Now to test this, I am going to move my cursor inside of the marquee. In the earlier versions when we created this course, we actually set the autoPlay to false, so notice when I roll inside of the marquee, we turn off the autoPlay so the user can interact. I am going to come over here and click on the third panel.
I am going to roll my cursor out. We can see the counter starting to count up, autoPlay is true. This will automatically advance to the fourth frame and then once the animation is set to play from the fourth frame to the first frame, we'll see that we get the same animation effect where the animation moves to the left, giving us that wraparound effect. Once the autoAdvance goes again, we'll see that it just continues to keep animating through each one of the individual pieces. And so if we let this autoAdvance just continue to play, the illusion to the users will be that there is just an endless string of photographs that just keep animating one after the other.
So with this point, we have completed adding a wraparound effect to your marquee. In the next movie, we'll talk about where you might want to go from here with this particular project.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65803 Viewers
61 Video lessons · 96493 Viewers
56 Video lessons · 110244 Viewers
82 Video lessons · 105097 Viewers
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.