How to wireframe slide-in elements on scroll
Adding a Slide-In on Scroll effect to your web wireframe design basically allows you to slide in elements from the outside of the page into the visual view port, as you scroll down. You can see an example here.
This tutorial will show you how to slide-in a dynamic panel either from the left or from the right when you reach a specific scrolling value.
Add a Slide layer to your web or mobile wireframe
To create a slide-in effect in your wireframe, drag a Slide left layer or a Slide right layer into your canvas. Once you place either layer (or both) on the canvas and simulate your web wireframe, the widgets will not show upon page load, but will slide in from left and/or right into the canvas when you start scrolling and the specific scrolling position value is reached.
Parallax widgets are ready for you to simply drag and drop onto your canvas. However, if you wish to edit the default widgets, check out the next section to understand how to setup the interactions.
Tip: allow for enough page scrolling for the layers to slide in when simulating
The default events in the Slide layers
Each “slide layer” widget is a dynamic panel that includes the following two events by default.
—“on Page Load“: this event applies to the “initial position” label, which will store the relative y-coordinate value of the dynamic panel so you can use it later to define scrolling conditions.
—“on Scroll“: this event is applied to the dynamic panel as a whole. For the dynamic panel to slide-in from a specific side of your web wireframe, we have defined an “on Scroll” event with a “Show” action that includes a “slide left/right” effect, where scrolling (“on Scroll”) triggers the “Show” action from either side.
While the above mentioned events make the slide layers show up, we must also set up the conditions to make them do so at the right moment.
The first part of the condition specifies that the panel should only show when the vertical scroll position (“Window Scroll Y”) is greater than the y coordinate value of the dynamic panel (“initial position”), which is the value previously stored by the “on Page Load” event mentioned above.
The second part of the condition specifies that when the dynamic panel is already showing, the slide-in effect will not be triggered again.
You can tailor the Slide right/left layers to fit your needs, by editing the elements in the dynamic panels and the “Show” action effect in the event.
You can also edit the “initial position” scrolling value to any specific position by replacing the value box with a number.
Further prototyping with Parallax
This tutorial covers the “Slide right/left layer” parallax widget, which you can combine with other design elements to make unique web and mobile wireframes. Prototyping with parallax has a lot of other functionalities that can be combined to create incredible app or web wireframes:
– Create a fixed position menu in your web or mobile wireframe. Learn how!
– Pinned layer: pin a sticky element to a specific location in your web or mobile prototype, so it is always visible as you scroll down. Learn how!
– Pinned panels: pinning panels to a specific position allows you to create fixed/sticky elements that stay in place and are always visible when scrolling. Learn how!
– Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrolling. Learn how!
– Scrolling speeds: use different scroll speeds for different elements, in order to provide additional effects to your Parallax scrolling. Learn how!
– Parallax from scratch: create a parallax scrolling effect so that, upon simulation, the elements remain fixed in position on vertical scroll. Learn how!
– Create a one page scroll: create a one page scroll, a single-scroll layout for a group of sections on a page. Learn how!