[info red]テスト中[/info]

マトリックスエフェクトを今更ながらに実装してみる

指定可能なもの

[t(area_1)]

  • h1～h6
  • ulもしくはol
  • 任意のli
  • 段落p
  • 段落pのショートコードのinfo
  • 段落pの中のいずれかの要素

[a(area_2)]使い方に戻る[/a]

今の所こんな所ですが、これら適用できるセレクタは別途指定することもできます。

[info red scramble]指定方法はcssのセレクター形式で指定できるようにしてあります。[/info]

使用用途とか、何故にこんなものをへの回答

まず正式名称はTextScrambleで、世にいうscramble text effectというものです。
今回はJustin Windle氏のTextScrambleを改造して、サイトの各部位に使用できるようにしてみました。
マトリックスエフェクトというのは別でありまして、緑色の上からランダムな文字が流れ落ちてくるようなアレのことです。

だったらそう書けよと言われるかもしれないのですが、なんかランダムな文字がゴチャっとグニャっとを説明するのは案外難しく、マトリックスみたいのという方がわかり良いかもと思いまして。

見出しの答えとしては、これらは単順に答えるならオマケでしかないのですが、ちょっとした難読テキストを作ると言う利用方を想定しています。
もし広い画面で見られている方はテキストの幅が増えたり減ったりで改行したり色々とあって読みにくくなっているかと思いますし、テキストそのものも800msごとにしか表示されず動きますからいうほど影響はないかもしれませんが少しぐらいはセキュリティ面でも役に立つかもしれないと言う点で実装しました。

例えばここの文章とか案外長いとどうなるかは自分もここで書いてみて始めてわかったで、これが良いのかどうかはまた別として鬱陶しいことは間違いないと思います。

パッと見てわからないように、また伏せ字にするまでもないぐらいのもの、完全に隠す必要はないけどもチラ見されてもわからないぐらいのセキュリティ的にも叶うぐらいのものにはなっているのではないかと思います。

あまりにも難読すぎると書いた本人もわからなくなってしまいますし(オリジナルを見たらわかりますが)、それを読みに来た人であれば「なんだよこの面倒くさい」のということになるでしょう。

本名、公式な名前を出すと訴えられるかもしれないのでそこは伏せますが、例えば次のような感じで、

今年、し◯こたんはレベル38として使ってみたりとか。

あまり短いテキストだとあまり効果は出ないと思いますので例文がなかなか見つからないのですが、こんなふうに使うと読めはするけれども、電車でチラ見してくるような人にはわかりづらくなると思います。まぁそうなればいいなぁと思うだけではありますが。

できるだけ漢字を入れると効果が上がるのではないかと思う所もあります。ひらがなばかりとかカタカナばかりとかもわかりにくいかもしれません。

何度も書きますが、幅が変わり画面が動くのでここらは色々要注意が必要です。

使い方

[t(area_2)]最後に書くのは単に忘れていたからですが、単語さえ間違えなければ通常のクラスに追加するだけのシンプル仕様です。
ただしどこでも使えるわけではなく、

[a(area_1)]指定可能なもの[/a]でリストアップしたものにだけ適用できます。これらはjavascriptのコードの一部にcssのセレクタルールを追加するだけで増やすことができます。
ルールを追加して、クラスを任意の箇所に入れるという感じですね。

<p class='scramble'>テキスト全体</p>
<p>テキストの中の<span class='scramble'>こういう箇所だけとか</span>の一部とかに忍ばせる場合</p>
<h3 class='scramble'>見出しとかに忍ばせる場合</h3>

このような感じです。