From ProtoScript
Contents |
YUI:Spotlight Behavior
Provide a spotlight effect for selected element or elements. A spotlight effect momentarily highlights an area with a color (default yellow) and fades the color away slowly. The purpose is to call attention to a change in the interface.
Example
$proto('p#warning-text', {
Click: {
onClick: {
Spotlight: {}
}
},
});
The protoscript above says: for an paragraph with id 'warning-text' spotlight the text when the user clicks on it.
Attributes
| Name | Description | Default | Valid Values | Example |
|---|---|---|---|---|
| target | Selected element or elements to fade. | String value denoting an interface element. See Selecting Elements | No value. If no value supplied, use the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope | target:'#avatar' |
| duration | How long the animation should last | 0.5 | Value from 0.0 to 1.0. 0.0 denotes fully transparent. 1.0 denotes fully opaque. | Animate: { opacity: { from:1.0, to:0.5 } } - fade to halfway transparent |
| method | The animation method to use for easing transitions. | method: YAHOO.utilEasing.easeIn | YAHOO.util.Easing.easeOut | YAHOO.util.Easing.backBoth, YAHOO.util.Easing.backIn, YAHOO.util.Easing.backOut, YAHOO.util.Easing.bounceBoth, YAHOO.util.Easing.bounceIn, YAHOO.util.Easing.bounceOut, YAHOO.util.Easing.easeBoth, YAHOO.util.Easing.easeBothStrong, YAHOO.util.Easing.easeIn, YAHOO.util.Easing.easeInStrong, YAHOO.util.Easing.easeNone, YAHOO.util.Easing.easeOut, YAHOO.util.Easing.easeOutStrong, YAHOO.util.Easing.elasticBoth, YAHOO.util.Easing.elasticIn, YAHOO.util.Easing.elasticOut |
| backgroundColor | Color to return to at end of spotlight | '#FFFFFF' (white) | Any valid color | backgroundColor: '#FF00FF' |
| spotlightColor | Color to use as the spotlight | '#FEF59B' (yellow) | Any valid color | spotlightColor: '#FF00FF' |
| duration | Length of time (in seconds) to take to fade the spotlight back to the backgroundColor | 3 | Any valid time in seconds. | duration: 2 |
Callbacks
| Name | Description |
|---|---|
| onStart | Called when the animation starts. |
| onTween | Called on each frame of the animation. |
| onComplete | Called when the animation completes. |
Demos
See Spotlight Demo
