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

Webページ作成
2019.12.27
スポンサーリンク

こんにちは朱夏です。

パララックスサイトのテンプレート作成、続けていきます。
今回はコンテンツエリア１にリンクカードを並べて、マウスホバーの動きを付けていきたいと思います。

コード

今回書いたコードはエリア１の部分に書いたものになります。
先ずはHTMLです。

      <!-- エリア１ -->
      <div class="background bg-01" id="area1">
         <h1 class="ml-5">リンクカード置き場</h1>
         <div class="row justify-content-around mx-0">

            <div class="card m-1" style="min-width: 300px; max-width: 500px;">
               <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>
            
            <div class="card m-1" style="min-width: 300px; max-width: 500px;">
               <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>
            
            <div class="card m-1" style="min-width: 300px; max-width: 500px;">
               <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>
            
            <div class="card m-1 card01" style="min-width: 300px; max-width: 500px;">
               <img class="card-img-top cardimg4" src="img/S__25821192.jpg" alt="住宅街">
               <div class="card-body bg-light">
                  <p class="card-text">住宅街の写真です。青空が綺麗だったので。</p>
                  <p class="card-text">■縦回転出現</p>
               </div>
            </div>
            
            <div class="card m-1" style="min-width: 300px; max-width: 500px;">
               <img class="card-img-top cardimg5" src="img/S__25821191.jpg" alt="近所">
               <div class="card-body bg-light">
                  <p class="card-text">とてもいい天気だった近所の写真です。</p>
                  <p class="card-text">■拡大+階調反転</p>
               </div>
            </div>
            
            <div class="card m-1" style="min-width: 300px; max-width: 500px;">
               <img class="card-img-top cardimg6" src="img/S__25821190.jpg" alt="大池山荘">
               <div class="card-body bg-light">
                  <p class="card-text">初登山のキャンプ地、大池山荘です。</p>
                  <p class="card-text">■拡大+ブラー</p>
               </div>
            </div>

         </div>
      </div>
      <!-- エリア１ END -->

 

CSSはリンクカードごとに書いたので結構な量になりました。

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

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

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

.cardimg2:hover {
    transform: scale(1.5);

}

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

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

.cardimg4 {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    /* transition: 0.5s; */
    /* transform: rotate3d(1,0,0,-90deg); */
}

.card01 > .cardimg4 {
    transition: 0.5s;
    transform: scale(1.2) rotate3d(0,1,0,-90deg);
}

.card01:hover > .cardimg4 {
    transform: scale(1.2) rotate3d(0,1,0,0deg);

}

.cardimg5 {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
    filter: invert(100%);
}

.cardimg5:hover {
    transform: scale(1.2);
    filter: invert(0%);
}

.cardimg6 {
    width: 500px;
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
    filter: blur(5px);
}

.cardimg6:hover {
    transform: scale(1.2);
    filter: blur(0);
}

.card {
    overflow: hidden;
    background-color: black;
}

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

 

解説

今回躓いたポイントは次の3つでした。

    • 画面サイズの切り替わりによるスタイルの変更(レスポンシブ)
    • マウスカーソルホバー時の画像がはみ出さないようにする処理
    • 回転出現させるときのホバー指定の方法

 

画面サイズの切り替わりによるスタイルの変更(レスポンシブ)

まず、HTML側のお話です。
HTMLで使用しているタグは基本となる<div>、<img>、<p>、<h1>くらいですが、画面の幅が変化した時の表示を調整するのに手間取りました。
慣れていないうちは、無理にBootstrapのグリッド機能を使おうとするより、自分で調整した方が早く問題が解決することがあるかもしれません。

 

ウスカーソルホバー時の画像がはみ出さないようにする処理

全体的なはみ出しは　overflow: hidden;　で解決しましたが、カード内の説明書きの部分に干渉するのがなかなか解決しませんでした。
最終的には、説明書きの部分を画像より手前に表示させることで解決しました。
z-index: 1;　を使っています。
これは、重なっている要素の順番を指定するためのもので、指定した数字が大きいほど画面手前に表示されるというものです。
CGイラスト描いてる人だとレイヤーだと思えばイメージしやすいかもしれません。

 

回転出現させるときのホバー指定の方法

次にCSSについてですが、マウスホバーの指定位置は、動作する要素の親でもOKです。
私は今回初めて知りました。

マウスホバーのエフェクトを付けている時に、X軸回転やY軸回転を実装すると、時々回転がぎこちなくなることがあって、何故なのかと色々調べていたら、どうも、ホバーしている要素が回転することにより、マウスカーソルの下から要素が外れてしまい、回転が止まってしまう現象が発生していたようです。

回転出現の初期状態は、画面に要素が表示されていない状態だったためホバーさせることが不可能という状態になっていました。

そこでたどり着いたのが、親要素にホバーを指定して、実際のスタイルは子要素を指定するといった方法です。

この部分のコードです。

.card01 > .cardimg4 {
    transition: 0.5s;
    transform: scale(1.2) rotate3d(0,1,0,-90deg);
}

.card01:hover > .cardimg4 {
    transform: scale(1.2) rotate3d(0,1,0,0deg);

}

 

親要素で指定したclass=”card01″を起点に元の状態を指定、.card01にホバーを指定して、その子要素に指定した.cardimg4のスタイルを変更するといった書き方になります。

ここにたどり着くのにかなり時間がかかりました。

 

あとがき

今回は、マウスホバー時のエフェクトを6つ実装してみました。
実際に動作しているイメージはこんな感じになります。

動画プレーヤー

 

こんな感じです。
基本的な効果は表現できているかなと思います。

どうやって表示させているのか古米階部分については、次回やっていきたいと思います。

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

 

スポンサーリンク
タイトルとURLをコピーしました