③Animate.cssによる
スライドアニメーションとホバー効果2
この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。Intersection Observer(交差検知)とAnimate.cssライブラリを使って、オススメ記事やページへのリンク画像にスクロールに応じたスライドアニメーションを付与します。
HTML、CSS、JavaScriptのコーディングについては丁寧な解説を心掛けました。本記事が、ブログやサイトをより魅力的にするカスタマイズのヒントとなれば幸いです。
振り返り
前回、前々回の記事では、はてなブログ無料版でトップページをカスタマイズする方法について、主に基本的な設定部分と画像カードへのスライドやホバーアニメーションの実装方法などを紹介しました。
今回も引き続き、トップページのカスタマイズを紹介させていただきます。今回紹介するのは、オススメ記事やページへのバナー部分のカスタマイズです。下記にあるデモページ内では見出し「
」、「 」のブロックにあたります。デモページ
今回のカスタマイズ
Recommended
Leisurely Enjoy.
カスタマイズのポイント
前回の記事で紹介した「Meet The Team」セクションと同様、 と ライブラリを利用して、要素(記事ページへのリンクバナー)をスクロールに応じてスライドアニメーションさせています。
またバナーへのマウスホバー時に、画像の明度やスケールがスムーズに変化するアニメーション効果も実装しています。
「Animate.cssとは?」はてなブログ無料版: トップページを魅力的にカスタマイズする方法② - hatebcustom
ライブラリのCDN
以下のCDNコードをheadなどに配置することによって、それぞれのライブラリが利用可能になります。CDNとは、Content Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。
Animate.css
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
jQuery
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
主にAnimate.cssはCSSアニメーション、jQueryはJavaScriptコードの簡素化に利用しています。
ソースコード
HTMLの構造
- 構造としては、大きく「Recommended」と「Leisurely Enjoy.」という2つのセクションに分かれています。
- Recommendedセクション内はさらに
top-banner4
とtop-banner3
というクラスを持つ3つのブロックに分かれており、リンク付きサムネ画像を内包します。 - Leisurely Enjoy.セクション内には
top-banner2
というクラスを持つブロックが1つあり、同様にリンク付きサムネ画像を内包します。 top-banner3
ブロックでは画像にテキストが無いケースを想定し、「figcaption」に記述したテキストを画像中央に記事タイトルとして表示させています。- 自身のサイトに組み込む場合は、コード内の「ページへのURL」や「サムネ画像のURL」の部分を、適切なものに差し替えて下さい。
- また要素を増減したい場合は、 下記の構成をコーディングの参考として下さい。例えば、ブロックを増やすなら<ul>タグで囲んだひと固まり、記事を増やすなら<li>タグで囲んだひと固まりを複製します。
<!-- ブロック① --> <ul class="top-banner"> <!-- 記事① --> <li> <a href="ページへのURL"> <img src="サムネ画像のURL"> </a> </li> <!-- 記事② --> <li> <a href="ページへのURL"> <img src="サムネ画像のURL"> </a> </li> </ul> <!-- ブロック② --> …
CSSスタイル
コードの解説
下記に、ポイントとなるプロパティを、各スタイルごとにコード内表記で解説しています:
各リスト幅を全体の半分にして10pxマイナスし、アスペクト比を「1.454 : 1」に設定 各リスト幅を全体の半分にして10pxマイナスし、アスペクト比を「1.777 : 1」に設定 「 「 上記したfigureタグとfigcaptionタグに対するスタイルは、解説が開きます
/* 1: 各ブロック用スタイル */
ul.top-banner2, ul.top-banner3, ul.top-banner4 {
/* 中略 */
list-style: none;
display: flex;
justify-content: space-between;
/* デフォルトのリストスタイルの削除(リスト前のmarkerを消す)、flexコンテナの作成など */
}
/* 均等配置 */
justify-content: space-between; /* 各アイテムを均等に配置し
最初のアイテムは先頭に寄せ、
最後のアイテムは末尾に寄せる */
/* 2: top-banner2内のリストスタイル */
.top-banner2 li {
width: calc(100%/2 - 10px);
/* 中略 */
padding-bottom: calc(100% / (2 * 1.454));
}
/* 3: top-banner3およびtop-banner4内のリストスタイル */
.top-banner3 li, .top-banner4 li {
width: calc(100%/ 2 - 10px);
/* 中略 */
padding-bottom: calc(100% / (2 * 1.777));
}
/* 4: top-banner2およびtop-banner4内の画像のスタイル */
.top-banner2 img, .top-banner4 img {
/* 中略 */
transition: transform .3s ease-in-out; /* ホバー時のアニメーションを設定 */
filter: brightness(.9); /* 明度を90%に下げる */
}
/* 5: 画像のホバーエフェクト */
.top-banner4 :hover img, .top-banner3 :hover img, .top-banner2 :hover img {
transform: scale(1.03); /* スケールを少し大きく */
filter: brightness(1.1); /* 明度を110%に上げる */
}
/* 6: mceNonEditableクラスを持つfigureのスタイル */
figure.mceNonEditable {
display: contents;
/* figureのコンテンツを親要素と同じように表示する */
}
display: contents
は指定したタグのボックスを生成しない」/* 7: mceEditableクラスを持つfigcaptionのスタイル */
figcaption.mceEditable {
/* 中略 */
word-break: auto-phrase; /* 日本語テキストを分節に応じて自動改行 */
}
word-break: auto-phrase
は、日本語テキストで分節に応じた自動改行ができるCSSプロパティ値」top-banner3
ブロックでの、テキストを画像中央に記事タイトルとして表示させるためのものです。/* 8: 550pxまでの画面に対するメディアクエリ */
@media (max-width: 550px) {
/* 中略 */
}
JavaScript
コードの解説
このJavaScriptコードは、ページが読み込まれたときにアニメーションをトリガーするためのものです。具体的には、ページの読み込み完了時にtop-banner
クラスを持つ各HTML要素がIntersection Observerで検知されると、その要素に動的にAnimate.cssクラスを追加します。
以下はコードの詳細解説です:
解説: コールバック関数内:解説が開きます
$(document).ready(function() {
// 対象となるバナー要素を選択
const $banners = $('.top-banner4, .top-banner4.hai, .top-banner3, .top-banner2');
// 各バナーに対してIntersectionObserverを適用
$banners.each(function(index, banner) {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// バナーが画面と交差した場合
if (entry.isIntersecting) {
// animate.cssのクラスを追加してアニメーションを開始
banner.classList.add('animate__animated', 'animate__bounceIn');
// 特定のバナーに応じて追加のアニメーションクラスを追加
if (banner.classList.contains('top-banner4')) {
banner.classList.add('animate__bounceInLeft');
} else {
banner.classList.add('animate__bounceInRight');
}
// 一度アニメーションが始まったらObserverを解除
observer.unobserve(banner);
}
});
}, { threshold: [0, .5] }); // 画面に表示されている割合が0または50%以上の場合にコールバックを実行
// Observerをバナーに適用
observer.observe(banner);
});
});
$(document).ready(function() { ... });
: ページが完全に読み込まれたときに実行されるjQueryのドキュメント準備完了のコード。const $banners = $('.top-banner4, .top-banner4.hai, .top-banner3, .top-banner2');
: 対象となるバナー要素をjQueryで選択し、それらを$banners
として保存。$banners.each(function(index, banner) { ... });
: 各バナーに対してjQueryのeach
メソッドを使用して繰り返し処理を実行。const observer = new IntersectionObserver((entries, observer) => { ... }, { threshold: [0, .5] });
: IntersectionObserverを作成。このObserverは要素が画面と交差した際にコールバックを実行する役割を果たす。threshold
パラメータはコールバックが発火する閾値を設定しており、ここでは0%と50%以上の二つの閾値が設定されている。observer.observe(banner);
: IntersectionObserverを対象のバナーに適用して監視を開始。
entries.forEach(entry => { ... });
: Observerが監視している各エントリーに対して処理を実行。if (entry.isIntersecting) { ... }
: エントリーが画面と交差している場合に処理を実行。banner.classList.add('animate__animated', 'animate__bounceIn');
: animate.cssのアニメーションクラスを追加し、要素をアニメーションさせる。if (banner.classList.contains('top-banner4')) { ... }
: 特定のバナーに応じて追加のアニメーションクラスを追加。observer.unobserve(banner);
: アニメーションが始まったらObserverを解除する。それにより、同じバナーに対してはアニメーションが1度だけ実行される。
これにより、ユーザーのスクロールに応じて指定された要素が画面に表示されるごとに、順次スライドインアニメーションが適用されていきます。
アレンジ
アニメーションの速度調整
--animate-duration
プロパティで秒数を指定することにより、アニメーションの持続時間を変更できます。
.animate__animated.animate__bounceIn { --animate-duration: 2s; }
「CSS Custom Properties (CSS Variables)」Animate.css | A cross-browser library of CSS animations.
おさらい
コードのまとめ
- Animate.css CDN:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
- jQuery CDN:
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
- HTML: (GitHubサイトへ)
- CSS: (GitHubサイトへ)
- JavaScript: (GitHubサイトへ)
おわりに
前回同様、引き続きトップページのカスタマイズを紹介させていただきました。
今後のブログ運営において、より魅力的でユーザーフレンドリーなページを作り上げる一助となれば幸いです。
次回も引き続き、トップページのカスタマイズを紹介します(^^♪