Explore how the [[Window.scrollX]] and [[Window.scrollY]] properties work. Use [[Window.scrollY]] in conditional statements in the OnWindowScroll event to show and hide elements as the user scrolls.
- [Instructor] If we're prototyping a website design…that's longer than the browser window,…we may want to set up some different effects…or animations that happen as we scroll through our site.…We can do this by using the window.scrollY property.…Window.scrollY will tell us the distance…that we've scrolled from the top of the page.…So we can use it to set up a lot…of different scrolling interactions.…If we're working with a website or app…that has a horizontal layout,…there's another property we can use,…window.scrollX that will tell us how far…we've scrolled horizontally.…Let's see how we can use the window.scrollY property…to set up some animation in a prototype.…
I've got my exercise file open here for Crested Mountain…and it already has a few interactions set up…in the on page load event.…When I click to preview, you'll see…there's a background image that fades in…and then a headline that shows up afterwards.…But then after that, there's not much else happening.…When we scroll, everything's pretty static.…
- Using variables in Axure
- String methods in Axure
- Truncating text strings
- Formatting dates and times
- Setting up a looping animation
- Setting up a responsive background image
- Positioning widgets in the browser
- Repeater and item properties
Skill Level Advanced
1. Widget Properties
3. Dates and Times
4. Window Properties
5. Repeater and Item Properties
6. Global Variables
Global variables2m 14s
Using plugins on Axure Share2m 49s
8. When Things Go Wrong
- 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.