スライドショー
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
スライドショー
今回は複数の画像やコンテンツをまとめて見せるスライドショーを作りました。 ヘッダー画像で使うと第一印象をガラッと変えられます。
おさえておきたいところ
スライドショーを使う目的と使いどころはこんな感じです。
目的：複数の画像やコンテンツをまとめて見せる
使いどころ：画面の読み込み中 / クリック
横移動させて全画面で見せる
CSSだけで画像をトリミング 「object-fit」
画像の縦横比を維持したまま埋めたい時は、object-fit: cover; を使います。 画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、はみ出した部分はトリミングされます。 ※もっと詳しく知りたい場合は上の「object-fit」リンクからMDNにアクセスしてください
画像を任意の位置でトリミング「object-position」
object-fit: cover; で画像の縦横比を保持したまま画像の中央でトリミングして表示できるようになりましたが、毎回画像の中央にフォーカスしたいとは限りませんね。 中央以外の位置でトリミングしたい時は object-position プロパティーを設定しましょう。 左上を基準にして、object-position: 横の位置 縦の位置; を記述すればOK。 ※もっと詳しく知りたい場合は上の「object-position」リンクからMDNにアクセスしてください
フェードイン・アウトさせて全画面で見せる
全画面でゆっくりズームアウトさせる
動きを組み合わせて全画面で見せる
複数画像を並列に見せる
複数画像を中央に注目させて見せる
複数画像を流して見せる
2つの画像の動きを対比させて見せる
次回の予定
画像やコンテンツの一覧を俯瞰して見せるギャラリーを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／
