Spry

Attach a Slide effect

The Slide effect moves the target element up or down (or left to right). This effect is similar to the Blind effect, but the contents move up and down (or left to right) instead of staying in the same place.

You can only attach this effect to the following HTML elements: blockquote, dd, div, form, center, table, span, input, textarea, select, or image.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document: 
    <head>
. . .
<script  src="../includes/SpryEffects.js" type="text/javascript" ></script>
</head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.

    The SpryEffects.js file is in the includes folder of the Spry folder that you downloaded from Adobe Labs. See Prepare your files.

  2. Make sure your target element is wrapped in a container tag that has a unique ID. The target element and the container both change when the user interacts with the page to cause the effect. 
    <div id="slide1">
	<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
    diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    aliquyam erat, sed diam voluptua.</div>
</div>
    Note: The container tag with which you wrap the target element must be a blockquote, dd, form, div, or center tag.
  3. To create the effect, add a JavaScript event to trigger the effect, and a script tag that creates the effect object. For example, if you want the user to click on a sentence that causes another paragraph to slide up, you might add the following event and script tag: 
    <p><a onclick="slide_effect.start(); return false;" href="#">Click here to slide the paragraph up from 100% to 20%</a></p>
. . . 
<script type="text/javascript">
var slide_effect = new Spry.Effect.Slide("slide1", {duration:1000, from:'100%', to:'20%',toggle:true});
</script>
    Note: It’s important that you add the script tag after the code for the target element. Otherwise the page will return a JavaScript error when you try to trigger the effect.

    The first argument of the Spry.Effect.Slide method is always the target element’s ID ("slide1" in the preceding example).

    The complete code looks as follows:

    <head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="slide_effect.start(); return false;" href="#">Click here to slide the paragraph up from 100% to 20%</a></p>
<div id="slide1">
	<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
    	diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	aliquyam erat, sed diam voluptua.</div>
</div>
<script type="text/javascript">
var slide_effect = new Spry.Effect.Slide("slide1", {duration:1000, from:'100%', to:'20%',toggle:true});
</script>
</body>

Slide effect options

The following table lists available options for the Slide effect.

Option

Description

duration

Duration of the effect in milliseconds. The default value is 2000.

from

Start size in % or pixels. The default value is 100% of the element’s original size.

to

End size in % or pixels. The default value is 0 of the element’s original size.

toggle

Lets you create a toggle effect. The default value is false.

transition

Determines the type of transition. The default is Spry.sinusoidalTransition.

fps

Determines the number of frames per second (fps) of the animation. The default is 60.

horizontal

If set to true, slides the content horizontally instead of vertically. The default value is false.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Slide("targetID", {duration: 2000, from: '100%', to: '0%'});

effect.start();