トップ > ブログカスタマイズ > はてなブログ無料版: トップページを魅力的にカスタマイズする方法⑤
最終更新日

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

ブログカスタマイズ TOPページ はてなブログ Webデザイン ブログ管理

⑤Animate.cssを使ったフリップアニメーションと
ポートフォリオのディスプレイ

はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの５回目です。

以下、今回の主な内容となります。

  • Intersection Observer（スクロール監視）によるイベントトリガー
  • Animate.cssを使ったフリップアニメーション
  • ポートフォリオのディスプレイ

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

振り返り

これまで4度に渡り、はてなブログ無料版でトップページをカスタマイズする方法について紹介して参りました。

① 基本設定、見出しの装飾、コンタクトへのリンクボタン
② Animate.cssによるスライドアニメーションとホバー効果1
③ Animate.cssによるスライドアニメーションとホバー効果2
④ Flickityによるカルーセルスライダーの導入


今回も引き続き、トップページのカスタマイズを紹介させていただきます。今回メインで紹介するのは、下記デモページにある見出し「Our Portfolio.」のブロックにあたります。

デモページ

デモページを見る

今回のカスタマイズ

Our Portfolio.
A creative agency that believes in the power of creative ideas and great design.
brooklyn bridge
husband and wife unite
street umbrella photography
pancake catholic shrove tuesday
tourist process
leisure
found something under my shoes
athletics track floor

カスタマイズのポイント

スクロールに応じたフリップアニメーションにはIntersection ObserverとAnimate.cssライブラリを利用しています。

また、レスポンシブ対応のためブラウザ幅に応じて要素を2~4列に変化させています。

ライブラリの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はアニメーション、jQueryはJavaScriptコードの簡素化に利用しています。

ソースコード

HTMLの構造

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

コードのポイント

  1. <div id="content-wrapper">:
    • クラスが "content-wrapper" でidが指定されている<div>要素です。ここにコンテンツが包まれています。
  2. <!-- ここから1列目 -->から<!-- 1列目ここまで（4画像） -->:
    • 1列目の画像ブロックを示し、ブラウザ幅に応じて2~4の行列を構成します。各<div class="post-grid-item">内に、サムネイル画像へのリンクとその画像の説明が含まれています。
  3. <div style="clear: both;">:
    • float要素に対するクリアフィックスです。以降の要素が浮動要素の影響を受けないようします。

CSSスタイル

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

コードの解説

以下にCSSコードの解説を行います：

解説が開きます

  1. #content-wrapper:
    全体のコンテナスタイル

    • position: relative;: 相対位置指定を行います。
    • width: 1170px;: 幅を1170pxに指定
    • left: calc(-585px + 50%);: 全体の位置を中央寄せに

  2. .post-grid-item:
    画像ブロックのスタイル

    • width: calc(100%/4 - 15px);: 幅を親要素の1/4に指定。各要素の間に15pxのマージンがあります。
    • float: left;: 左寄せに要素を配置（float要素）
    • overflow: hidden;: マウスホバー時に画像が拡大したとき、枠をはみ出さないための指定

  3. .post-grid-item img:
    画像イメージのスタイル

    • display: block;: 画像をブロック要素として表示
    • aspect-ratio: 1;: 画像のアスペクト比を1:1に維持
    • margin: 0 auto;: 横方向に中央寄せ
    • transition: all .3s ease-in-out;: 全ての変化に対して0.3秒かけてイージングイン・アウトのトランジションを適用。（マウスホバー時の明度と拡大率の変化に、アニメーション効果を与えます）
    • filter: brightness(.8);: 画像の明るさを80%に指定

  4. .post-grid-item img:hover:
    マウスホバー時のスタイル

    • filter: brightness(1.1);: ホバー時の画像の明るさを110%に指定
    • scale: 1.1;: ホバー時に画像を1.1倍に拡大

  5. #blog-pager:
    ページャーのスタイル

    • float: right;: 右寄せに要素を配置（float要素）

  6. @media ルール:
    メディアクエリを使用して、特定の画面幅においてスタイルを変更します。それぞれのメディアクエリにおいて、要素の幅や配置などが変更されています。

このCSSコードは、レスポンシブデザインを実現するためにメディアクエリを活用し、ホバー時の効果やレイアウトを指定しています。

JavaScript

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

コードの解説

このJavaScriptコードは、jQueryを使用して、.post-grid-itemクラスの要素が画面に50%以上表示されたときに、その要素にanimate__animatedとanimate__flipInXのクラスを追加します。

具体的には、次の処理を行っています：

解説が開きます

  1. documentの読み込みが完了したら、.post-grid-itemクラスの要素をすべて取得します。
  2. 取得した要素を1つずつ処理します。
  3. IntersectionObserverオブジェクトを作成します。
  4. IntersectionObserverオブジェクトのobserve()メソッドを使用して、要素を監視対象にします。
  5. IntersectionObserverオブジェクトのintersectionchangeイベントが発生したら、要素にクラスを追加します。

IntersectionObserverオブジェクトは、要素の画面への重なり具合を監視するためのオブジェクトです。observe()メソッドを使用して、監視対象の要素を指定します。intersectionchangeイベントが発生すると、要素の画面への重なり具合が変化したことを通知されます。

以下に、各行の解説を記載します。

$(document).ready(function() {
 const $postgriditem = $('.post-grid-item');
  • $(document).ready(function() {...}：documentの読み込みが完了したら、指定された関数を実行します。
  • const $postgriditem = $('.post-grid-item');：.post-grid-itemクラスの要素をすべて取得します。
$postgriditem.each(function(index, postgriditem) {
  • $postgriditem.each(function(index, postgriditem) {...}：.post-grid-itemクラスの要素を1つずつ処理します。
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
  if (entry.isIntersecting) {
   postgriditem.classList.add('animate__animated', 'animate__flipInX');
  }
  });
});
  • const observer = new IntersectionObserver((entries, observer) => {...}：IntersectionObserverオブジェクトを作成します。
  • entries.forEach(entry => {...}：IntersectionObserverオブジェクトのintersectionchangeイベントが発生したときに実行される処理を記述します。
  • if (entry.isIntersecting) {...}：要素が指定した閾値以上画面に表示されたら、postgriditem.classList.add('animate__animated', 'animate__flipInX');を実行します。閾値の指定はthreshold属性で行っています。

animate__flipInXは、Animate.cssライブラリで定義されているアニメーションの種類で、要素をX軸を中心にフリップさせます。ここを変更することで、アニメーションの動きを変えることができます。

animate.style


observer.observe(postgriditem, { threshold: [0, .5] });

このコードでは、threshold属性を指定することで、要素が画面の何%表示されたらイベントをトリガーするかを指定しています。

  • observer.observe(postgriditem, { threshold: [0, .5] });：.post-grid-itemクラスの要素を監視対象にします。threshold属性は、要素が画面の何%表示されたらイベントをトリガーするかを指定できます。ここでは、0（完全に隠れている状態）と0.5（50%以上表示されている状態）の2つの閾値を指定しています。

おさらい

コードのまとめ

おわりに

以上、Intersection ObserverとAnimate.cssを使ったフリップアニメーションと、ポートフォリオのディスプレイについて解説しました。これらのテクニックを取り入れることで、ブログやサイトのビジュアル体験を向上させ、読者との魅力的なインタラクションを築くことができます。

今後のブログ運営において、より魅力的でユーザーフレンドリーなページを作り上げる一助となれば幸いです。

次回も引き続き、トップページのカスタマイズを紹介します(^^♪

これまでの記事

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

① 基本設定、見出しの装飾、コンタクトへのリンクボタン
② Animate.cssによるスライドアニメーションとホバー効果1
③ Animate.cssによるスライドアニメーションとホバー効果2
④ Flickityによるカルーセルスライダーの導入