Create a Homepage Marquee with Edge Animate
This step-by-step project demonstrates how to create an interactive homepage marquee using Adobe Edge Animate, a tool for creating smooth motion and transitions for multiple screen sizes, and a combination of HTML5, CSS, and a little custom jQuery. Author Chris Converse shows how to build the buttons, captions, and navigation elements; detect rollovers and other interactions; animate the artwork and effects; and ensure your design works equally well with mobile and tablet layouts.
- Setting up your project
- Creating buttons and converting them to symbols
- Animating symbols
- Detecting a mouse rollover on the stage
- Creating custom interactions with jQuery
- Styling buttons and navigation elements with CSS
- Creating a rollover effect with jQuery
- Adding and removing custom debugging code
Previewing the final project
(music playing) Hi! I am Chris Converse and this is a course on creating an animated homepage marquee for your website using Adobe Edge Animate. This project is going to feature a few nice interactive user experiences. One, if the user rolls their mouse inside of the marquee, it will stop the automatic animation so the user can interact with navigation buttons or the Learn More buttons. When we resize the browser, the design is also going to conform to the browser size, giving us a responsive design technique that's going to be useful for multiple size screens.
And we will also be linking the navigation to the timeline, so users can click on the navigation items and jump to any panel that they want to see. So I hope this course sounds interesting to you, and if so, let's get started.
Find answers to the most frequently asked questions about Create a Homepage Marquee with Edge Animate .
Here are the FAQs that matched your search "" :
- Q: I can't get the code to detect a mouse rollover on the main stage to work in Edge Animate 2014.1.
- A: Adobe removed jQuery from the default set of files in Edge Animate. If you use click the + icon in the Scripts panel, select the "from URL" option, and link to a URL version of jQuery, such as the one listed here, the course will work fine.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Illustrator CC 2013 One-on-One: Fundamentals1,633,291 Views
Edge Animate Essential Training590,974 Views
Illustrator CC 2013 One-on-One: Mastery286,020 Views
Muse Essential Training1,405,772 Views
PHP with MySQL Essential Training3,907,848 Views
Illustrator CC 2013 One-on-One: Advanced376,037 Views
iOS 8 App Development with Swift 1 Essential Training999,394 Views
Illustrator CC 2013 One-on-One: Intermediate526,337 Views
After Effects CC Essential Training2,533,490 Views