Join Chris Converse for an in-depth discussion in this video Halting animations based on user interaction, part of Creating a Responsive Homepage Marquee.
- Now, one thing that I don't like…with interactive animated content…is that, if I'm trying to interact…with the content, I don't want the animations to play.…So, if I'm trying to click on any…of the navigation elements or the buttons,…I don't want the animation to play…or the marquee panel to advance.…So, to stop this, we're gonna go back…to our JavaScript file and we're gonna set…a hover detection inside of the…marqueeMultiPanel function.…Let's come in here after our for loop…and let's first search for the marquee container.…Dollar sign, parentheses a string,…we'll search for .marquee then outside…of the parenthesis we're gonna type .hover…another set of parenthesis and a semi-colon.…
Now, the way the hover function works in jQuery…is we put two functions inside…of the parenthesis for hover.…The first function detects when the user rolls…their mouse into an area and the second…function detects when they roll…their mouse out of the area.…So, let's come in here inside of the parentheses.…We'll type function beginning and ending parenthesis,…
Author
Released
5/5/2015- Creating SEO-friendly markup for the marquee data
- Linking CSS and JavaScript files
- Adding and populating an HTML debug area
- Creating a marquee timer
- Injecting HTML markup
- Creating navigation buttons
- Halting animations based on user interaction
- Loading and cross-fading content
- Styling the marquee with CSS
- Setting up the timer and interactions with JavaScript
- Using media queries for more precise responsiveness
Skill Level Intermediate
Duration
Views
Related Courses
-
Applied Responsive Design
with James Williamson6h 1m Intermediate -
Building a Responsive Single-Page Design with Sass
with Ray Villalobos4h 55m Intermediate -
Creating a Responsive HTML Email
with Chris Converse1h 43m Beginner
-
Introduction
-
About the exercise files1m 49s
-
1. Setting Up the HTML for Structure and Content
-
2. Manipulating and Storing HTML with JavaScript
-
Creating the marquee timer3m 56s
-
3. Creating CSS for Layout and Design
-
Styling the panel content3m 39s
-
4. Setting Up JavaScript Times and Interactions
-
5. Making Adjustments for Smaller Scenes
-
The final details1m 45s
- Mark as unwatched
- Mark all as unwatched
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.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Halting animations based on user interaction