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).
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.
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{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.
Reveal content
Reveal uses absolute positioning, and may interfere with some containers. If you encounter position or width issues, try using simple containers at root level, like segment or a simple div.
In-class effects
Elephant's Wmacros detect when effects are used in class, and generate the appropriate script to activate it. This simplifies the adding of effects to normal elements.
This table show the effects that can be added to the class attribute of any Wmacro:
| Effect | Description | Modifier |
|---|---|---|
| pulsating, jiggle, flash, shake, pulse, tada, bounce, glow | Adds the effect to the element | |
| looping | Creates a loop |
Some action
@w{button(class=purple looping pulsating,icon=right chevron,link=#,text=Some action)}
Static effects
Using rotated you can rotate any container or content, by setting the degrees. Positive numbers for clockwise, negative for counter-clockwise. Defaults to -2 degrees. The example uses a text container and rotates the content. You can also rotate the container.
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{text}
@w{rotated}
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{/rotated}
@w{/text}
Using striped you can enhance text, to make it more readable when on top of images. Striped takes a color parameter, the color of the background band. The font color adjusts to be readable on top of the band.
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{textstripe(image=/_internal/system/stock//topcard.jpg)}
@w{striped(color=Oil)}
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{/striped}
@w{/textstripe}
| English | 08/02/26 05:26 | Lluís Turró Cutiller | |
| English | 08/03/26 05:59 | Lluís Turró Cutiller |
