表示写真が、回転しながら縮小・拡大して写真を切り替えるタイプのスライドショーである。 各写真の、animation をずらして play させることによって写真の切り替えを行う。回転は、transform:rotate … 続きを読む
Monthly Archives: 3月 2014
全てのサムネイルを、同時にサイズを大きくしながら順次手前に移動させ、ステージを循環させる。 サムネイルのマウスオーバーでやや拡大、マウスクリックで拡大写真をステージいっぱいにフェイド・インさせるタイプの、フォトギャラリー … 続きを読む
タブとなるタイトルバーをクリックすると、ウインドウが開き、そのタイトルに該当する写真が現れる、いわゆるアコーディオン式のビューアーである。このサンプルでは、現れる写真をクリックすると、関連の写真集のページが開くようにし … 続きを読む
CoverFlow 型と同様、rotationY と perspective を使って、奥行きのある回転で複数枚数のスライドを移動させ、正面に来たスライドを鑑賞するタイプのスライドショーである。100 をスライド枚数で割 … 続きを読む
Cover Flow Type の Slide SHow である。以下に示すように、非常にシンプルなCSSのコードで、このようなスライドショーを作成できるとは。CSS animation もかなりのものである。ここでは、 … 続きを読む
このフォトギャラリーは、css の animation に加えて transform プロパティーを使って、サムネイルに角度をつけたり、回転させたりするビジュアル効果を加味したものである。写真は600*338pixのもの … 続きを読む
フェイドイン型フォトギャラリーを前稿で示したが、ここに示すサンプルは、写真が拡大しながらフェイド・インするタイプである。先に示したフェイドイン型は transition を使っている。この拡大が同時に起こる場合にも、フェ … 続きを読む
LightBox タイプのフォトギャラリーを、既に2つほど紹介したが、ここでは、画面のサイズに応じて表示写真の大きさが、最大サイズ以下の範囲で変化するものになっている。すなわち、フルHDの写真を使いたい場合や、小さな解像 … 続きを読む
LightBox タイプのフォトギャラリーを、既に2つほど紹介したが、ここでは、画面のサイズに応じて表示写真の大きさが、最大サイズ以下の範囲で変化するものになっている。すなわち、フルHDの写真を使いたい場合や、小さな解像 … 続きを読む