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

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

こんにちは朱夏です。

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

コード

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

 

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

 

解説

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

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

 

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

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

 

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

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

 

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

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

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

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

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

この部分のコードです。

 

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

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

 

あとがき

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

 

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

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

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

 

タイトルとURLをコピーしました