Search

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>

Smooth Chihuahua
スムチーの写真

フェード効果

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>

スムチーの写真

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women