Fine-Tuning Interaction Controls

[jStuch]

Hi,

I've got an arrow hovering over my page. I need it to move from left to right depending on how far the user has scrolled down the page. It's to form a sort of 'progress indicator'. So at the top of the page the arrow is sitting on the left edge of the page. When you scroll to the bottom of the page the arrow should be sitting on the right edge of the page. I've set triggers as you scroll down the page that continually reposition the arrow.

The problem I have is making it responsive. If I bump the arrow across based on Pixels it will of course not work on multiple devices. I've tried using the % option - but it's very similar to the Pixel option. Is there some way of setting it's position to a percentage width of the page? This way regardless of the device - if it's 66% through scrolling down the page then it can set 66% across the page etc?

Hopefully that makes sense
I'm going to go to bed and tackle it further in the morning

PS - I didn't have to necessarily be a triangle moving left and right. But I do need something denoting the progress of scrolling throughout the length of the page. If anyone has any better ideas I'm open to them

PPS - I can't share the link to the page because unfortunately some of the content is confidential at this point - sorry

Thanks!!

[jStuch]

This was the mockup we were initially trying to create:

1. The triangles take you to sections on the page
2. The Titles for each section appear whenever you hover over a triangle
3. Spheres denote your progress throughout the page
4. The progress bar hovers at the bottom of the screen as you scroll

As mentioned we have changed this slightly so that now a scrolling triangle points to your progress along the page and larger circles indicate links to key sections etc.

Hopefully that helps

Thanks again!

[system]

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.