CSSでシャッターアニメーション

マウスオーバー時にシャッターのように別の要素が出てくるというデザインをCSSで作ってみたいと思います。

どんなものかというと、こちらのページで見つけました。

⇒Bang Dream!バンドリ

NEWSの欄にあるマウスオーバーするとピンク色の半透明要素が下りてくるというデザインです。

それでは、再現してみたいと思います。

サンプルコード

それでは、今回のコードを書いていきたいと思います。

1.HTML

 

2.CSS

 

サンプルページ

今回のコードのサンプルページはこちら

⇒サンプルページ

 

解説

今回のページ構造は、「windowクラス」という窓の向こうに画像と「shutterクラス」があり、窓枠よりはみ出てしまった「shutterクラス」は通常見えないが、カーソルを画像に当てたタイミングのみ下りてきて見えるようになるという風になっています。

解説画像

コードで解説します。

 

ここでは、枠となる「windowクラス」の大きさ等を決めています。

重要な点は、枠の外に出た要素を隠す「overflow:hidden;」です。

他の部分の数値等は自由に弄ってみても大丈夫です。

 

続いて、画像に対するスタイルを書き込みます。

ここで重要な点は「position:relative;」「z-index:101;」です。

その理由は下で解説します。

 

今回の要となる「shutterクラス」です。

まず重要な点は画像のスタイル解説と同じく、「position:relative;」「z-index:102;」です。

詳しくは調べてもらった方が早いのですが、「z-index」というのが重ね順を表し、

  • 下から101番目に画像
  • 下から102番目に「shutterクラス」

という風に決めることで、必ず「shutterクラス」の方が上に見えるようになります。

 

続いて「margin:-63vw 0 0;」です。

これは、画像要素が30vw、「shutterクラス」が33vwあるため、画像より上に「shutterクラス」を隠すために63vw上に「shutterクラス」を持ち上げている状態です。

 

そして最後は「transition: all 0.3s ease;」です。

同じような内容が4行に渡って書いてあるのは、ブラウザによって合わせていると考えてください。

これを簡単に説明すると、「シャッターが下がる時間は0.3秒にする」ということです。

 

最後にhoverです。

これは現在画像の上に持ち上げてある状態から、画像と重なる部分まで下げるようにmarginの値を変えているだけです。

「.window img:hover + .shutter」は画像の上にカーソルが乗った時にシャッターを下げる役割を、

「.shutter:hover」はシャッターが下がってからマウスオーバー中はシャッターが下がったままになるように止める役割を担っています。

 

以上が解説になります。是非、実践してみてください。

 

今回のブログ曲

今回の投稿中に聴いていた曲はこちら

カテゴリー: CSSWebデザイン

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です