【Webサイト作成】パララックスサイトのテンプレートを作成　その５

こんにちは朱夏です。

パララックスサイトのテンプレート作成やっていきます。
前回実装したマウスホバーのエフェクトについて、ホバーの適用方法の改善と、各エフェクトの詳細を解説したいと思います。

作成したエフェクトは以下の6個です。

- 拡大+透過調整
- 拡大のみ
- 拡大+グレースケール
- 縦回転出現
- 拡大+階調反転
- 拡大+ブラー

拡大を使い過ぎているのは、やり過ぎな気はしています(^_^;)

最初に

先に共通で適用しているスタイルを解説します。

.card {
    min-width: 300px;
    max-width: 500px;
    overflow: hidden;
    background-color: black;
}

.card-body {
    z-index: 1;
}

まず、.cardは各リンクカードに指定しているclassで、各行で以下の指定をしています。

1. 最小横幅は300px
2. 最大横幅は500px
3. はみ出した部分は非表示
4. 背景色は黒

コードを日本語訳してみました。
日本語にすると何をしているのかすんなり解りますね。

次に、カードの説明文に指定しているclassについてです。

- 重なっている表示の階層1

これは数字が大きいほど手前に表示さます。
上空から見下ろしているイメージですね。

というわけで、これらのスタイルをカード6枚すべてに共通で適用しています。

拡大+透過調整

コードはこちらになります。
HTMLからです。

<div class="card m-1 card01">
   <img class="card-img-top cardimg1" src="img/S__25821187.jpg" alt="テント１号">
   <div class="card-body bg-light">
      <p class="card-text">テント１号。ドームタイプのテントです。対水圧が抜群で丈夫。強いて言うなら少し重い。</p>
      <p class="card-text">■拡大+透過調整</p>
   </div>
</div>

次にCSSです。

.card01 > .cardimg1 {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
    opacity: 0.6;
}

.card01:hover > .cardimg1 {
    transform: scale(1.2);
    opacity: 1;
}

1つ目なので、修正点を解説しておきます。
まず、HTML側で指定していたスタイルは共通スタイルに統合しました。
これにより、各コードが減り、共通部分のスタイルに手を加える時は1か所で済むようになりました。
次に、ホバーのトリガーを親要素に指定したclassに指定しました。
なぜこの様な指定が必要かというと、前回少し触れましたが、回転などの動的な動きをさせる場合、要素がマウスカーソルから逃げるような動きになる場合があるからです。

「解りづらいから直接指定すればいいじゃない」と最初は思っていましたが、物理的な物で考えると、動かす物とスイッチって分かれてるのが普通だよなぁと妙に納得しました。

それでは、中身を解説していきます。

CSSは通常モードとマウスホバーモードの2スタイルを用意しています。
先ず通常モードでは以下の状態です。

- 画像の最大横幅は500px
- 画像の縦幅は300px固定
- 縦横比が合わずはみ出したら中央合わせでトリミング
- 変化時間0.5秒
- 透過0.6

こんな感じです。
トリミングはかなり便利です。
通常画像のサイズは縦横比固定で、強引にサイズを指定すると、画像自体が歪んでしまいます。
しかし、object-fit: cover;でトリミングすれば、縦横比は崩さず、中央を支点にして、はみ出している部分はトリミングしてくれます。

そして、初期状態で透過を指定しています。
指定方法は1(透過なし)～0(完全透過)の間で指定することになります。
初期状態でちょっと暗くなっているのは、背景に黒を指定しているからです。
背景色を変えるだけで、視覚効果の雰囲気を変化させる事が出来るので使い勝手は良さそうです。

変化時間とは、ホバー状態に変化するまでにかかる時間です。
これを指定していないと一瞬で状態が切り替わってしまうのであまり視覚効果を得られないかもしれません。

次に、ホバー時のスタイルについてはこんな感じです。

- 要素1.2倍の大きさに変化
- 透過なし

この二つの状態を、変化時間で指定した0.5秒かけて動きます。

拡大のみ

こちらもコードを置いておきます。

<div class="card m-1 card02">
   <img class="card-img-top cardimg2" src="img/S__25821193.jpg" alt="テント２号">
   <div class="card-body bg-light">
      <p class="card-text">テント２号、ワンポールタイプのテントです。天井も高くてタープとの相性が良いが、背が高く設営や撤去に手間取る。</p>
      <p class="card-text">■拡大のみ</p>
   </div>
</div>

CSSはこちらです。

.card02 > .cardimg2 {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.7s;
}

.card02:hover > .cardimg2 {
    transform: scale(1.5);
}

スタンダードな拡大のみのエフェクトです。
他と違い、拡大のみなので、変化時間と拡大の大きさを1.5倍にしています。
それ以外は1つ目の拡大と同じなので、特に説明することは無いかと思います。

拡大+グレースケール

最初にコードをどうぞ。

<div class="card m-1 card03">
   <img class="card-img-top cardimg3" src="img/S__25821188.jpg" alt="テント３号">
   <div class="card-body bg-light">
      <p class="card-text">テント３号。完全自立型で前室が付いてます。軽くてコンパクトだけど生地が薄い。</p>
      <p class="card-text">■拡大+グレースケール</p>
   </div>
</div>

CSSです。

.card03 > .cardimg3 {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
    filter: grayscale(1);
}

.card03:hover > .cardimg3 {
    transform: scale(1.2);
    filter: grayscale(0);
}

拡大部分以外の説明をしていきたいと思います。

通常状態：グレースケール1(有効)
ホバー状態：グレースケイル0(無効)

ここだけです。
グレースケールを指定してるfilterには、他にも色々な視覚効果がありますので、色々試してみるのもいいと思います。

あとがき

長くなりそうなので、前半の3つを説明しました。
後半で残り3つの解説をしたいと思います。

今回はここまでです。
次回もよろしくお願いします。