Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join Chris Converse as he teaches how to add a wraparound effect to your homepage marquee with a concise bit of jQuery code. The course covers positioning the photos, adjusting the navigation, activating the marquee, and making sure the marquee auto-plays. In a few short movies, designers can learn how to add this dynamic feature to their web sites.
For more information on creating the marquee, please watch Create an Interactive Homepage Marquee with jQuery.
Hi! This is Chris Converse, and this is a course on creating a wraparound effect for your homepage marquee. I want to start by showing the way the marquee works in the previous versions of this particular project. So if you've completed the second course in this particular series where we added an auto-play to the marquee, one of the things that we set up is we have this navigation over here that allows us to click and animate between different states of our marquee. So here, I'm on the third panel. If I click over here, we go to the fourth panel, from the fourth panel over to the second panel, and we basically animate through this photo lineup. Now, since the first version of this course, we've gotten a lot of requests for adding features. One was to add the auto- play, which is the course we're going to be starting from here.
And the second we've gotten a lot of is to add a wraparound effect. So if I'm on the fourth panel and I click to the first panel, we just want to sort of wrap it around. What currently happens is if I come out over here and click on the first panel, we animate through all of the panels in the marquee back to the first panel. If I'm on the first panel, like we are right now, and I click to the fourth panel, again, we animate through the entire photo lineup. So instead, what people have been asking for is the ability to go from the fourth panel over to the first panel. And so what I want to do is let's open up the final project up in a browser and show you what we're going to be completing at the end of this course.
Here we're on the first panel. Let's click over to the fourth panel, and then notice that the marquee moves to the right-hand side, giving us that sort of wraparound effect. I can still continue to click these buttons, and we still get the illusion that all of the photo lineup is moving to the right. And again, if I come over to the last photo, click on the first panel, we animate toward the left, and then again, I can continue to click second and third and all of the photo lineup appears to move to the left in a consistent manner. Now, from a usability standpoint, this seems really easy and trivial.
Then we're also going to do the same effect when we're on the fourth panel and the user clicks the first panel; we're actually going to animate to the right, showing the far rightmost photo which matches the second photo, and then again, snap the timeline back once the animation is complete. The user is not going to see the snapping of the photo lineup back and forth, but this snapping effect is going to give us the ability to continue to move the photo lineup either toward the right or toward the left based on what the user is interacting with. So I hope this course sounds interesting to you, and if so, let's get started with the first movie.
Find answers to the most frequently asked questions about Add a Wraparound Effect for a Marquee with jQuery.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.