Overview | : | Highlight | : | Appear/Fade | : | Grow/Shrink | : | Squish | : | Shake | : | BlindUp/BlindDown | : | SlideUp/Down |
Currently, the SpryEffects.js provides the folllowing 7 effects:
The Philosophy behind Spry Effects
An detailed overview of the functions inside the SpryEffects.js and how to call them
This effect Flashes a color as the background of an element.
script src="../../../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body> <a onclick="Spry.Effect.Highlight('highlight1',{duration: 2000, from:'#CCCCCC', to:'#FFCC33',restoreColor: '#FFCC33',toggle:true})" > Highlight Box </a></p>
<div class="demoDiv" id="highlight1"><span class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</span> </div>
</body>
Source Listing - The first argument to the method is the element/or the element id.
duration | The duration of the effect in milliseconds |
---|---|
from | startcolor value, sets the color of first frame of the highlight |
toggle | true or false, if true the restoreColor get ignored |
to | endcolor value, sets the color of the last frame of the highlight. |
restoreColor | Sets the background color of the element after the highlight has finished. |
setup | function that is called before the effect begins e.g function setup (element,effect){} |
finish | function that is called after the effect e.g function finish (element,effect){} |
transition | Spry.sinusoidalTransition or Spry.sinusoidalTransition as a object |
If you use the toggle option within the highlight effect , the restoreColor get ignored.
applet, body, frame, frameset, noframes
Makes an element appear/fade away
<script src="../../../js/SpryEffects.js" type="text/javascript" > </script> </head>
<body> <a onclick="Spry.Effect.AppearFade('1', {duration:1000,from:100,to:20,toggle:true})" > Fade from 100% to 20% with toggle=true </a>(Fade)</p>
<div class="demoDiv" style="height:25px" id="1">
<p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div>
<p> <a onclick="Spry.Effect.AppearFade('2', {duration:1000,from:20,to:100,toggle:true}) >Fade from 20% to 100% with toggle=true </a></p> <div class="demoDiv" style="background-color:#CCCCCC; height:25px; opacity:0.2; filter:alpha(opacity=20)" id="2">
<p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</p>
</div>
</body>
Source Listing - The first argument to the method is the element/or the element id.
duration | The duration of the effect in milliseconds |
---|---|
from | The start value of the effect as integer value from:10 |
to | The end value of the effect as integer value |
toggle | If the effect should run in revers orde onc you select the trigger element again |
setup | function that is called before the effect begins e.g function setup (element,effect){} |
finish | function that is called after the effect e.g function finish (element,effect){} |
transition | Spry.sinusoidalTransition or Spry.sinusoidalTransition as object |
Works safely with most HTML elements, except body, table rows, table bodies and table heads.
There is currently no common way to set the opacity of an element either use opacity:0.2 or filter:alpha(opacity=20)
for IE.
The opacity is also not supported by [Firefox 1.5, Microsoft IE for Macintosh 5.2, Microsoft Internet Explorer 6.0, Netscape Navigator 8.0, Opera 8.0, Safari 2.0]
applet, body, iframe, object, tr, tbody, th
Shrinks or Grows the specified element.
<script src="../../../js/SpryEffects.js" type="text/javascript" > </script> </head> <body> <a onclick="Spry.Effect.GrowShrink('example1',{duration:700, from:'100%', to:'20%',toggle: true})" > Shrink from 100% to 20% with toggle=true </a>
<div class="demoDiv" id="example1"><span class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet</span></div> </body>
Source Listing - The first argument to the method is the element/or the element id.
duration | The duration of the effect in milliseconds |
---|---|
from | The start value of the effect as string value + % or px. e.g from:"10px" |
to | The end value of the effect as string value + % or px. |
referHeight | reference direction for the from/to parameters, if set in pixel (true: height, false: width), default: false |
growCenter | growing position of the element (true: grow from center, false: grow from top left corner), default: true |
toggle | If the effect should run in revers order onc you select the trigger element again |
setup | function that is called before the effect begins e.g function setup (element,effect){} |
finish | function that is called after the effect e.g function finish (element,effect){} |
transition | Spry.sinusoidalTransition or Spry.sinusoidalTransition as a object |
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
The Squish effect collapses the specified element into the upper left corner of itself until it disappears.
<script src="../../../js/SpryEffects.js" type="text/javascript" > </script></head> <body><a onclick="Spry.Effect.Squish('example1')" > Squish Example 2 </a></p>
<div class="demoDiv" id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliqt</div> </body>
Source Listing - The first argument to the method is the element/or the element id.
duration | The duration of the effect in milliseconds |
---|---|
toggle | If the effect should run in revers order once you select the trigger element again |
setup | function that is called before the effect begins e.g function setup (element,effect){} |
finish | function that is called after the effect e.g function finish (element,effect){} |
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
The Shake effect moves the specified element left and right in a rapid manner.
<script src="../../../js/SpryEffects.js" type="text/javascript" > </script></head> <body> <p> <a onclick="Spry.Effect.Shake(('example1')" > Shake it </a></p>
<div class="demoDiv" id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliqit amet</div> </body>
Source Listing - Example of creating an BlindUp Effect in JavaScript. The first argument to the method is the element/or the element id.
id | id of the element to be shaken. |
---|---|
setup | function that is called before the effect begins e.g function setup (element,effect){} |
finish | function that is called after the effect e.g function finish (element,effect){} |
Shake only works left and right. It does not work up and down. The duration is fixed to 500ms.
address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, table
The Blind Up and Down Effect enables users simulating a window blind up/down, where the contents of the affected elements stay in place.
<script src="../js/SpryEffects.js" type="text/javascript" > </script> </head> <body> <a onclick="Spry.Effect.Blind('slideItUp1', {duration: 1000, from: '100%', to: '0%', toggle: true});" > BlindUp from 100% to 0% with toggle=true </a>
<div style="background-color:#CCCCCC; height:200px; width:300px; overflow:hidden" id="slideItUp1">
<h4>HEADER</h4>
<p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</p>
</div>
<p></p>
<p></p>
<div style="background-color:#CCCCCC; height:40px; width:500px; overflow:hidden" id="slideDown2">
<h4><a onclick="Spry.Effect.Blind('slideDown2', {duration: 1000, from: '40px', to: '200px', toggle: true});" >BlindDown from 40px to 200px with toggle=true</a></h4>
<div class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</div>
</div>
</body>
Source Listing - Example of creating an BlindUp Effect in JavaScript. The first argument to the method is the element/or the element id.
duration | The duration of the effect in milliseconds |
---|---|
from | The start value of the effect as string value + % or px. e.g from:"10px" |
to | The end value of the effect as string value + % or px. |
toggle | If the effect should run in revers orde onc you select the trigger element again |
setup | function that is called before the effect begins e.g function setup (element,effect){} |
finish | function that is called after the effect e.g function finish (element,effect){ alert("finish function")} |
transition | Spry.linearTransition or Spry.sinusoidalTransition as object |
address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, pre
Simulates a window blind, where the contents of the specified element scrolls up or down or from left to right.
<script src="../../../js/SpryEffects.js" type="text/javascript" > </script></script> </head> <body><p> <a onclick="Spry.Effect.Slide('example1',{duration:1000,from:'100%', to:'20%',toggle:true})" > SlidUp from 100% to 20% with toggle=true</a></p>
<div class="demoDiv" id="example1">
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</div>
</div> </body
Source Listing - Example of creating an SlideUp Effect in JavaScript. The first argument to the method is the element/or the element id.
duration | The duration of the effect in milliseconds |
---|---|
from | The start value of the effect as string value + % or px. e.g from:"10px" |
to | The end value of the effect as string value + % or px. |
horizontal | The slide direction of the effect (true: horizontal or false: vertical (default)) |
toggle | If the effect should run in revers orde onc you select the trigger element again |
setup | function that is called before the effect begins e.g function setup (element,effect){} |
finish | function that is called after the effect e.g function finish (element,effect){} |
transition | Spry.sinusoidalTransition or Spry.sinusoidalTransition as a object |
Slide effect always requires a single <div> around the content that should slide !!
blockquote, dd, form, div, center
Copyright © 2006. Adobe Systems Incorporated. All rights reserved.