sacrifsコメントするTweetHTMLで演出っぽいものを作れるか、というのと、jQueryのプラグインを作ってみる練習。Haxeを最近は使ってますが、これは生JSです。jQueryプラグインですしね。RayEffectです。JSn0wriさんがwonderflで作られていたFlashエフェクトを元ネタにしています。(どこかの何かのキャンペーンサイトで同じようなエフェクトがあったような気がします。...が果たして何だったか。)Canvasで真似して書けばあっさりできそうな気もしますが、CSSでもできそうなのでCSSとjQueryだけで再現してみました。};})(jQuery);→gist肝の部分は、引き伸ばしの画像を作ってるところで、CSSのtransform:scaleとtransform-originを使っています。あとで見返してみると、わざわざDOMから外すよりも、上にエフェクト用画像を被せるだけにしたほうが軽くなりますかね。...まあ、それをいうなら横だけより縦とかいろんな方向できたほうが良かったりしますし、お試しとしてはまあいいかなと。IE8以下は非対応ですが、スマホでも動くと思います。古いと動かないかもしれませんが、iOS6のSafari、Android4.0のブラウザでは普通に動いてくれました。(1つ動かすくらいなら重さも問題無さそう。)ちなみに、IE8への対応もtransform:scaleを使わずに、単純に画像をwidth倍してwidth分ずつ移動させれば、同じような見え方になるはずではと思ったんですが、IEだけ全滅しました。(他のブラウザは問題なし)IEだけwidthが16384px?以上の画像を表示すると1pxになってしまうという仕様?があるらしく、どうしようもないようでした。よらノートなんだこれぇ...。ことで、IE9以上で表示されないよりはマシなのでtransform:scaleを使っています。想定外の数値なんでしょう。(scaleで拡大するのは大丈夫な理由がよくわかりませんが...。)jQueryのプラグイン作るのって難しいのかと思っていましたが、決まりがわかってれば簡単にできるんですね。(こういうの書くとき、jsdo.itの方がいいのだろうか。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。2016/04/21Ansibleを触ってみた。