タグ別アーカイブ: animate

一定時間で画像を切り替える

先日定期的に画像を切り替えたいとの依頼を頂きました。
画像を切り替えた際には画像をズームするというおまけ付きです。
とりあえず忘備録を兼ねて記載しておきます。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var objArea;
                    objArea = $('ul#image_area li');

                // Data Set
                minCnt    = 1;
                maxCnt    = objArea.length;
                setTimer  = 1500;  // ms
                minSizeX  = 80;
                minSizeY  = 220;
                sizeRate  = 1.5;
                maxSizeX  = (minSizeX * sizeRate);
                maxSizeY  = (minSizeY * sizeRate);

                objArea.hide();
                function moveImage( cnt ) {

                    // Init
                    objTarget = $('ul#image_area li:nth-child(' + cnt + ')');
                    objArea.fadeOut( setTimer );

                    // Image Move
                    objTarget.find('img')
                             .css({ 'width':  minSizeY + 'px', 'height': minSizeX + 'px' })
                             .animate({ 'width': maxSizeY + 'px', 'height': maxSizeX + 'px' }, setTimer);
                    objTarget.fadeIn( setTimer )

                    // Next Image
                    if ( cnt >= maxCnt ) {
                        cnt = minCnt;
                    } else {
                        cnt = cnt + 1;
                    }
                    $(window).delay( setTimer ).queue( function () {
                        moveImage( cnt );
                        $(this).dequeue();
                    });

                }

                // Move Start
                moveImage( minCnt );

            });

        --></script>

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

            div {
                margin     : 10px;
            }

            #image_area li {
                position   : absolute;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <ul id="image_area">
                <li><img src="./icon_jpeg01.jpg"></li>
                <li><img src="./icon_jpeg02.jpg"></li>
                <li><img src="./icon_jpeg03.jpg"></li>
                <li><img src="./icon_jpeg04.jpg"></li>
                <li><img src="./icon_jpeg05.jpg"></li>
                <li><img src="./icon_jpeg06.jpg"></li>
                <li><img src="./icon_jpeg07.jpg"></li>
                <li><img src="./icon_jpeg08.jpg"></li>
                <li><img src="./icon_jpeg09.jpg"></li>
                <li><img src="./icon_jpeg10.jpg"></li>
            </ul>

        </div>
    </body>
</html>

sample

sample を開くと一定期間ごとに画像が切り替わります。
切り替わった際には画像が少し拡大していく感じです。

とりあえず簡易的に目を引く様な項目は出来たのではないかと思います。
実際には css で画像の中心を固定するとかの対応は必要ですが、
バナー程度のサイズならこのまま使用しても良いんじゃないでしょうか。

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

スクロールの挙動調整

今回は scroll の挙動調整です。
具体的には、通常 scroll した場合に縦方向 scroll する処理を
横向きに scroll するように変更してしまおうと云うものです。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="./jquery.mousewheel.min_.js"></script>


        <script type="text/javascript"><!--

            $(function(){

                var scrollTop = 0;
                var baseSpeed = 1000;
                var tempSpeed = 0;
                var userAgent = window.navigator.userAgent.toLowerCase();
                $('html').mousewheel(function(event, move) {

                    // scroll type
                    if (move > 0) {
                        tempSpeed = (baseSpeed * -1);
                    } else if (move < 0) {
                        tempSpeed =  baseSpeed;
                    }

                    // userAgent check (chrome)
                    if(userAgent.indexOf('chrome') != -1){
                        scrollLeft = $('body').scrollLeft() + tempSpeed;
                    } else {
                        scrollLeft = $('html').scrollLeft() + tempSpeed;
                    }

                    // scroll set
                    $('html,body').stop().animate({scrollLeft: scrollLeft}, 'normal');
                    // scroll out
                    return false;

                });

            });


        --></script>

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

            div {
                margin     : 10px;
            }

            #main_area div {
                float            : left;
            }

            #scroll_area {
                width            : 4500px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="scroll_area">
                <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg12.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg13.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg14.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg15.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg17.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg18.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg19.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg20.jpg"></div>
            </div>

        </div>
    </body>
</html>

sample

sample を開き scroll してみると横に scroll して動くかと思います。
 ※ 内容自体は以前に行った内容とあまり変わりません(笑)

最近は、今までのような page が縦に scroll するだけでは無い site が増えています。
通常とは異なり、scroll をこちらで制御できるため、画面内容によって scroll の
移動距離を変えるなど、ちょっと変わった印象を持たせることも可能かと思います。

scroll bar を非表示にすることで scroll による紙芝居のような表示をすることが
可能になるのかと思います。
これでちょっと変わった印象を持たせられるのでは無いでしょうか。

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

アニメーションでの色変更

今回は animate での色変更に挑戦したいと思います。
既に animate は何度か行っているため、「何をいまさら・・・」な感も否めませんが、
実は animate には色の変更機能が有りません(笑)
「何で出来ない?」と思った事は何度もありますが標準では動作しないのです。


 animate は値が数字のものしか動けないのは理解しているのですが
 色も16進の数字情報だと思うのですが・・・

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript"><!--

            $(function(){

                $('#button').click(function() {
                      // init
                      $('#disp_area p').css({'color' : '#000000', 'background-color' : '#ffffff'});
                      // color change
                      $('#text_1').stop().animate({'color' : '#ff0000', 'background-color' : '#cccccc'}, 3000);
                      $('#text_2').stop().animate({'color' : '#00ff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_3').stop().animate({'color' : '#0000ff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_4').stop().animate({'color' : '#00ffff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_5').stop().animate({'color' : '#ffff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_6').stop().animate({'color' : '#ff00ff', 'background-color' : '#cccccc'}, 3000);
                      //
                      $('#text_7').stop().animate({'color' : '#ff0000', 'background-color' : '#00cccc'}, 1500)
                                         .animate({'color' : '#00ff00', 'background-color' : '#cc00cc'}, 1500)
                                         .animate({'color' : '#0000ff', 'background-color' : '#cccc00'}, 1500)
                                         .animate({'color' : '#00ffff', 'background-color' : '#cc0000'}, 1500)
                                         .animate({'color' : '#ffff00', 'background-color' : '#0000cc'}, 1500)
                                         .animate({'color' : '#ff00ff', 'background-color' : '#00cc00'}, 1500)
                                         .animate({'color' : '#000000', 'background-color' : '#ffffff'}, 1500);
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        
            div {
                margin           : 10px;
            }

            p {
                margin           : 10px;
                padding          : 10px;
                width            : 300px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="disp_area">
                <p id="text_1">Sample Message Text Red</p>
                <p id="text_2">Sample Message Text Lime</p>
                <p id="text_3">Sample Message Text Bule</p>
                <p id="text_4">Sample Message Text Cyan</p>
                <p id="text_5">Sample Message Text Yellow</p>
                <p id="text_6">Sample Message Text Magenta</p>
                <p id="text_7">Sample Message Text Color Change</p>
            </div>

            <div id="text_area">
                <button id="button">Color Change</button>
            </div>

        </div>
    </body>
</html>

sample

sample の button を click すると文字色と背景色が変更されます。
もちろん連続で色を変更することも出来ます。

行った内容は、「別途 jQuery UI を読み込む」でした。
色々と優秀な Plugin があるのですが、今回は jQuery の機能だけで完結してみました。

「jQuery UI」とは jQuery を使用した UI 用の機能を纏めたものです。
開発元が「The jQuery Project」なので安心です。
今回は jQuery より上記機能となる Color Animation と云う Effects を
使用する形となります。

・・・それにしても色変更の animate ぐらいは jQuery 標準で出来るように
変更してほしいなと思いますよね。

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

テキストを1文字ずつフェードイン

文字列の fadeIn はよく見かけます。
「こんなことが出来る」と聞かれましたのでやってみました。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript"><!--

            $(function(){
                $('#exec').click( function(){
                    $('#text_area').empty();
                    var arrText = $('#input_text').val().split('');
                    $.each(arrText, function(index, val){
                        $('#text_area').append('<span id="cnt' + index + '" style="opacity:0;">' + val + '</span>');
                        $('#cnt' + index).delay(index * 300).animate({opacity:1},1000);
                    });

                });
            });

        --></script>

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

            div {
                margin : 50px;
            }

            #text_area {
                height : 50px;
                margin : 50px;
                border : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="main_area">
                <p id="text_area"></p>
            </div>

            <div id="button_area">
                <input id="input_text" type="text" value="Sample Message">
                <button id="exec">click!</button>
            </div>

        </div>
    </body>
</html>

sample

sample には textbox が存在しています。
入力したうえで button を click すると入力した文字列が 一文字ずつ fadeIn します。
別に fadeIn を使っても良いんですが最終形はもう少し凝ったこともするらしいので
あえて animate を使用しています。

どうでしょう、意外といけているかと思うのですが・・・
一度これで確認してもらおうかと思います。
最終的にはもう少し装飾などを追加しますが、まずはこれで確認してもらおうと思います。

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

アニメーションの同時実行

今回も備忘録的な内容です。
当blog でも animate の同時実行は何度か利用しているのかとも思います。
ただ、今回は同時実行をする際に、終了の時間を変更して欲しいとのことでした。
とりあえずやってみます。

<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(){

                $('#exeMove1').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px',
                            left     : 300 + 'px'
                        },
                        3000,
                        'linear'
                    )
                });
                
                $('#exeMove2').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px'
                        },
                        {
                            duration : 3000,
                            easing   : 'linear',
                            queue    : false
                        }
                    )
                    .animate(
                        {
                            left     : 300 + 'px'
                        },
                        {
                            duration : 1500,
                            easing   : 'linear',
                            complete : function(){ $('#target_div').animate({left : 0 + 'px'}, {duration: 1500, easing: 'linear'}) },
                            queue    : false
                        }
                    );
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            div#disp_area {
                position         : relative;
            }

            div#target_div {
                position         : absolute;
                width            : 50px;
                height           : 50px;
                background-color : #ffff00;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exeMove1">click me! 1</button>
                <button id="exeMove2">click me! 2</button>
            </div>

            <div id="disp_area">
                <div id="target_div"></div>
            </div>

        </div>
    </body>
</html>

sample

sample 「click me! 1」を click すると黄色の div が右下に移動します。
まぁ、上に動く動きと、右に動く動作を同時に行っている形ですね。
但し、この場合それぞれの動きに対して時間を設定することができません。

sample 「click me! 2」を click すると黄色の div が右下に移動し、
その後、左下に移動します。
今回は下に動きの半分の時間で右へ行く動作を指定し、残りの時間で
左に移動させています。

上下の動きと左右の動きで実行時間を変えることができました。
この方法だと同時に違う object に動きをつけることも出来ます。

取り急ぎ今までは一つの object を動かすことが多かったため
余り気にしていなかったのですが、今後は色々な動作をさせる
ことが出来ますね。

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

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