filter:blur()を使わずに文字をモザイク風にぼかすテンプレート作ったよ(cssとjQuery)　IEにも対応

転職サイトなどの口コミなどによく使われている、ぼかしテキストのサンプルです。
テキストを一部チラ見せして、続きを読みたい場合はクリックしてね、というアレです。

調べても大抵はfilter:blur()を使うパターンやsvg使う方法がよく出てくるんですが、どちらもIE非対応のようですね。

今やってる案件はレガシーなユーザーが多くIE対応が必須なので、頭抱えながらなんとかIEにも対応できるぼかしのテキストテンプレートを作ってみました。

まずはデモはこちら。

続いてソースコード。

html

<div class="lead">
   <p>山路を登りながら、こう考えた。知に働けば角が立つ。情に棹させば流される。意地を通せば…</p>
   <div class="txt mosaic">
       <div class="btn"><a href="#">続きを見る（有料）</a></div>
   </div>
</div>

css

/*---------- 基本設定(ここはいじらない)  ----------*/
.mosaic{
   position: relative;
   line-height: 0;
}
.mosaic img{
   width: 27px;
   margin:-5px;
   opacity: 0.5;
}
.mosaic .btn{
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   z-index: 999;
}


/*---------- 以下はコンテンツに応じて適宜調整してください ----------*/

/*外枠の設定*/
.lead{ 
   background:lightyellow;
   border: 2px solid gold;
   width: 320px;
   padding: 15px;
   margin: auto;
}
.lead p{
   margin-bottom: 10px;
}

/*続きを読むボタンの設定*/
.btn a{
   display: block;
   overflow: hidden;
   text-indent: -9999px;
   white-space: nowrap;
   background: url(./images/btn.png) no-repeat center;
   background-size: 200px auto;
   width: 200px;
   margin: 0 auto;
   height: 57px;
}
.mosaic .btn{
   width: 200px;
}

js

  var bokashiColor = "black"; //色の定義
  $(function () {
    var array = [150]; //文字数の設定(配列にしているので異なる文字数の乱数にすることも可能)
    var randTxt = array[Math.floor(Math.random() * array.length)];
    for (var i = 0; i < randTxt; i++) { //出力したい文字数
      for (var r = 0; r < 1; r++) {
        var min = 1;
        var max = 5; //文字画像のパターン数
        var random = Math.floor(Math.random() * (max + 1 - min)) + min;
        $('.mosaic').append("<img src='./images/mosaic/" + bokashiColor + "/" + random + ".png'>"); //画像パスの設定
      }
    }
    $('.mosaic').append("<img src='./images/mosaic/" + bokashiColor + "/0.png'><br>"); //最後の句読点「。」のモザイク画像
  });

考え方としては、1文字分のモザイク画像をたくさんしきつめちゃえっていう単純な発想です。
モザイクは画像にしているので、IEにももちろん対応します。

ソースコードはgithubにも上げてあるので、画像含めサンプル一式はこちらからダウンロードできます。

ソースコードはこちら

また、色の定義を変更すれば、文字数や文字色なども自由に変えられます。
文字色に関しては、black,navy,white,brownの4パターンを用意しています。新しく画像を追加すればいくらでもカラーバリエーションは増やせます。

おまけ

ぼかしの方法について調べている際、色々他社のサイトみたりしてたんですが、某転○会議は、検証ツールで中身が丸見え…なんてことになってました(汗)
そんなことするユーザーはいないと想定されているかもしれませんが、やはりダミーテキストか画像にするのが吉ですね。
無料会員登録ならまだしも、課金サービスでこんなことやからしたら大変なことに…！

実は、この抜け穴使って覗き見しちゃってるユーザーってまあまあいたりして…(^^;)