インパクトある囲み表示

テレビニュ－ス報道においてタイトルを四角枠で囲み、一筆書きのようになぞって一周する表示方法があります。NHKやテレビ朝日で見かけました。

次の図、右下の◢ボタンを押してください。

 

以前、 ラジオ文化 で取り上げましたが、div要素のborderを利用していました。svgでpathデータを利用すれば、一筆書きの動くキャッチコピーに応用できそうです。進化版をお届けします。

複数の短歌、俳句、川柳を表示するとき、切れ目に挿入し表現を強調させるために囲みアニメーションを導入しました。

HTMLによる囲みアニメーション表現3例

HTMLのcssやJavaScriptを使ってダイナマイトの導火線が燃え移るように描写するにはAnimationを使うと便利です。ネット上を検索するとAnimationの使い方には、次の3つの方法があります。

①div要素を90度ずつ回転させた4つ要素のborderを時間遅れで表示させ四角の枠を表示する

②同じ要素を4つ用意し、それぞれのborder(border-top, border-right, border-bottom, border-left)を順に時間遅れで表示して囲みアニメーションを実現する

③一つのdiv要素に重ねてsvg要素を定義しpathデータで形成する4角形にanimationを使って囲みアニメーションを実現する

寸評

3つとも同じ機能を実現できます。プログラミングコードサイズは①から順に少なくなります。本格採用は本人の好みで③になりました。①と②と異なり③はLazyLinePainterライブラリを用いてJavaScriptである程度、面倒見てあげなくてはいけませんが、pathデータをcssに用意するだけ済むものもあるようです。

JavaScriptを使うと囲みアニメーションの開始時、終了時にイベント処理を紐づけることが可能で、奥深いアニメーションを実現することができます。

ページの最後に実演とプログラミングコードの閲覧方法を載せました。深みのあるページの表現方法としてお考えいただけたらありがたいです。

実演

ブラウザのロードボタンを押下すれば再実行されます。

囲みアニメーション関数コードの一例

ページのソースコードを表示させるには 右クリック-検証-ページのソースを表示 などをご利用ください。囲みアニメーションを3例挙げていますが、囲みアニメーションを記事に応用するには気に入った方法を1つ組み込むだけで十分です。