Poem × Picture 2

j.mp/2zhfqc9 "Poem × Picture" screenshot mosaic 2017 on Flickr

太陽 月 星 雲 雨 雪 雷

虹 オーロラ 鳥 虫 凧

気球 飛行機 ヘリコプター

ロケット UFO 神々

天使 超人

iframe: ラベル”Toggle-Wipe(2nd)”

*2014-12-26追記
opacityを適用し、テキスト上をhoverすると、テキストが消える形に変更。表示位置は基本的に、短文の場合は、左詰め、中央揃いの2種類で、長文の場合は、Multiple Columnsで表示する。唯、いずれも背景画像との兼ね合い次第。
実は当初は全く逆に、hoverすると背景画像が消え、テキストが残る形にしたかった。そうすれば、既に背景のある2ndブログにもためらうことなく採用できると考えたので。技術が伴えば、いずれ再度変更するかもしれない。

3年前の Poem × Picture の末尾で、hoverすると背景画像が消え、テキストが残る形にしたい旨の将来の展望を書いた。

理由は、主に2ndブログのテンプレートの青空と雲の背景を生かすためだ。

空にお似合いなものと言えば、
太陽、月、星、雲、雨、雪、雷、虹、オーロラ、鳥、虫、飛行機、ヘリコプター、ロケット、UFO、神々、天使、超人の類。
願わくば絵と文字もその一つに加えよう。
”思い浮かぶ”という言葉があるように。

これまでは主に自作の絵画から成る背景画像 (background-image) の、その上層のテキストが消えていたが、今回漸く技術が伴い、それに加えて、テキストはそのままに、その下層にある画像 も消えるように変更した。謂わば、映画や動画編集におけるワイプのような機能。
但し、現状では1stブログでは部分的に不具合があり、その消え方を制限(後述)し、完全な適用は2ndブログのみとする。
その構造は、基本的には三層から成り、下から、テンプレートの背景画像、自前の画像(background-image もしくは img)、テキストの順に、各要素が垂直的に重なっている。

またそれらの要素は、入れ子のように下層より相対的に面積が小さくなっていて、テキスト上をhoverするとテキストが縮小、消失し、自前の画像上の内、テキストの余白に当たる部分をhoverすると、縮小消失したテキストは復帰し、替わりに画像が縮小消失する。
つまり画像及びテキスト自体が、同一エリアでON/OFFを切り替えるトグルスイッチのようになっている。
画像(正確には搭載したコンテナ)の外へhoverをずらせば、初期表示に戻る。

加えた CSS においては、要素の拡大縮小には transform: scale を、また垂直的に重ねるためには transform: translate を適用した。
後者は w3schools.com の How To Position Text Over an Imageからの完全な借用。

.centered, #centered {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

1stブログの不具合

ところで、2ndブログでは、画像と文字が天翔て消えては戻り、想定以上にスムースだが、加えた CSS は同じ筈なのに、1stブログのテストでは異なる動作をした。
自前の画像上でhoverすると、わずかの誤操作用の遅延の後、縮小を開始するものの、そのhover地点に差し掛かると、縮小を止めてしまうのだ。
表面的にはopacityが利いて、一応消えるが、縮小を止めた証拠に、その地点でカーソルがノッキングするように明滅する。元の大きさに戻ろうとしているらしい。
原因を調べたが、現時点では力及ばず不明。
処方として、1stブログにおいては、ネックとなったtransform: scale を非適用にし、背後に染み込むように消えるのみで、縮小はしない。

そもそも2ndブログ用に追加した機能だから、背景が概ね白色の1stブログでは使う場面は少ない。窓を開けても、隣の建物の壁といった感じ。
しかし、動くものに思わず反応してしまう猫のように、指先の動きに反応し画像が縮小消失、その後拡大復帰する、この快感は捨てがたい。
別のアプローチも視野に入れ、1stブログの完全な適用は今後の課題としたい。

出来る限りシンプルかつ感覚的な操作性が好みなので、新たに表示切替用ボタンを設けることは、初めから全く考慮しなかった。
境界を明示せず、画像やテキスト自体がトグルスイッチのようになっている方が、驚きがあって面白い。
しかし、曖昧模糊を楽しむこの姿勢には、勿論いい加減さを生む弊害もある。
他人様が苦労して作ったものを借用し、新たに加えた CSSが、望外の効果を生むことがあるものの、その逆にCSS全体が肥大して、迷路から逃れられない天罰が下ることもある。
正直今回のケースは、どちらのテンプレートの動作が正規の反応なのかよく解らない。
うまくいっているように見えて、2ndブログの方が邪道なやり方で、偶然の産物かもしれない。

尚、双方のブログのラベルに"Toggle-Wipe"を新たに設けた。手慰みにもなるので、”猫じゃらし”にしようかと迷ったが、突飛すぎるので止めた。

現時点でラベル"Poem"の付いた投稿は50余り、未だ変更を適用したのは少ないが、2ndブログにおいては漸次、その多くに適用する予定。