Join Chris Converse for an in-depth discussion in this video Making your design responsive, part of Create a Homepage Marquee with Edge Animate.
- View Offline
- Exercise Files
Now we are going to set up parts of our design to be responsive.…When we started the project we created a width of 100% on our main stage, so this means as…our stage collapses down and our Overflow is set to hidden, our photography will be cropped…and we won't get a horizontal scrollbar in our composition.…However, the problem we are going to have is when we close the browser down, the navigation's…going to be hidden.…So in Preview in Browser here, if I close the browser down, you'll see that the navigation…actually gets hidden.…When we get under 500 pixels, this is where we'll have horizontal scrolling. But again,…our navigation can be interacted with until we open the browser up to a certain width.…
So we are going to set a responsive design property on the navigation so that it moves with the browser.…So, let's close out of Preview in Browser.…On the stage I am just going to scroll over to the right-hand side here, and when we set…up our responsive properties, we have this little ruler here that we can move back and…
- 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
Skill Level Intermediate
CSS: Transitions and Transformswith Joseph Lowery2h 25m Intermediate
1. Setting Up Your Project
Animating the panel artwork3m 55s
2. Creating and Animating Symbols
3. Setting Custom Variables and Functions
4. Creating and Linking the Navigation
5. Creating Custom Interactions with jQuery
6. Linking the Caption Buttons
7. The Final Details
Removing the debugging code1m 14s
Where to go from here1m 26s
- 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.Cancel
Take 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.