Adobe Spry フレームワークAdobe Spry: エフェクト
Effectライブラリ
SpryEffects.js
2007/7/29
Effectライブラリ（SpryEffects.js）は、HTML要素にエフェクト（視覚）効果をつけるライブラリです。 複雑なDHTMLを書かずに、イベントや入力チェックと組み合わせることで簡単に実装できます
利用する場合は、HEAD要素でEffectライブラリ（SpryEffects.js）を読み込みこんでおきましょう。
<head>
<script src="/content/spry/includes/SpryEffects.js" type="text/javascript"></script>
</head>
スキッシュ（潰し処理:対象要素をページの左上隅に消す）
2007/7/29
<style type="text/css">
.squish1_demo {
width:90px; height:90px;
}
</style>
<form method="get" action="squish_sample.html">
<p><input type="button" onclick="squish_default.start();" value="スキッシュ効果" /></p>
</form>
<div class="animationContainer squish1_demo">
<div class="demoDiv" id="squish1">
<img src="/content/img/dog_white.gif" width="90" height="90" alt="スムチーの写真" />
</div>
</div>
<script type="text/javascript">
var squish_default=new Spry.Effect.Squish(
'squish1',
{
toggle:true
}
);
</script>
ブラインド効果
2007/7/29
<style type="text/css">
.blind_demo {
width:90px; height:110px;
background-color:#f2f100;
}
</style>
<form action="#">
<p><input type="button" onclick="sample_blind.start();" value="ブラインド効果" /></p>
</form>
<div class="animationContainer blind_demo">
<div class="demoDiv" id="obj_blind">
<div class="sampleText">
<img src="/content/img/dog_title.png" width="90" height="20" alt="Smooth Chihuahua" /><br>
<img src="/content/img/dog_white.gif" width="90" height="90" alt="スムチーの写真" />
</div>
</div>
</div>
<script type="text/javascript">
var sample_blind=new Spry.Effect.Blind(
'obj_blind',
{
duration:2000,
from:'20px',
to:'110px',
toggle:true
}
);
</script>
フェード効果
2007/7/29
<style type="text/css">
.fade_demo {
width:90px; height:90px;
}
</style>
<form action="#">
<p><input type="button" id="button_fade" onclick="sample_fade.start()" value="フェードアウト効果" /></p>
</form>
<div class="animationContainer fade_demo">
<div id="obj_fade">
<img src="/content/img/dog_white.gif" width="90" height="90" alt="スムチーの写真" />
</div>
</div>
<script type="text/javascript">
var start_fade=function(){
var button=document.getElementById('button_fade');
if(button){
button.disabled=true;
button.style.backgroundColor='white';
button.value=(button.value=="フェードアウト") ? "フェードイン" : "フェードアウト";
}
}
var stop_fade=function(){
var button=document.getElementById('button_fade');
if(button){
button.disabled=false;
button.style.backgroundColor='';
}
}
var sample_fade=new Spry.Effect.Fade(
'obj_fade',
{
setup:start_fade,
finish:stop_fade,
duration:1000,
from:100,
to:0,
toggle:true
}
);
</script>
スライドアップ/ダウン効果
2007/7/29
<style type="text/css">
.slide_demo {
width:90px; height:90px;
}
</style>
<form action="#">
<p><input type="button" id="button_slide" onclick="sample_slide.start();" value="スライドアップ効果" /></p>
</form>
<div class="animationContainer slide_demo">
<div id="obj_slide">
<img src="/content/img/dog_white.gif" width="90" height="90" alt="スムチーの写真" />
</div>
</div>
<script type="text/javascript">
var start_slide=function(){
var button=document.getElementById('button_slide');
if (button){
button.disabled=true;
button.style.backgroundColor='#FFF';
// button.value=(button.value=="スライドアップ") ? "スライドダウン" :"スライドアップ";
}
}
var stop_slide=function(){
var button=document.getElementById('button_slide');
if (button){
button.disabled=false;
button.style.backgroundColor='';
}
}
var sample_slide=new Spry.Effect.Slide(
'obj_slide',
{
toggle:true,
setup:start_slide,
finish:stop_slide
}
);
</script>
シェイク効果（左右に振るわせる）
2007/7/29
<form action="#" id="frm">
<p>何も入力しないで「送信ボタン」をクリックするとテキストボックスが左右に震えます。</p>
<span id="shake1"><input type="text" size="10" id="txt" name="txt" /></span>
<input type="button" value="送信" id="btn" />
</form>
<script type="text/javascript">
window.onload=function(){
var frmObj=document.getElementById("frm");
var txtObj=document.getElementById("txt");
var btnObj=document.getElementById("btn");
btnObj.onclick=function(){
if(txtObj.value!=""){
// frmObj.submit();
}else{
Spry.Effect.DoShake('shake1');
}
}
}
</script>
グロー効果（伸縮）
2007/7/29
<style type="text/css">
.grow_demo {
width:90px; height:90px;
}
</style>
<form action="#">
<p><input type="button" id="button_grow" value="グロー効果" onclick="sample_grow.start();" /></p>
</form>
<div class="animationContainer grow_demo">
<div class="demoDiv" id="obj_grow">
<img src="/content/img/dog_white.gif" width="90" height="90" alt="スムチーの写真" />
</div>
</div>
<script type="text/javascript">
var sample_grow=new Spry.Effect.Grow(
'obj_grow',
{
toggle:true,
from:'100%',
to:'0%',
scaleContent:false
}
);
</script>
ハイライト効果（背景色変更）
2007/7/29
<style type="text/css">
.hilight_demo {
width:90px; height:90px;
}
</style>
<form action="#">
<p><input type="button" id="button_hi" onclick="sample_hi.start();" value="ハイライト効果" /></p>
</form>
<div class="animationContainer hilight_demo">
<div class="demoDiv" id="obj_hi">
<img src="/content/img/dog_white.gif" width="90" height="90" alt="スムチーの写真" />
</div>
</div>
<script type="text/javascript">
var start_hi=function(){
var button=document.getElementById('button_hi');
if (button){
button.disabled=true;
button.style.backgroundColor='#ffffff';
}
}
var end_hi=function(){
var button=document.getElementById('button_hi');
if (button) {
button.disabled=false;
button.style.backgroundColor='';
}
}
var sample_hi=new Spry.Effect.Highlight(
'obj_hi',
{
from:'#ffffff',
to:'#f2f100',
toggle:true,
setup:start_hi,
finish:end_hi
}
);
</script>