8
複数の動画を、サムネイルクリックで切り替えるタイプのビデオギャラアリーである。 このサイトでは、CSSのみでギャラリーやスライドショーを作成するという趣旨で取り組んでいるが、今回作成する動画の場合は、切り替えた時に再生 … 続きを読む
tyosbb
先稿で円形ワイプ型のギャラリーを紹介したが、今回は、スライドショーの紹介である。下に示したサンプルは、円形スライドを円形ワイプで切り替えるタイプのスライドショーである。 別ページには、下のサンプルのスライドをクリック … 続きを読む
表現が難しいが、サンプルを見ていただければすぐお分りの通り、タイトル文字列にマウスオーバーすると、円形のサムネイルが360度ワイプされて出現するというもので、サムネイルクリックで写真がフェイドインするタイプのフォトギャ … 続きを読む
複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。 サムネイル群が、切換えボタンの位置から、表示位置まで舞い降りるアニメーションを付加 … 続きを読む
先に公開した同型のギャラリーは、枚数が増えるとその数だけラジオボタンを設置する必要があるなど、CSSの記述が煩雑になるので、このたびは、target疑似クラスを使ってその点を改良したのと、いくつかの記述上の工夫を加えた … 続きを読む
以前の投稿「スライダー（スライドショー＆ボタン送り）」のレスポンシブ対応型である。前稿の「スライダー/FadeIN・Out 型(レスポンシブ)」と同様、幅（width）を可変にして、height指定を排除した。さらに、 … 続きを読む
以前投稿した「スライダー（FadeIN・Out 型）」のレスポンシブ対応型である。 レスポンシブ対応とするために、ステージのwidth指定を、max-width としたり、スライドを格納している div の幅をスライ … 続きを読む
以前に投稿した「フェイドイン型フォトギャラリー」のレスポンシブ対応型である。 拡大写真の大きさが、画面サイズに対応して600px以下で縮小するようにした。 レスポンシブ対応フェイドイン型フォトギャラリーサンプル 本サ … 続きを読む
以前に示した「スライドイン・アウト型」をレスポンシブ対応にしたものである。 先の投稿、「フェイドイン・アウト型スライドショー（レスポンシブ）」に続くレスポンシブ対応スライドショーの第二弾である。 レスポンシブ対応スライド … 続きを読む
このサイトの閲覧者の方から、画面サイズに対応して画像が縮小する、いわゆるレスポンシブ型にできないものかとの質問を受けました。確かに最近ではスマホ対応にしないことには、一人前にあらずということですから、以前に投稿した「フ … 続きを読む