はてなブログ無料版: トップページを魅力的にカスタマイズする方法②

②Animate.cssによる
スライドアニメーションとホバー効果1

この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。

Intersection ObserverとAnimate.cssライブラリを駆使して、画像カードにスライドアニメーションを加え、マウスホバーでSNSボタンやメッセージを表示する仕組みも取り入れています。

さらに、Animate.cssの導入方法や基本的なHTML、CSS、JavaScriptの構造についても解説します。これをヒントにして、はてなブログのトップページをより魅力的にカスタマイズしましょう！

affordable design product — https://pixabay.com/users/geralt-9301/

振り返り
デモページ
今回のカスタマイズ
- Meet The Team
カスタマイズのポイント
- Animate.cssとは？
ライブラリのCDN
ソースコード
アレンジ
- アニメーションの遅延発火
おさらい
- コードのまとめ
  - CDN
  - ソースコード
おわりに

振り返り

前回の記事では、はてなブログ無料版でトップページをカスタマイズする方法について、主に基本的な設定部分を紹介しました。

rubirubi.hateblo.jp

今回も前回に引き続き、トップページのカスタマイズを紹介させていただきます。今回紹介するのは、下記にあるデモページの下方にある見出し「Meet The Team」セクションの部分です。

デモページ

デモページを見る

今回のカスタマイズ

Meet The Team

Our process on creating awesome projects.

Our web design team will spend time with our digital marketing team.

Charlotte Roberts

Writer

Our web design team will spend time with our digital marketing team.

Leslie Cheung

Designer

Our web design team will spend time with our digital marketing team.

John Marshall

Director

カスタマイズのポイント

Intersection Observer（交差検知）とAnimate.cssライブラリを利用して、画像カードをスクロールに応じてスライドアニメーションさせています。

また、画像カードをマウスホバーすると、SNSボタンやメッセージが表示される仕組みも装備されています。

Animate.cssとは？

Animate.cssは、事前に構築されたアニメーションをHTML要素に簡単に追加できる人気のCSSアニメーションライブラリです。フェードイン、スライド、回転など、さまざまなエフェクトを簡単に利用できます。

使用するには、Animate.cssのスタイルシートをプロジェクトに追加し、対象のHTML要素に適用するためのクラスを指定するだけです。アニメーションの種類や速さなどのオプションも簡単に指定できます。

animate.style

ライブラリの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>

Font Awesome

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

主にAnimate.cssはCSSアニメーション、jQueryはJavaScriptコードの簡素化、Font AwesomeはSNSアイコンの表示に利用しています。

ソースコード

HTMLの構造

コードはこちら（GitHubサイトへ）

コードの補足解説

<div class="about-tiles"> ~ <div>:
各ブロックを構成しています。
<img alt="代替テキスト" src="イメージ画像〇">:
メンバーなどの画像アドレスを指定します。
<p>ディスクリプション</p>:
画像の説明・紹介文などを記載。
<p class="team-title">個人名</p><span>タイトル</span>:
画像の人物名やタイトル等を記載。

CSSスタイル

コードはこちら（GitHubサイトへ）

コードの補足解説

ポイントとなるプロパティを補足解説しています：

解説が開きます

display: inline-block:
a要素をinline-blockに設定しています。inline-blockは行の内部に配置されながらも、高さと幅の指定が可能な要素です。通常のa要素はデフォルトでinlineですが、inline-blockに変更することで高さや幅を指定できるようになります。
background-color: transparent:
a要素の背景色を透明に設定しています。これにより、背景が透明になります。もし他のスタイルが規定されていた場合、透明にすることでそれをリセットすることができます。
box-sizing: border-box:
通常、HTML要素の幅や高さは、コンテンツのサイズにボーダーやパディングが加わったものとして計算されます。しかし、box-sizing: border-boxを使用すると、指定された幅や高さがボーダーとパディングを含んだ総計のサイズとして解釈されます。

具体的には、border-boxモデルでは、次のように各部分が計算されます：
- 要素の実際の幅 = 指定した幅（width）
- 要素の実際の高さ = 指定した高さ（height）
これにより、ボーダーやパディングを含めた総計のサイズが指定したサイズに一致し、レイアウトの予測性が向上します。

例えば、以下のようなスタイルがある場合、

.element {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px solid #000;
    box-sizing: border-box;
}

.element要素の実際の幅と高さは、ボーダーとパディングを含めてそれぞれ「100px」となります。デフォルトの場合（box-sizing: content-box）、これは「100px + 2 * 2px (border) + 2 * 10px (padding) = 124px」となります。

.team-img:hover .team-details、.team-img:hover .overlay
この2つは要素がホバー（マウスが要素上に重なったとき）した際、特定のスタイルを適用します。.team-img要素（画像）にマウスがホバーされた時、子要素である.team-detailsと.overlayに特定のスタイルを適用し、視覚的な変化やエフェクトを生み出します。ここでは、上にホバーすると画像の人物の詳細情報とオーバーレイ（暗幕）を表示します。

JavaScript

コードはこちら（GitHubサイトへ）

コードの解説

このコードは、Intersection Observerを使用して要素が画面内に表示されるときにアニメーションを適用するためのものです。具体的には、ページの読み込み完了時に.about-tilesもしくは#Contactを持つHTML要素がIntersection Observerで検知されると、その要素に動的にAnimate.cssクラスを追加します。

以下は主なポイントの解説です：

解説が開きます

1.ドキュメントの読み込み完了後の処理:

$(document).ready(function () {

ここでは、$(document).readyを使用して、HTMLドキュメントが完全に読み込まれた後に指定された関数が実行されるようにしています。これにより、他のスクリプトや要素が準備されてからこのスクリプトが実行されることが保証されます。

2.対象とする要素の指定:

const $elements = $('.top-banner1, .about-tiles');

$elementsは、jQueryを使用して.top-banner1と.about-tilesというクラスを持つ要素を選択します。これらの要素が後でIntersection Observerによって監視されます。

3.Intersection Observerの設定:

const observer = new IntersectionObserver(observerCallback, {
  threshold: [0, .5], // 要素がビューポートにどれだけ表示されているかの閾値
});

IntersectionObserverは、要素がビューポートとどれだけ交差しているかを監視するためのオブザーバーです。observerCallbackは、交差したときに呼び出されるコールバック関数です。thresholdは、要素がビューポートにどれだけ表示されているかを定義します。ここでは、0（完全に隠れている状態）と0.5（50%以上表示されている状態）の2つの閾値が指定されています。

4.Intersection Observerのコールバック関数:

const observerCallback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // ...
    }
  });
};

このコールバック関数は、IntersectionObserverによって監視されている要素がビューポートと交差したときに呼び出されます。entriesには、交差状態のエントリが含まれます。

5.要素ごとのアニメーションの追加:

if (entry.isIntersecting) {
  if (entry.target.classList.contains('about-tiles')) {
    // ...
  } else {
    // ...
  }
}

isIntersectingがtrueの場合、要素がビューポートと交差していることを示します。その後、要素のクラスに基づいて特定のアニメーションクラスが追加されます。

6.アニメーションの種類ごとの処理:

// Meet The Team
if ($(entry.target).is(':nth-child(1)')) {
  entry.target.classList.add('animate__slideInLeft');
} else if ($(entry.target).is(':nth-child(2)')) {
  entry.target.classList.add('animate__fadeInUp');
} else if ($(entry.target).is(':nth-child(3)')) {
  entry.target.classList.add('animate__slideInRight');

// Main Category, Contact
entry.target.classList.add('animate__animated', 'animate__bounceInLeft');
}

コールバック関数内で、要素が画面に表示されたときに子要素の序列に応じてクラスが追加されます。animate__animated + アニメーション名（'animate__slideInLeft'など）をクラスに指定することで、Animate.cssライブラリの機能が有効になります。

もしスライドの動きがちぐはぐな場合、:nth-child(…)内の数値を変えてみてください。

developer.mozilla.org

:nth-child() - CSS: カスケーディングスタイルシート | MDN

これにより、指定された要素が画面に表示されると、それぞれ異なるアニメーションが適用されます。

なお、コードにある「// Main Category, Contact」の部分は、前回の記事で紹介した見出し「Main Category」と「Contact」セクション部分に対するスライドインアニメーションです。

Main Contents, Contact

アレンジ

アニメーションの遅延発火

animate__delayプロパティは追加のオプションクラスで、指定することによりアニメーションを開始する時間を遅延させることができます。

デフォルトでは１秒間隔で１~５秒の遅延機能が用意されていますが、これに小数を掛けることにより、指定する時間のバリエーションが増やせます。

以下のコードでは、中心の画像カードに対してのみ（.about-tiles:nth-child(2)）、0.5秒の遅延を発生させています。

.about-tiles:nth-child(2).animate__animated.animate__fadeInUp {
    animation-delay: calc(var(--animate-delay) * .5);
}

このやり方は、下記のsontixyouさんのページを参考にさせていただきました。

Animate.CSSのアニメーションディレイ設定

おさらい

コードのまとめ

CDN

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>
Font Awesome: <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">