Adding effects
Elephant's Wmacros provide an easy way to add simple effects to containers and elements. By default, effects trigger on page loaded. Visibility options will be added in the future, as of now, add it manually, or wait for us to develop furthermore
Container effects
These effects affect the content within the effect macro. Could be one or more containers and rich content.
@w{appear(class=slide left)}
@w{stripe(color=c2)}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@w{/stripe}
@w{/appear}
In the example, the whole stripe appears, but we could also make appear the text inside, or only part of the text.
You can use appear or disappear, with these transition effects: scale, zoom, fade (up|dowm|left|right), (horizontal|vertical) flip, drop, fly (up|dowm|left|right), swing (up|dowm|left|right), browse (up|dowm|left|right), slide (up|dowm|left|right).
@w{reveal(class=move)}
@w{rvisible}
@w{segment}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@w{/segment}
@w{/rvisible}
@w{rhidden}
@w{segment(class=inverted blue)}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@w{/segment}
@w{/rhidden}
@w{/reveal}
You can use reveal with these transition effects: fade, move, rotate, left|right|up|down, circular, small|medium|big|huge|massive.
| English | 08/02/26 05:26 | Lluís Turró Cutiller |
