Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Let your users control your HTML5 animation with their scroll wheel, trackpad, or even the browser's scroll bar. Learn to create an engaging user experience with scroll effects by combining scroll detection and responsive design with Edge Animate. This course will teach you to add custom jQuery scripts to your Edge Animate project, and control specific elements of your composition. Author Chris Converse also shows how to add controls for touch devices like the iPad that don't have scroll input.
This course was created by Chris Converse. We're honored to host this content in our library.
Hi, I'm Chris Converse, and in this course I'm going to show you how you can control your Edge Animate compositions using the browser scroll position. This technique will work for scroll wheels, track pads, and even the browser's built-in scroll bar. Now, considering that touch devices don't handle scrolling the same way desktop computers do, we'll also be adding in detection for touch devices. And adding in navigation and swipe gestures so that your animation will work on those devices as well. This course will teach you techniques to optimize the user experience of your animation across a wide range of devices, including the use of responsive scaling.
The exercise files for this course are available to all members of the Lynda.com online training library and include the Edge Animation file, SVG Graphics and a series of code snippets that you can cut and paste into place as you watch the course. So, download the exercise files and let's get started.
There are currently no FAQs about Scroll-Activated Animations with Edge Animate.
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.