Blind

Fade

Grow

Highlight

Shake

Slide

Squish

Handler

<cffunction name="dspEffects" access="public" returntype="void" output="false">
    <cfargument name="Event" type="coldbox.system.beans.requestContext">
    <cfset Event.setView("spryExample/effects")>
</cffunction>    
		

View

<style type="text/css">
    
.animationContainer{
    margin: 5px;
    height: 220px;
}

.demoDiv{
    background-color: #CCC; 
    padding: 5px;
    width: 400px; 
    height: 200px; 
    overflow: hidden;
}

.hideInitially{
    visibility: hidden;
}
</style>
<!--- Put spry plugin in variable scope --->
<cfset spry = getPlugin('Spry',true)>
<cfset spry.setIsEffects(true)>
<h1>Blind</h1>
<!--- START: blind example --->
<form>
    <input type="button" onclick="blindExample.start();" value="Blind Example" />
</form>
<div class="animationContainer">
    <div class="demoDiv" id="blindExample" style="padding:0;">
        <p style="padding:5px;">
        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.
        </p>
    </div>
</div>
<script type="text/javascript">
    var blindExample = new Spry.Effect.Blind('blindExample', {toggle:true});
</script>
<!--- END: blind example --->
<a href="http://labs.adobe.com/technologies/spry/samples/effects/blind_sample.html" target="_blank">Adobe examples</a>
<h1>Fade</h1>
<!--- START: fade example --->
<form method="get" action="fade_sample.html">
    <input type="button" onclick="fadeExample.start();" value="Fade Example" />
</form>
<div class="animationContainer">
    <div class="demoDiv" id="fadeExample">
        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.    
    </div>
</div>
<script type="text/javascript">
    var fadeExample = new Spry.Effect.Fade('fadeExample', {toggle:true});
</script>
<!--- END: fade example --->
<a href="http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html" target="_blank">Adobe examples</a>
<h1>Grow</h1>
<!--- START: grow example --->
<form method="get" action="grow_sample.html">
    <input type="button" onclick="growExample.start();" value="Grow Example" />
</form>
<div class="animationContainer">
    <div class="demoDiv" id="growExample" style="padding:0;">
        <p style="padding:5px;">
        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.
        </p>        
    </div>
</div>
<script type="text/javascript">
    var growExample = new Spry.Effect.Grow('growExample', {toggle:true});
</script>
<!--- END: grow example --->
<a href="http://labs.adobe.com/technologies/spry/samples/effects/grow_sample.html" target="_blank">Adobe examples</a>
<h1>Highlight</h1>
<!--- START: highlight example --->
<form method="get" action="highlight_sample.html">
    <input type="button" onclick="highlightExample.start();" value="Highlight Example" />
</form>
<div class="animationContainer">
    <div class="demoDiv" id="highlightExample">
        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.
    </div>
</div>
<script type="text/javascript">
    var highlightExample = new Spry.Effect.Highlight('highlightExample', {duration: 2000, from:'#CCC', to:'#FFCC33', toggle: true});
</script>
<!--- END: highlight example --->
<a href="http://labs.adobe.com/technologies/spry/samples/effects/highlight_sample.html" target="_blank">Adobe examples</a>
<h1>Shake</h1>
<!--- START: shake example --->
<form method="get" action="shake_sample.html">
    <input type="button" onclick="shakeExample.start();" value="Shake Example" />
</form>
<div class="animationContainer">
    <div class="demoDiv" id="shakeExample">
        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.
    </div>
</div>
<script type="text/javascript">
    var shakeExample = new Spry.Effect.Shake('shakeExample');
</script>
<!--- END: shake example --->
<a href="http://labs.adobe.com/technologies/spry/samples/effects/shake_sample.html" target="_blank">Adobe examples</a>
<h1>Slide</h1>
<!--- START: slide example --->
<form method="get" action="slide_sample.html">
    <input type="button" onclick="slideExample.start();" value="Slide Example" />
</form>
<div class="animationContainer">
    <div class="demoDiv" id="slideExample" style="padding:0;">
        <div></div>
        <p style="padding:5px;">
            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.
        </p>
    </div>
</div>
<script type="text/javascript">
    var slideExample = new Spry.Effect.Slide('slideExample', {toggle:true});
</script>
<!--- END: slide example --->
<a href="http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html" target="_blank">Adobe examples</a>
<h1>Squish</h1>
<!--- START: squish example --->
<form method="get" action="squish_sample.html">
    <input type="button" onclick="squishExample.start();" value="Squish Example 1" />
</form>
<div class="animationContainer">
    <div class="demoDiv" id="squishExample" style="padding:0;">
        <p style="padding:5px;">
            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.
        </p>
    </div>
</div>

<script type="text/javascript">
    var squishExample = new Spry.Effect.Squish('squishExample',{toggle: true});
</script>
<!--- END: squish example --->
<a href="http://labs.adobe.com/technologies/spry/samples/effects/squish_sample.html" target="_blank">Adobe examples</a>