CSSのtransitionプロパティでページネーションにホバー時のトランジション効果を実装する方法
ページネーション（ページ送り）のリンクにホバー時のトランジション効果を加えるには、CSSのtransitionプロパティを使用します。このプロパティを設定すると、マウスカーソルを重ねたときの背景色の変化が瞬時に切り替わるのではなく、指定した時間をかけて滑らかに変化するようになり、ユーザー体験が向上します。
実装のポイント
transitionプロパティで、変化させたいCSSプロパティ（例：background-color）とアニメーションの所要時間を指定します。:hover疑似クラスと組み合わせることで、マウスオーバー時のアニメーション効果を実現できます。:not(.active)セレクターを使うと、現在表示中のページ以外のリンクだけにホバー効果を適用できます。
サンプルコード
以下のコードを実行して、ページネーションにトランジション効果が追加される様子を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
border-radius: 5px;
transition: background-color 2s;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class = "demo">
<a href = "prev.html"><</a>
<a href = "quiz1.html">Quiz1</a>
<a href = "quiz2.html">Quiz2</a>
<a href = "quiz3.html">Quiz3</a>
<a href = "quiz4.html" class="active">Quiz4</a>
<a href = "next.html">></a>
</div>
</body>
</html>
コードの解説
この例では、.demo aセレクターに対してtransition: background-color 2s;を設定しています。そのため、リンクにマウスカーソルを重ねると、背景色が約2秒かけて黄色へと徐々に変化していきます。
また、.activeクラスが付いた現在のページ（Quiz4）はオレンジ色の背景と白い文字で強調表示され、:hover:not(.active)によってホバー効果の対象から除外されるため、意図しない色変化が起こりません。
transitionの時間を短くすれば反応が素早くなり、長くすればよりゆったりとした演出になります。0.3秒〜0.5秒程度に設定すると、多くのWebサイトで自然に見えるバランスの良い動きになります。
-
CSSだけで作る視差スクロール（パララックス）効果の実装方法
CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=
-
CSSでホバー時にトランジション（アニメーション）を追加する方法を解説
CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q