Custom Behaviors - Calaméo Knowledge Base
Not a Calaméo member yet?
Sign up now! It's FREE!
Get the latest news on Calaméo
Follow us on Facebook
Get Calaméo updates in real-time
Follow us on Twitter

Custom Behaviors

From Calaméo Knowledge Base

Custom behaviors can have additionnal attributes that allow them to be configured.

Contents

fade

Show and hide the element using a fade transition.

Attribute Default Description
min 0 Minimum opacity between 0 and 100
max 100 Maximum opacity between 0 and 100
duration 500 Duration of the transition in milliseconds

Example:

<behavior name="fx1" fx="fade" min="0" max="100" duration="300" />

sound

Play an MP3 sound file.

Attribute Default Description
on both Event that trigger the transition. It can be either show, hide or both
url Absolute URL of the MP3 sound file to play
volume 100 Sound volume between 0 and 100 in percentage of the global volume level

Example:

<behavior name="fx2" fx="sound" volume="50" url="http://example.com/sound.mp3" />

cursor

Change the cursor for a specified graphic resource.

Attribute Default Description
on mousemove Event that trigger the cursor change. It can be either mousemove, click
symbol Name of a graphic resource from a loaded library
source Absolute URL of the graphic resource to use.
hidemouse false Hide the mouse cursor leaving only the custom cursor. Either true or false.

Example:

<behavior name="fx3" fx="cursor" on="mousemove" url="http://www.example.com/cursor.png" />

hover

Show and hide the element when the cursor is over it.

Attribute Default Description
on both Action to perform when the cursor is in the area. Either show or hide.
duration 0 Duration of the appear/fade transition in milliseconds (ms)
from 0 Transparency when the cursor is not over the element from 0 to 100.
to 100 Transparency when the cursor is over the element from 0 to 100.
tolerance 0 Expands the area on each side (in pixels).

Example:

<behavior name="fx4" fx="hover" />

shadow

Add a drop shadow to the element.

Attribute Default Description
color 0x000000 Color of the shadow
alpha 100 Shadow opacity between 0 and 100
size 8 Size of the shadow
distance 4 Distance from the element
angle 45 Angle of the shadow between 0 and 360
inner false Apply the shadow inside the element. Either true or false
strength 1 Strength of the shadow between 0 and 255

Example:

<behavior name="fx1" fx="shadow" color="0xFF0000" alpha="50" size="6" />

glow

Add a glow to the element.

Attribute Default Description
color 0x000000 Color of the glow
alpha 100 Glowopacity between 0 and 100
size 8 Size of the glow
inner false Apply the glow inside the element. Either true or false
strength 1 Strength of the glow between 0 and 255

Example:

<behavior name="fx1" fx="glow" color="0xFF0000" alpha="50" size="6" />

bevel

Add a bevel to the element.

Attribute Default Description
hcolor 0xFFFFFF Color of the highlight
halpha 100 Highlight opacity between 0 and 100
scolor 0x000000 Color of the shadow
salpha 100 Shadowopacity between 0 and 100
size 8 Size of the shadow
distance 4 Distance from the element
angle 45 Angle of the bevel between 0 and 360
inner true Apply the bevel inside the element. Either true or false
strength 1 Strength of the bevel between 0 and 255

Example:

<behavior name="fx1" fx="bevel" hcolor="0xFF0000" halpha="50" scolor="0x00FF00" salpha="100" size="3" />