タイマーとの組み合わせ

Reflection.add()とタイマーを組み合わせることで反射効果のアニメーションを行うことも可能です。サンプル08では0.1秒ごとに不透明度を10%ずつ加算し、100%を超えたら0%に戻し延々と不透明度を変化させています。

function chagneOpacity(){
        opac += 0.1;
        if (opac > 1) opac = 0;
        Reflection.add(document.getElementById("myPhoto"), { opacity: opac });
}

サンプル08の実行結果

時間の経過によって反射効果が表れる

サンプル08

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>reflection.jsサンプル</title>
            <style type="text/css"><!--
            h1 { color:white; }
            body { background-color:black; }
            --></style>
            <script type="text/javascript" src="js/reflection.js"></script>
            <script type="text/javascript"><!--
                var opac = 0;
                window.onload = function(){
                    Reflection.add(document.getElementById("myPhoto"), { height: 1, opacity: opac });
                    setInterval("chagneOpacity()", 100);
                }
                function chagneOpacity(){
                    opac += 0.1;
                    if (opac > 1) opac = 0;
                    Reflection.add(document.getElementById("myPhoto"), { opacity: opac });
                }
            // --></script>
        </head>
        <body>
        <h1>reflection.jsサンプル</h1>
            <img src="images/logo.png" id="myPhoto">
        </body>
</html>

reflectionはアクセシビリティを損なう事なくWeb 2.0的な効果を施せる手軽なライブラリです。ちょっとページにアクセントを追加したい場合などに利用してみては、どうでしょうか。