Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding a wraparound effect to the autoplay

From: Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver

Video: Adding a wraparound effect to the autoplay

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.

Adding a wraparound effect to the autoplay

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.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Add a Wraparound Effect for a Marquee with jQuery and Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.