Behaviors
YOI behaviors provide a simple CSS-like interface to add functionality to HTML elements.
Purpose
Use a behavior to make an element behave in a certain way depending on certain conditions. For example make an element react to it’s current position while scrolling.
The Behavior Attribute
Add a behavior-attribute to any element to activate the behavior:
<div yoi-dismiss></div>
List of Behaviors
| Behavior | Attribute | Description |
|---|---|---|
| Dismiss | yoi-dismiss |
Adds a close-button to an element. |
| Lazyload | yoi-lazyload |
Loads an image only if it’s inside the viewport. |
| Parallax | yoi-parallax |
Adds a parallax scrolling effect to an element. |
| Scrollfx | yoi-scrollfx |
Adds effects or transitions to an element, responding to the scrolling position. |
| Sticky | yoi-sticky |
Makes an element stick when scrolled past it’s position on the page. |
You can add more than one behavior to an element. However, you cannot add the same behavior multiple times.
Parameters
Behaviors may have parameters to change the default setting of a behavior:
<div yoi-parallax="factor:5;">...</div>
Make sure you write the parameters correctly, otherwise the behavior might not work. If you know CSS, the syntax should look familiar to you:
Parameter Formatting Checklist
- A behavior may accept many parameters.
- Write Parameters in key/value-pairs.
- Keys are seperated from values with a colon.
- Each key/value-pair must end with a semicolon.
- This is how you write a valid key/value-pair:
key:value;. - If at least one value contains special characters (slashes, colons etc.), wrap all values in single quotation marks:
foo:'some//value:with_special?charactes'; bar:'12'; foobar:'abc'. - Values must not include single nor double quotation marks!
- Write Parameters in any order you prefer.