Edit element when it gets scrolled into viewport


#1

Hi together,

I want to have an element, which is defaultly hidden and below the viewport frame, to fade in and show when it get’s into the viewport.
Also I want to change the opacity and/or color of an element based on the scolled position of the viewport.

  1. Is there any possibility to track whether an object is in the viewport or not?
  2. Is there a possibility to acutally map the scrolled position to the y achsis of the mocks?

Thanks a lot.


How to show/hide widgets only when certain things are visible in the viewport REGARDLESS of screen resolutions using Window.Scroll
#2

Hi!

The top of the viewport is [[Window.scrollY]]. The bottom of the viewport is [[Window.scrollY + Window.height]]. So to test if something is fully visible in the viewport, put these two conditions in, specifying that all must be true

(value) [[widget.top]] is greater than or equals [[Window.scrollY]]
(value) [[widget.bottom]] is less than or equals [[Window.scrollY + Window.height]]

#3

Yes, you should be able to do this, depending on what you mean by “viewport” and “change color.” You can track the x and y location of any widget by referring to the widget’s properties. Standard location/position properties are .x , .y , .top , .bottom , .left , .right . You can track the amount of scrolling in the Window Scrolled and/or Window Scrolled Up and Window Scrolled Down events with the Window.scrollY and Window.scrollX properties. Here is the Axure documentation on widget properties:

The viewport could refer to the entire browser window, an inline frame, or a dynamic panel. By definition, if an element is not within the viewport area it cannot be seen so is effectively hidden–you don’t have to actually Hide and Show widgets based on scroll position. To achieve the fade effects you could try to track Window.scrollY and MyWidget.y and set the opacity of the widget accordingly, but i think it would be much easier to set up a masking widget in front of your “element” widget. The mask would be a rectangle widget with a gradient fill from 100% to 0% (both points in same color as your background, e.g., white) so that as the element gets scrolled underneath it, it would appear to fade in/out. You could place a mask at the top and/or bottom of your viewport. If it is for the entire browser window you can convert the mask(s) to dynamic panels and pin them to top/bottom with “keep in front” option. If you only want one/few widgets to fade in, then only place those widget(s) behind the mask. Anything in front of the mask would not get “faded.”

To handle color changes, how many colors do you need? If only two colors then I would recommend using a Selected style to set the second color. Use the Set Selected action to select/unselect the widget (unselected being normal or default color.) If three colors you can utilize the Disabled style, or if three or more colors, I would recommend using a dynamic panel and changing states, where you have a different state for each color. If you want the color to gradually change you might be able to achieve this by adding a “fade” animation effect for the Change State action, but tying this into a scroll position may not work so well.

Yes, you could set up a hotspot (or any widget) as a dynamic panel, pin the panel to the browser window (so it will not get scrolled) and send it to back (don’t pin to front of window!) --and keep the default “Fit to Content” option. Set the hotspot widget (inside that dynamic panel) to size itself to the viewport (e.g., [[Window.height]]) in its Loaded event to make the dynamic panel the same height (and/or width) of your viewport area. Then, in the Window Scrolled event test with conditional case if the area of your widget is over the area of the dynamic panel.

Aha! I see that @josephxbrick just posted an algorithm to do this, as I’m editing my post. So there’s another way you could do this.

Not really, as the y-axis (the page grid) will get scrolled along with the window. So, lets say your widget is at y = 200. When you scroll the window that widget will move relative to the browser window but its position will remain at y = 200.


How to show/hide widgets only when certain things are visible in the viewport REGARDLESS of screen resolutions using Window.Scroll
#4

Thanks for the detailed description of how I can solve the problem. I think the tip with the y axis tracking and the conditional conditions make me realize what I have in mind. Thank you for your help and putting me on the right track. :clap:


#5

Thanks those two conditions will help realizing the solution!


closed #6

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