Creating Scroll Effects

The Scroll Effect widget uses positive and negative values to determine the speed and direction of your objects scroll. Within the Start Handle Option Panel the value 1 is normal. Use values as multipliers to create the desired scroll effect. 

For further information on using the widgets' handles visit The Start and Finish Handles. 

---

 

Scroll Direction

Positive values move objects to the right and up the page. Negative values move objects to the left and down the page. Use the same value for the Horizontal and Vertical Speed to make an object move diagonally.

 

 

 

---

 

Scroll Speed

The scroll speed of items is based on 1 being normal scroll speed. To make the scroll speed greater than the normal speed use values greater than 1 or less than -1. To make items scroll speed less than the normal speed use values between -.99 and -.01 and .01 and .99. Use 0 to make items remain static on the page. Horizontal and Vertical speed values can be up to two decimal places.

Example: -2 and 2 make the scroll speed twice as fast while -.5 and .5 make the scroll speed half as fast.

 

---

 

Opacity Transition

Control the opacity of an item as it scrolls between the two handles. Select the Opacity box and input the Opacity percentage the item will have before the Start handle and after the Finish handle. Use the Transition Gap to determine how long (in pixels) the item will take to transition. 

 

 

 

---

 

Layer Order

Override page layering by selecting Top within the Layering Order dropdown. Otherwise keep this option at Normal to keep page layering. 

 

 

 

---

 

One, Two, Three Effects

With the Scroll Effects widget you can control the scrolling speed, direction and opacity of the objects. Use the handles and Option Panel to control how many effects an object may have. 

One Effect

To make your object have one effect, only add a Start handle to the page and input the same scroll effect values into the Before the Start Handle and Between the Two Handles areas.

Two Effects

To make your object have two effects, only add a Start Handle to the page and input the first effect you would like into the Before the Start Handle area and the second effect you would like into the Between Two Handles area.

Three Effects

To make your object have three effects, add the Start and Finish handles to the page. Be sure to make the distance between the Start and Finish handle is greater than the browser height. Next, input the values for the first, second and third effect into the Option Panel.