返信
スライドを縦方向に分割した（ここでは8分割）画像の各々が、拡大移動しながら連続して登場し、最終的にはステージに本来の画像を表示するというタイプのスライドショーである。 画像を分割するには、fireworksなどの定番 … 続きを読む
カテゴリーアーカイブ: スライドショー
全スライド枚数で等分したスライス画像（このデモではスライド枚数が5枚なので、5等分した画像）を、一枚分のスライドになるように水平に並べ、これを、スライドの切り替え時に表示するタイプのスライドショーである。文章で読むとよ … 続きを読む
サムネイル画像が連なって円運動している状態で、水平になったサムネイル画像を拡大して、表示枠いっぱいに表示させるタイプのスライドショーである。 このサンプルでは、幅600pixの写真を表示させているが、他のサイズの写真をそ … 続きを読む
このサイトの閲覧者の方から、画面サイズに対応して画像が縮小する、いわゆるレスポンシブ型にできないものかとの質問を受けました。確かに最近ではスマホ対応にしないことには、一人前にあらずということですから、以前に投稿した「フ … 続きを読む
フルスクリーンのスライドショーの作成である。画面全体を写真で覆い尽くす設定として、background-size:cover; を用いた。ユーザーの表示画面の縦横比が如何様になっても、空白ができたり、タイル状になったり … 続きを読む
スライドの上層でシャッターを閉じて開けるタイミングで、スライドを切り替えるタイプのスライドショーである。 シャッターは、div の枠線（border）で形成し、中の矩形部をサイズ０まで縮小することによりシャッターを閉じた … 続きを読む
先に投稿した「ブラインド開閉型」では、ブラインド（短冊型矩形）が一方向（左から右）に順次閉じたり開いたりするタイプのものであったが、今回の投稿では、左から右に順次閉じ、次いで、右から左に順次開いていくタイプのものである … 続きを読む
画像が横に１０分割される大きさの矩形が順次FadeInして画面を覆って閉じ、次いで順次FadeOutして次の画面を開けるタイプのスライドショーで、ブラインドが開閉するようなタッチを出したつもりである。 サンプル 本 … 続きを読む
先に記述したフェイドイン・アウト型スライドショーで、各スライドごとに、流れる説明文（テロップ）を挿入したものである。 サンプル 朝焼けの針ノ木岳 針ノ木岳、スバリ岳を背に岩小屋沢岳への登り 剣岳を真近に望む 鹿島槍ヶ岳、 … 続きを読む
表示画像が、skew、rotate、scaleで変形した後、stage（表示枠）外に移動退場するタイプのスライドショーである。 サンプル 本サンプル表示用HTML 本サンプル表示用CSS CSSのスポット解説 ・このサン … 続きを読む