まだプログラマーですが何か?

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ:jQuery

CSS だけで画像やブロック要素にぼかしを入れることができます。説明の前に、実際に試せるウェブページを作って公開したので、こちらを御覧ください:
https://dotnsf.github.io/blur_change/

アクセスすると以下のような画面が表示されます。これはある画像がかなり強めにぼかされて表示されています。この時点では「なんとなく人間?」くらいはわかるかもしれませんが、性別や表情、姿勢など、どのような画像が表示されているのか、まだわかりませんよね:
2020090701


画面下にスライダーバーがあり、これでぼかしのレベルを調整できます。最初はスライダーの一番右(最大ぼかし)に設定されていて、これを左に移動させることでぼかしを少なくすることができます:
2020090702


だんだん元の絵が見えてきます:
2020090703


スライダーを一番左まで移動させるとぼかしはゼロになり、元の絵が表示されます:
2020090704


なお元の絵はいらすとや様の「ブレザーとネクタイの女子学生のイラスト」を使わせていただきました:



このようなぼかしを実現するには、CSS で対象要素(今回の場合は <img> 要素)に以下のようなスタイルを指定します:
#img{
  -ms-filter: blur(100px);
  filter: blur(100px);
}

この blur 属性の指定でぼかしを実現しています。上例では blur(100px); という指定をしていますが、この 100 の部分の数字が大きいほど強いぼかしが入り、0 だとぼかしもゼロになって元の画像のままで表示されます。

上述のサンプルページでは、スライダーバーの動きに従ってスタイル指定を書き換えることで動的にぼかしのレベルが変わるような JavaScript を実装しています。具体的には jQuery を併用して以下のような HTML および JavaScript を実装しました:
<script>
$(function(){
  var t = $('#img')[0];
  t.style['-ms-filter'] = 'blur(100px)';
  t.style['filter'] = 'blur(100px)';
});

function changeBlur(){
  var b = $('#rng').val();
  var t = $('#img')[0];
  t.style['-ms-filter'] = 'blur(' + b + 'px)';
  t.style['filter'] = 'blur(' + b + 'px)';
}
</script>
</head>
<body>

<div class="container">
  <img id="img" src="https://1.bp.blogspot.com/-anFajTcy3CM/XxU0nhH2UyI/AAAAAAABaOA/Fovyifhdjvs8HRvHhNZrOWXEDcTN1_E5gCNcBGAsYHQ/s450/school_blazer_girl_necktie.png" width="80%"/>
  <br/>
  <input id="rng" type="range" value="100" min="0" max="100" step="5" oninput="changeBlur()" width="100%"/>
</div>

この例ではスライダーバーの値に合わせてぼかしのレベルを変えていますが、他に setTimeout を使ったり、クリックイベントハンドラを使うなどして少しずつぼかしを薄くする、といった使い方ができると思っています。


なお、JavaScript で動的にスタイルを書き換える手法については以前のブログエントリで解説しているので、こちらも参照ください:
JavaScript でスタイルを動的に書き換える






簡単にタグクラウドっぽい UI を作れないかなあ、と思ってたら、jQuery のプラグインがありました:
jQCloud

CDN などで jQuery をロードしてから、この jQCloud の CSS および JavaScript をロードして使います。

実際のタグクラウドとしての使い方は公式の README.md を参照いただきたいのですが、タグクラウドにしたい要素を配列で与えて、jQuery で読み込ませるだけです。具体的にはこんな感じです:
<html>
<head>
<title>jQCloud</title>
<!-- jQuery と jQCloud をロード -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jqcloud.css" />
<script type="text/javascript" src="./jqcloud-1.0.4.js"></script>
<script type="text/javascript">
//. タグクラウドの要素(文字と、大きさと、リンク先)を配列で用意
var word_list = [
  { text: 'クラウド', weight: 19 }
  ,{ text: 'IBM Bluemix', weight: 14, link: 'http://bluemix.net/' }
  ,{ text: 'マンホール', weight: 12, link: 'http://manholemap.juge.me/' }
  ,{ text: 'ねっぴ', weight: 9, link: 'http://neppi.co/' }
  ,{ text: 'ツイートマッパー', weight: 9, link: 'http://tweetsmapper.juge.me/' }
];

$(function(){
  //. 上記で用意した配列をタグクラウドとして表示
  $("#tagcloud").jQCloud( word_list, {
    width: 500, height: 200
  });
});
</script>
</head>
<body>

<!-- ここにタグクラウドを表示する -->
<div id="tagcloud"></div>

</body>
</html>


このページをブラウザで開くと、このようなタグクラウドが表示されるはずです。文字とその大きさは JavaScript で指定した通りになっているはずです:
2015071700


また「クラウド」という文字以外にはリンク先を指定していたので、クリックするとそれぞれに指定されたページに移動するはずです。

かなり簡単に実現できちゃいました。


このページのトップヘ