MiscellaneousOptions class (Rollist)

The gradualOpacity field defines a 'from-to' pair representing a gradual opacity transition, where the 'from' value is applied near the center (at the value indicated by the selectPos field), and the 'to' value is applied to the surrounding area. The gradualOpacityTransition field defines the transition effect applied by the gradualOpacity option. The selectPos field defines the vertical ratio for where the selected item is displayed, ranging from -1 (top) to 1 (bottom), with 0 indicating the center. By default, the gradualOpacity field is not set, meaning that no opacity transition is applied. Adjusting this value allows you to create a visual effect where items near the center of the control are more opaque, while those farther away become more transparent. For example, setting gradualOpacity to "1 - 0.25" will result in an opacity transition from 1 (fully opaque) at the center to 0.25 (slightly transparent) toward the edges, creating a visually appealing fade effect as items move away from the center. Alternatively, setting it to a single value like 0.5 will make all items semi-transparent regardless of their position.

The opacity transition is determined by the distance from the center, where:

• A 'from-to' pair (e.g., "1 - 0.25") creates a gradual transition where items near the center are more opaque and those farther away become more transparent
• A single value (e.g., 0.5) applies a uniform semi-transparency to all items regardless of their position

null {null} or "" {string}, no effect (by default)
"1 - 0.25" {string}, results in an opacity transition from 1 (fully opaque) at the center (selectPos) to 0.75 (slightly transparent) toward the edges
0.5 {number}, semi-transparent for all

The gradualOpacityTransition field defines the transition effect applied by the gradualOpacity option. The gradualOpacityTransition field has no effect if the gradualOpacity field is not set. By default, the gradualOpacityTransition field is set to "ease", which applies a smooth transition that starts slowly, speeds up, then slows down. Adjusting this value allows you to customize the visual effect of the opacity transition to suit your design preferences. For example, setting gradualOpacityTransition to "linear" will create a constant-speed transition, while "ease-in" will make the transition start slowly and then accelerate. You can also specify custom transitions using cubic bezier curves for more unique effects.

The gradualOpacityTransition field supports predefined transition types, which can be specified using string or array values. These predefined types include (fields of exontrol.Def.G.Transitions object):

• "linear" {string}, applies a constant-speed (linear) transition
• "ease" {string}, applies a smooth transition that starts slowly, speeds up, then slows down
• "ease-in" {string}, applies a transition that starts slowly and then accelerates
• "ease-out" {string}, applies a transition that starts quickly and then decelerates
• "ease-in-out" {string}, applies a transition that starts and ends slowly, with a faster middle phase
• "ease-in-out-expo" {string}, applies a more dramatic ease-in-out transition with exponential acceleration and deceleration
• "swipe" {string}, applies a custom swipe-like transition using a bezier curve

  Alternatively, a custom bezier curve can be specified using an array of four values:

  [P1.x, P1.y, P2.x, P2.y]

  This defines the two control points P1 and P2 for the cubic bezier curve used during the transition. The x-values of both P1 and P2 must be between 0 and 1, as required for valid CSS timing functions. You can use the exontrol.Bezier control to effortlessly visualize or define various transition types. For example, the "ease" transition corresponds to the bezier curve defined by control points P1(0.25, 0.1) and P2(0.25, 1), which can be represented as [0.25, 0.1, 0.25, 1]. By specifying custom control points, you can create unique transition effects that differ from standard easing functions.

undefined {undefined}, null {null} or "ease" {string}, defined the default transtion to "ease"
"ease-in" {string}, applies a transition that starts slowly and then accelerates
[0,1,1,0] {array}, creates a custom-transition

The hAlign field specifies the horizontal alignment of roll items along the top edge of the control, as a positive value. The vAlign field specifies a positive value that determines the vertical position of the top edge of the rectangle. The default value is 0.25, which aligns the items near the top-center of the control, providing a balanced and visually appealing layout. Adjusting this value allows you to customize the horizontal positioning of the roll items to suit your design preferences.

The alignment is determined by the ratio of the control's width, where:

• A value of 0 aligns the items near the top-left corner
• A value of 1 aligns them near the top-right corner
• A value of 0.5 places them at the top-center
• Values greater than 1 align the items beyond the top-right corner

null {null} or 0.25 {number}, the roll-items go to the top-center of the control
1 {number}, the roll-items go to the top-right corner of the control

The selectPos field defines the vertical ratio for where the selected item is displayed, ranging from -1 (top) to 1 (bottom), with 0 indicating the center. By default, the selectPos fieldf is set to 0, which centers the selected item within the control. Adjusting this value allows you to customize the vertical positioning of the selected item to suit your design preferences. For example, setting selectPos to -0.5 will position the selected item halfway between the center and the top of the control, while a value of 0.5 will place it halfway between the center and the bottom.

The position of the selected item is determined by the ratio of the control's height, where:

• A value between 0 and -1 positions the selected item progressively closer to the top of the control
• A value of 0 centers the selected item within the control
• A value between 0 and 1 positions the selected item progressively closer to the bottom of the control

null {null} or 0 {number}, centers the selected item
-1 {number}, always displays the selected item at the top of the control

The tagName field defines the type of HTML items to create within the control. The Item.ClassName property specifies an additional class name to apply to the HTML element that hosts the item. By default, the control creates items using the "pre" tag. However, you can change this to "div" or any other valid HTML tag to suit your styling needs. For example, setting tagName field to "div" will create each item within a <div> element, allowing for more flexible styling options at the cost of potentially reduced performance with many items. The tagName field should be called at initialization time using the misc field, such as misc: { tagName: "div" }, to ensure that the control creates items with the specified HTML tag from the start.

null {null} or "pre" {string}, specifies that items are hosted in <pre> HTML elements by default
"div" {string}, indicates that items are hosted in <div> HTML elements

The vAlign field specifies a positive value that determines the vertical position of the top edge of the rectangle. The hAlign field specifies the horizontal alignment of roll items along the top edge of the control, as a positive value. The default value is 0, which keeps the top edge at its initial position. Adjusting this value allows you to customize the vertical positioning of the roll items to suit your design preferences.

The vertical position is determined by the height of the rectangle, where:

• A value of 0 keeps the top edge at its initial position
• A value of 1 shifts the top edge downward by the height of the rectangle
• A value of 2 shifts it downward by twice the rectangle's height
• Higher values continue shifting it further down accordingly

null {null} or 0 {number}, keeps the top edge at its initial position
1 {number}, shifts the top edge downward by the height of the rectangle

The zIndex field specifies the stacking order of items along the z-axis (which is like the "depth" in a 2D page). The default value is 9999, which ensures that the roll items are displayed above most other elements on the page. Adjusting this value allows you to control the layering of the roll items in relation to other elements. For example, setting zIndex to a lower value like 1 will place the roll items behind most other elements, while a higher value like 10000 will ensure they are on top of almost everything else. It is important to choose a zIndex value that fits well with the overall design and layout of your page to achieve the desired visual effect. The item with the highest zIndex will be displayed on center (selected item), while those with lower zIndex values will be layered behind it, creating a sense of depth and focus on the selected item.

9999 {number}, sets the starting stacking order for the items