17
先に記述したフェイドイン・アウト型スライドショーで、各スライドごとに、流れる説明文（テロップ）を挿入したものである。 サンプル 朝焼けの針ノ木岳 針ノ木岳、スバリ岳を背に岩小屋沢岳への登り 剣岳を真近に望む 鹿島槍ヶ岳、 … 続きを読む
スライドが水平方向に移動するタイプのスライドショーで、マウスオーバーで出現する左右への送りボタンで一枚ずつのコマ送りも可能にしたもの、いわゆるスライダーの作成である。 サンプル ＜ ＞ ＜ ＞ ＜ ＞ ＜ ＞ ＜ ＞ 表 … 続きを読む
表示画像が、skew、rotate、scaleで変形した後、stage（表示枠）外に移動退場するタイプのスライドショーである。 サンプル 本サンプル表示用HTML 本サンプル表示用CSS CSSのスポット解説 ・このサン … 続きを読む
サムネイルをMetro画面風のタイルの裏に配置しておき、マウスオーバーで回転しながら登場し、そのクリックで拡大写真が表示されるタイプのフォトギャラリーである。ここでは写真表示用となっているが、ナビゲーションにも使えるし … 続きを読む
表示写真が、遠近回転しながら縮小・拡大して写真を切り替えるタイプのスライドショーである。 各写真の、animation をずらして play させることによって写真の切り替えを行う。遠近は、transform:persp … 続きを読む
表示写真が、回転しながら縮小・拡大して写真を切り替えるタイプのスライドショーである。 各写真の、animation をずらして play させることによって写真の切り替えを行う。回転は、transform:rotate … 続きを読む
全てのサムネイルを、同時にサイズを大きくしながら順次手前に移動させ、ステージを循環させる。 サムネイルのマウスオーバーでやや拡大、マウスクリックで拡大写真をステージいっぱいにフェイド・インさせるタイプの、フォトギャラリー … 続きを読む
タブとなるタイトルバーをクリックすると、ウインドウが開き、そのタイトルに該当する写真が現れる、いわゆるアコーディオン式のビューアーである。このサンプルでは、現れる写真をクリックすると、関連の写真集のページが開くようにし … 続きを読む
CoverFlow 型と同様、rotationY と perspective を使って、奥行きのある回転で複数枚数のスライドを移動させ、正面に来たスライドを鑑賞するタイプのスライドショーである。100 をスライド枚数で割 … 続きを読む
Cover Flow Type の Slide SHow である。以下に示すように、非常にシンプルなCSSのコードで、このようなスライドショーを作成できるとは。CSS animation もかなりのものである。ここでは、 … 続きを読む