javascriptだけで画像にグラデーションをつけるサンプル

javascriptだけで画像にグラデーションを付けるテクニックが紹介されている記事を見つけました。

画像にグラデーションをかけるjavascript「Transparent Gradients」

オリジナルの記事はこちらのようです。
Creating Transparent Gradients With jQuery

面白そうなので、試してみました。






横方向へのグラデーション



サンプルでは下からグラデーションが掛かっています。
まったく同じサンプルの実行では芸がないので、左方向からグラデーションを掛けて見ることにします。

06_001_20111208000709.png

グラデーションサンプル1


これ、何をやっているかというと、高さが画像と同じで幅が5pxのdivを
透過度(opacity)を1(非透過)から0(透過)に増やしながら、画像の上に左から右へ重ねています。

06_002_20111208000708.png



グラデーションを掛けている部分のソースはこんな感じになりました。
※紹介されているサイトとほとんど同じです。


$(function(){
    $( "img.gradient" ).each(
        function( intIndex ){
            var jImg = $( this );
            var jParent = null;
            var jDiv = null;
            var intStep = 0;

            // 親を取得
            jParent = jImg.parent();

            // 親のサイズを、画像のサイズと同じにする
            jParent.css( "position", "relative" ).width(jImg.width()).height(jImg.height());

            // ループしながら、縦長のdivタグを生成
            for (intStep = 0 ; intStep <= 50 ; intStep++) {

                // 画像の上にかぶせるdiv
                jDiv = $( "<div></div>" );

                // 少しずつ透過度(opacity)を1から0に変更していく
                jDiv.css ({backgroundColor: "#FFFFFF",
                            opacity: 1- (intStep * 2 / 100),
                            top: "0px",
                            left: ((intStep * 5) + "px"),
                            position: "absolute"}
                            )
                            .width( 5 )
                            .height( jImg.height() );

                // 透過divを画像の上に載せる
                jParent.append( jDiv );

            }

        });

    }
);











グラデーションの範囲を動的に変更



これだけでは、わざわざJavaScriptでグラデーションを掛けているメリットが
あまり見出せなかったので、動的にグラデーションの範囲を変更するサンプルを作ってみます。

06_003_20111208000708.png

06_004_20111208000708.png

06_005_20111208000706.png

グラデーションサンプル2



htmlのソースはこんな感じに。


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>グラデーション-サンプル2</title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.transgradient2.js"></script>
    <script type="text/javascript">
    
    //画面構築完了後
    $(function() {
        //ラベルのクリックイベントで、グラデーション範囲を変更
        $("#r1_1").click(function(){
            //グラデーションなし
            $.gradient.clear($("#gradient_target"));
        });
        
        $("#r1_2").click(function(){
            //左から1/4程度
            $.gradient.quarter($("#gradient_target"));
        });
        
        $("#r1_3").click(function(){
            //左から1/2程度
            $.gradient.half($("#gradient_target"));
        });
    });
    
    </script>
</head>
<body>
    <h3>グラデーション範囲変更</h3>
    グラデーション:
    <label><input id="r1_1" name="r1" type="radio" checked />なし</label>
    <label><input id="r1_2" name="r1" type="radio" />左から1/4</label>
    <label><input id="r1_3" name="r1" type="radio" />左から半分</label>
    <div><img src="images/sample.png" width="450" height="150" id="gradient_target"></div>
</body>
</html>







javascriptのソースはjQueryのプラグイン風にしてみました。


(function($) {

    $.extend({
        gradient : new function() {
        
            this.clear = function(img) {
                var jImg = img;
                var jParent = null;
                
                // 親を取得
                jParent = jImg.parent();
                
                jParent.empty();
                jParent.append(img);
            };
            
            this.quarter = function(img) {
                this.clear(img);
                this.effect(img, 3);
            };
            
            this.half = function(img) {
                this.clear(img);
                this.effect(img, 6);
            };
            
            this.effect = function(img, intSize) {
                var jImg = img;
                var jParent = null;
                var jDiv = null;
                var intStep = 0;

                // 親を取得
                jParent = jImg.parent();

                // 親のサイズを、画像のサイズと同じにする
                jParent.css( "position", "relative" ).width(jImg.width()).height(jImg.height());

                // ループしながら、縦長のdivタグを生成
                for (intStep = 0 ; intStep <= 50 ; intStep++) {

                    // 画像の上にかぶせるdiv
                    jDiv = $( "<div></div>" );

                    // 少しずつ透過度(opacity)を1から0に変更していく
                    jDiv.css ({backgroundColor: "#FFFFFF",
                                opacity: 1- (intStep * 2 / 100),
                                top: "0px",
                                left: ((intStep * intSize) + "px"),
                                position: "absolute"}
                                )
                                .width( intSize )
                                .height( jImg.height() );

                    // 透過divを画像の上に載せる
                    jParent.append( jDiv );

                }
            };
        }
    });

    $.fn.extend({
        clear : $.gradient.clear,
        quarter : $.gradient.quarter,
        half : $.gradient.half
    });

})(jQuery);






ちなみに、jQueryのプラグインの書き方は以前調べた記事を見ながら書きました。
jQueryでJSONのデータ取得し、テーブルに表示するプラグインを作成する








文字を重ねてみる



グラデーションを掛けた上にさらに文字を重ねて表示してみます。

06_006_20111208000756.png

グラデーションサンプル3


htmlファイルはこんな感じになります。


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>グラデーション-サンプル3</title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.transgradient3.js"></script>
    <script type="text/javascript">
    
    //画面構築完了後
    $(function() {
        
        //反映ボタンで、画像を加工する
        $("#reflection").click(function(){
            var img = $("#gradient_target");
            
            //グラデーションなし
            if ($("#r1_1:checked").val()) {
                $.gradient.clear(img);
                
            //左から1/4程度
            } else if ($("#r1_2:checked").val()) {
                $.gradient.quarter(img);
                
            //左から1/2程度
            } else if ($("#r1_3:checked").val()) {
                $.gradient.half(img);
            }
            
            //上書き表示するhtmlを生成
            var override_html = '<span style="color:red; font-weight:bold; font-size:32px">' + $("#override").val() +'</span>';
            $.gradient.html(img, override_html);
        });
        
    });
    
    </script>
</head>
<body>
    <h3>グラデーション範囲変更</h3>
    グラデーション:
    <label><input id="r1_1" name="r1" type="radio" checked />なし</label>
    <label><input id="r1_2" name="r1" type="radio" />左から1/4</label>
    <label><input id="r1_3" name="r1" type="radio" />左から半分</label>
    <br />
    上書きする文字:<input type="text" id="override" /><input type="button" value="反映" id="reflection">
    <div><img src="images/sample.png" width="450" height="150" id="gradient_target"></div>
    
</body>
</html>







javascriptはこんな感じ。
テキストを上書きする処理を追加しました。


(function($) {

    $.extend({
        gradient : new function() {
        
            this.clear = function(img) {
                var jImg = img;
                var imgParent = img.parent();
                imgParent.empty();
                imgParent.append(img);
            };
            
            this.quarter = function(img) {
                this.clear(img);
                this.effect(img, 3);
            };
            
            this.half = function(img) {
                this.clear(img);
                this.effect(img, 6);
            };
            
            this.html = function(img, html) {
                var jParent = img.parent();
                var jDiv = $( "<div></div>" );
                
                jParent.css( "position", "relative" ).width(img.width()).height(img.height());
                
                // テキスト表示用のdivを作成
                jDiv.css ({top: "0px",
                            left: "0px",
                            position: "absolute"}
                            )
                            .width( img.width() )
                            .height( img.height() );
                
                jDiv.html(html);
                
                // 文字の入ったdivを画像の上に載せる
                jParent.append( jDiv );
            };
            
            this.effect = function(img, intSize) {
                var jImg = img;
                var jParent = null;
                var jDiv = null;
                var intStep = 0;

                // 親を取得
                jParent = jImg.parent();

                // 親のサイズを、画像のサイズと同じにする
                jParent.css( "position", "relative" ).width(jImg.width()).height(jImg.height());

                // ループしながら、縦長のdivタグを生成
                for (intStep = 0 ; intStep <= 50 ; intStep++) {

                    // 画像の上にかぶせるdiv
                    jDiv = $( "<div></div>" );

                    // 少しずつ透過度(opacity)を1から0に変更していく
                    jDiv.css ({backgroundColor: "#FFFFFF",
                                opacity: 1- (intStep * 2 / 100),
                                top: "0px",
                                left: ((intStep * intSize) + "px"),
                                position: "absolute"}
                                )
                                .width( intSize )
                                .height( jImg.height() );

                    // 透過divを画像の上に載せる
                    jParent.append( jDiv );

                }
            };
        }
    });

    $.fn.extend({
        clear : $.gradient.clear,
        quarter : $.gradient.quarter,
        half : $.gradient.half
    });

})(jQuery);





いや、なかなかいい勉強になりました。








関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ