YouTubeにUPした「ホバーエフェクトを使ったバックグラウンドイメージの切り替え」について解説します。
前回の記事で紹介したホバーエフェクトを使って背景画像が入れ替わる動きのあるデザインを紹介します。
opacity(透明度)操作とクラスの付け替え
この動画では、ホバー時にopacity(透明度)を0.3から1にして今何を選択しているかを強調したり、背景画像を切り替えることで、ユーザーがリンク先のページのイメージを持ちやすいようなUXの高いデザインを紹介しています。 今回は浮世絵師を並べてその代表作を画面いっぱいの背景画像におくことで各々の世界観が画面いっぱいで伝わり、より強いインパクトを与えるようなデザインになっています。
例えばジムのサイトでコース別の一覧に使ったり、スタジオを運営しているならスタジオ別に並べて、特徴を一枚の絵で効果的に伝えることもできるかもしれません。比較的簡単で短いコードなので、色々なデザインに応用してみてください！
■opacityプロパティ
opacity : 透明度を指定できます。0で完全に透明になります。
■jqueryの.hover()でホバー時にクラスを付け加える
こちらの解説は以前記事で紹介しておりますので、そちらをご覧ください。
矢印「>」をCSSだけで作る方法。
リンクの後につける矢印って案外めんどくさいですよね。FontAwesomeを使うのも、一枚の絵を作って持ってくるのも少し手間がかかります。そこでCSSだけで簡単に作れちゃう矢印を紹介します。
<div class="arrow"></div>.arrow{
width: 10px;
height: 10px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(-45deg);
}HTMLに空のボックスを作ります。それにCSSで四角形を作って右と下の辺にボーダーを付けて、四角形を45度回転させたら出来上がりです！あとは位置調整や色、太さなどをお好みに設定して完成です。
最後に
今回は短めの解説になりましたが、触れていないところは過去記事で触れていたりするので、他の記事も読んでみてください！
動画をまだ見ていない方は是非チェックしてみてください！音声はBGMのみなので、再生速度を上げて流し見するのがおすすめです！
