こんにちは、取締役のづやです。
今みなさんがご覧になってるこの記事って、Web上で動いてるじゃないですか。
「読みやすい文章」とか「SEOに強い」とか、記事を書く上で大事なことっていっぱいありますよね。
でもやっぱせっかくのWeb上なんで、「Webだからできる見せ方」ってあると思うんです。本質じゃないかもしれないですが、そういうのが好きなんで何個か考えて勝手にLIGブログに追加してみました。
ガクブルさせてみる
ブログ書いてると「ガグブル」とか「震える」とか使うことってよくありますね。たとえばこの記事にも。
これをこうしてみます。
緊張ガクブル。
ガグブル感が伝わりますね。
CSSのanimationで細かくtransformをいじってるだけです。これくらいはCSSですぐにできる、いい時代ですね。
常時揺れてると過度に表現しすぎて、文を読むのを阻害する気もするので、ホバーで動くようにしてみますか。
緊張ガクブル。うん、これくらいならまあ分読むのを邪魔しなくていんじゃないかな。スマホ？ タップしたら動くよ。
画像にブラーをかけてみる
やっぱこう、すぐ見られたくない画像とかあるじゃないですか、きっと。「大事なオチなのに、スクロールしすぎて先に目に入っちゃうじゃん」みたいなのを防いでみます。
たとえばこういう記事のギリギリな画像も、覚悟を持った上で見てもらうことが可能に。
PixiJSのFilterかけてるだけです。 PixiJS v4が出ていたのでFilterを触っていきます
Kazuya Takato
こちらの記事のブラーフィルターを使用しています。一応data属性でブラーの度合いを変えられるようにする気遣いを見せてみましたが、あんまり使わない気がしてます。
例によってホバーで動くようにしてみました。スマホ？ うん、タップしたら動くよ。
……え、CSS3のfilter: blurでいいじゃんって？ それはそうだね、その通りだね。。。
でもほら、PixiJSでベースつくったらこうやって違うフィルターもすぐかけられるからさ。
役には立たないけど、楽しいじゃん、うん。
スクロールしたら自動で文字がでてくる
それっぽい記事を探したけど、役にたつシーンが全然思いつかなかったです。
まあ稀によくあるあれです。オチをゆっくりみせたいときとか？
とこんな感じで表示させられます。
スクロールで発火するのはよくある実装です。本文内で使用する想定なので、対象class内のテキストを拾って、spanで囲むJavaScriptにしてます。1個1個transtionのdelayをずらして、順番にopacityを変えている感じです。
いかがでしょうか、まだ可能性はたくさんある気がしているので、思いついたら適当に記事にしていきたいと思っています。それではまた。
おまけ
使われることはないであろう、なんの役にも立たない表現です。
画像をクリックしてみてね。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
