タグ別アーカイブ: css

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

今回は 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 人がこの 投稿 は役に立ったと言っています。

直前の選択オブジェクトと現在の選択オブジェクト


直前の選択オブジェクトと現在の選択オブジェクト(訂正版)に訂正版を掲載しました。
andSelf は Ver.1.8 以降は非推奨とのことです。
今後は addBack をご使用ください。

Object の階層が深いと何時も苦労していたんですが、今までの苦労が嘘のようです。

親子階層のObject に対して 親階層を変更して 子階層の一部のみ find で検索して
其々に同じ変更を行うと云った処理です。

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

                $('#exec_o_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').css({'background-color' : '#ff0000'});
                });
                $('#exec_e_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').css({'background-color' : '#00ff00'});
                });

                $('#exec_odd').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').andSelf().css({'background-color' : '#ff0000'});
                });
                $('#exec_even').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').andSelf().css({'background-color' : '#00ff00'});
                });

                $('#exec_class-a').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.a').andSelf().css({'background-color' : '#0000ff'});
                });
                $('#exec_class-b').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.b').andSelf().css({'background-color' : '#ff00ff'});
                });
                $('#exec_class-c').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.c').andSelf().css({'background-color' : '#ffff00'});
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            button {
                margin           : 5px;
            }

            div.disp_area {
                width            : 500px;
                border           : solid 1px #000000;
            }

            div.target_div {
                width            : 50%;
                border           : solid 1px #000000;
            }

        --></style>

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

            <div id="button_area">
                <button id="exec_o_only">click me! change odd only</button>
                <button id="exec_e_only">click me! change even only</button>
                <br />
                <button id="exec_odd">click me! change odd add parent</button>
                <button id="exec_even">click me! change even add parent</button>
            </div>
            <div id="disp_area" class="disp_area">
                <div class='target_div odd '>Target Div  1</div>
                <div class='target_div even'>Target Div  2</div>
                <div class='target_div odd '>Target Div  3</div>
                <div class='target_div even'>Target Div  4</div>
                <div class='target_div odd '>Target Div  5</div>
                <div class='target_div even'>Target Div  6</div>
                <div class='target_div odd '>Target Div  7</div>
                <div class='target_div even'>Target Div  8</div>
                <div class='target_div odd '>Target Div  9</div>
                <div class='target_div even'>Target Div 10</div>
            </div>

            <div id="button_area2">
                <button id="exec_class-a">click me! change class-a</button>
                <button id="exec_class-b">click me! change class-b</button>
                <button id="exec_class-c">click me! change class-c</button>
            </div>
            <div id="disp_area2" class="disp_area">
                <div class='target_div a'>Target Div  1</div>
                <div class='target_div b'>Target Div  2</div>
                <div class='target_div c'>Target Div  3</div>
                <div class='target_div b'>Target Div  4</div>
                <div class='target_div a'>Target Div  5</div>
                <div class='target_div b'>Target Div  6</div>
                <div class='target_div a'>Target Div  7</div>
                <div class='target_div a'>Target Div  8</div>
                <div class='target_div c'>Target Div  9</div>
                <div class='target_div b'>Target Div 10</div>
            </div>

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

sample

sample の其々の button を click すると親階層と指定した子階層のに対しての
背景色を変更してみました。

実際には業務で使用してみないと正直わかりませんが、私としては非常に便利です。

今までは其々に行う変更内容を親子で別けて其々に指定していました。
そのせいで修正の際にどちらかのみを修正してお客様に怒られる・・・

皆さんはそんな経験は無いでしょうか。
今後は極力使っていきたいと思います。

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

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

オブジェクトの範囲指定

今回も備忘録的な話です。
jQuery の slice に関して存在は知っていたのですが、使用方法が知っている内容と
違ったため記載しておきます。
・・・ちなみに今までは substr と同様に文字列の切り取りと思ってました(笑)

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

                // Change Div
                var dataS;
                var dataE;
                $('#set_change').click( function(){
                    dataS = parseInt($('#select_start').val());
                    dataE = parseInt($('#select_end').val()) + 1;
                    $('.target_div').css({'background-color':'#ffffff'}).slice(dataS, dataE).css({'background-color':'#00ffff'});
                });

            });

        --></script>

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

            div {
                margin       : 10px;
            }

            div.target_div {
                width        : 25px;
                height       : 25px;
                line-height  : 25px;
                text-align   : center;
                border       : solid 1px #000000;
                float        : left;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="select_area">
                <select id="select_start">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
                <select id="select_end">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
                <button id="set_change">Set Change</button>
            </div>
            <div id="disp_area">
                <div class="target_div">00</div>
                <div class="target_div">01</div>
                <div class="target_div">02</div>
                <div class="target_div">03</div>
                <div class="target_div">04</div>
                <div class="target_div">05</div>
                <div class="target_div">06</div>
                <div class="target_div">07</div>
                <div class="target_div">08</div>
                <div class="target_div">09</div>
            </div>
        </div>

    </body>
</html>

sample

sample では select にて範囲を指定し、button をクリックすることで下部に
用意した div の背景色が変わります。

・・・以外と便利なものですね。
実は今までも、li の n番目から m番目 だけ太字にしたいなどの処理はありました。
その場合 eq や loop処理で対応していたのですが・・・
今後は上手く使用して行きたいですね。

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

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

3D 的にページを傾ける(2)

以前に3D 的にページを傾けるを行いました。
しかし、前回前々回で 3D の処理をやった見たところ、もう少し良い方法があるようです。

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

                // initialization
                $('#cube_area_2d').css('zindex', 0);
                $('#cube_area_2d').animate(
                    {
                        zindex : 1
                    },
                    {
                        // animate time ( second 3 )
                        duration:3000,
                        step:function(step){
                            // step animate
                            $(this).css({transform:'rotateY(' + ((step * angle) - 15) + 'deg)'});
                        }
                    }
                );

                $('#cube_area_3d').css('zindex', 0);
                $('#cube_area_3d').animate(
                    {
                        zindex : 1
                    },
                    {
                        // animate time ( second 3 )
                        duration:3000,
                        step:function(step){
                            // step animate
                            $(this).css({transform:'rotateY(' + (step * angle) + 'deg)'});
                        }
                    }
                );

            }

        --></script>

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

            div.main_area {
                margin           : 50px;
                margin-left      : 100px;
            }

            div#main_area_2d {
            }

            div#main_area_3d {
                perspective      : 1000;
            }

            div.cube_area {
                height           : 180px;
                width            : 180px;
                transform-style  : preserve-3d;
                font-size        : 50px;
            }

            div#cube_area_2d {
                transform        : rotateY(-15deg);
            }

            div#cube_area_3d {
            }

            div#button_area {
            }

            div.panel {
                position         : absolute;
                height           : 180px;
                width            : 180px;
                text-align       : center;
                line-height      : 180px;
            }

            div.panel_1 {
                background-color : #ffcccc;
                transform        : rotateX(0deg) rotateY(0deg)  translateZ(90px);
            }

            div.panel_2 {
                background-color : #00ff00;
                transform        : rotateX(0deg) rotateY(90deg) translateZ(90px);
            }

            div.panel_3 {
                background-color : #ccccff;
                transform        : rotateX(0deg) rotateY(180deg) translateZ(90px);
            }

            div.panel_4 {
                background-color : #0000ff;
                transform        : rotateX(0deg) rotateY(-90deg) translateZ(90px);
            }

        --></style>

    </head>
    <body>

        <div id="button_area">
            <button id="left"  onclick="exeImageRotate(360);">left</button>
            <button id="right"  onclick="exeImageRotate(-360);">right</button>
        </div>
        <div id="main_area_2d" class="main_area">
            <div id="cube_area_2d" class="cube_area">
                <div class="panel panel_1">1</div>
                <div class="panel panel_2">2</div>
                <div class="panel panel_3">3</div>
                <div class="panel panel_4">4</div>
            </div>
        </div>
        <div id="main_area_3d" class="main_area">
            <div id="cube_area_3d" class="cube_area">
                <div class="panel panel_1">1</div>
                <div class="panel panel_2">2</div>
                <div class="panel panel_3">3</div>
                <div class="panel panel_4">4</div>
            </div>
        </div>

    </body>
</html>

sample

spmple には button があります。
button を押すと立方体が回転します。
ちなみに上の立方体が前回のものと同じです。
今回の内容(下の立方体)は“遠近法”にて奥行きを表現するようです。

正直やってみないと理解できませんでしたが、実際に試してみると
違いが大きく分かりますね。

・・・一点問題があって、今回もjQueryは余り使っていません・・・
あと一回、3D表示を行おうと考えていますが・・・
次回は jQuery になる予定です・・・、きっと(笑)

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

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

画像表示の演出(2)

前々回に続き画像表示の演出です。
演出の方法自体は色々ありますのでちょっと別パターンです。

<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 moveAnimateImage (id) {
                    $('#' + id).css({transform:'scaleX(1)'});
                }

                flg01 = false;
                flg02 = false;
                flg03 = false;
                flg04 = false;
                $(window).scroll(function () {
                    var winTop = ($(this).scrollTop() + 150);
                    if (winTop > $('#image04').offset().top) {
                        if (flg04 == false) {
                            moveAnimateImage('image04');
                            flg04 = true;
                        }
                    } else if (winTop > $('#image03').offset().top) {
                        if (flg03 == false) {
                            moveAnimateImage('image03');
                            flg03 = true;
                        }
                    } else if (winTop > $('#image02').offset().top) {
                        if (flg02 == false) {
                            moveAnimateImage('image02');
                            flg02 = true;
                        }
                    } else if (winTop > $('#image01').offset().top) {
                        if (flg01 == false) {
                            moveAnimateImage('image01');
                            flg01 = true;
                        }
                    }
                });

            });

        --></script>

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

            div#main_area {
                margin              : 10px;
            }

            div.image {
                transition          : 0.2s;
                transform           : scaleX(0);
            }
            
            div#image01 {
                margin-top          : 650px;
            }

            div#image02 {
                margin-top          : 200px;
            }

            div#image03 {
                margin-top          : 300px;
            }

            div#image04 {
                margin-top          : 100px;
                margin-bottom       : 400px;
            }


        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="text_area"><p>Pleas Scroll Down</p></div>
            <div id="image01" class="image"><img src="image_jpeg01.jpg"></div>
            <div id="image02" class="image"><img src="image_jpeg02.jpg"></div>
            <div id="image03" class="image"><img src="image_jpeg03.jpg"></div>
            <div id="image04" class="image"><img src="image_jpeg04.jpg"></div>
        </div>

    </body>
</html>

sample

sample 画面を下に Scroll していくと特定の位置で画像が表示されます。

前々回と機能自体は同様ですが表示の仕方を変更して見ました。
表示方法が変わると少しイメージが変わりますね。
# 残念ながら表示の方法の重要な部分は CSS ですけどね。

以前に「こんな感じの表示が実現できるか」と問い合わせを頂いた事があったのを思い出しました。
今度聞かれた際には堂々と「出来ますよ」と返事ができますね。

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

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