返信
サムネイルをクリックするとステージに該当する拡大写真が登場するタイプのフォトギャラリーに、「Slide Show」ボタンをクリックするとスライドショーが開始される機能を加えたものである。 写真の登場・退場には、フェイ … 続きを読む
前回の投稿に続き、サムネイル用マウスオーバー効果であるが、マウスオーバーで図上にテキストを表示させるようにしたので、ナビゲーション用にも適用できる。すなわち、拡大画像表示のためのサムネイルにも応用できるし、リンクページ … 続きを読む
フォトギャラリーなどで、並んでいるサムネイルの一つにマウスオーバーしたときに、何らかの反応があると操作にリズムが出てくるというか、選んでいるという実感がわいてくるというものである。ここで紹介するのは、マウスオーバーでサ … 続きを読む
フルスクリーンのスライドショーの作成である。画面全体を写真で覆い尽くす設定として、background-size:cover; を用いた。ユーザーの表示画面の縦横比が如何様になっても、空白ができたり、タイル状になったり … 続きを読む
4chan 等の画像付き掲示板で、画像（サムネイル）をクリックすると、同じ位置に拡大写真が表示され、回りこんでいたテキスト文が画像の下に表示されるのを見かけるが、これを、CSSで作成した。本稿は、前稿の画像拡大縮小部分 … 続きを読む
4chan 等の画像付き掲示板で、画像（サムネイル）をクリックすると、同じ位置に拡大写真が表示され、回りこんでいたテキスト文が画像の下に表示されるのを見かけるが、これを、CSSで作成した。 サンプル 朝、雲海に浮かぶ … 続きを読む
スライドの上層でシャッターを閉じて開けるタイミングで、スライドを切り替えるタイプのスライドショーである。 シャッターは、div の枠線（border）で形成し、中の矩形部をサイズ０まで縮小することによりシャッターを閉じた … 続きを読む
スライドショーが進行する途中で、マウスオーバーで表示される送りボタン（＜（左） ＞（右））のクリックで、スライドをその方向に進行させるとともに、スライドショーの方向もクリックした方向に切り替えるタイプのスライダーである。 … 続きを読む
先に投稿した「ブラインド開閉型」では、ブラインド（短冊型矩形）が一方向（左から右）に順次閉じたり開いたりするタイプのものであったが、今回の投稿では、左から右に順次閉じ、次いで、右から左に順次開いていくタイプのものである … 続きを読む
画像が横に１０分割される大きさの矩形が順次FadeInして画面を覆って閉じ、次いで順次FadeOutして次の画面を開けるタイプのスライドショーで、ブラインドが開閉するようなタッチを出したつもりである。 サンプル 本 … 続きを読む