上下に動くアニメーション

今回は上下に動くアニメーション処理を表示についてです。
動く処理が入るとやっぱり目を引きますからね。
簡単に実装できるなら色々な場所で使用したいものではないでしょうか。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                function moveEasing(objDiv, easingType, flg) {
                    $(objDiv).animate(
                        {
                            top      : (30 * flg) + 'px'
                        },
                        {
                            duration : 1500,
                            easing   : easingType,
                            complete : function(){ moveEasing(objDiv, easingType, (flg * -1)); }
                        }
                    );
                }
                moveEasing($('#img01'), 'swing',  1);
                moveEasing($('#img02'), 'linear', 1);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #disp_area div {
                margin           : 100px;
                position         : absolute;
            }

            #img01 {
            }
            #img02 {
                left             : 300px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <div id="img01"><img src="./icon_jpeg01.jpg"></div>
            <div id="img02"><img src="./icon_jpeg02.jpg"></div>
        </div>

    </body>
</html>

sample

spmple では Image がアニメーションを行っているかと思います。
こういったものが含まれると含まれないでは「ちょっと違う」感が出る気がします。

ちなみに 2 種類のアニメーションを表示させていますが、動作の加速・減速が設定できます。
jQuery の標準では以下のものが実装されています。
 右側 : swing(標準)
 左側 : linear
      
標準(swing)のほうが若干動きが滑らかに見えますね。
この加速・減速については plugin を追加するともっと種類が増えるようです。
まぁ、とりあえずは標準で問題なさそうですけどね。

Webページも動的に動くページが増えてきていますし、今後ももっと増えていくのだと思います。
HTML5 も魅力的ですが、もうしばらくは jQuery が廃れることも無いでしょう。
まだまだ、jQuery と付き合っていけると良いなぁと云うところですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 2 人中 2 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です