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

- Meet Sophia, the technical virtuoso weaving digital dreams into reality. As a Freelance Web Developer, she brings a keen eye for detail and a passion for seamless user experiences to our collaborative canvas.

Sophia Jones, Freelance Web Developer

- Introducing Emily, our Front-End maestro transforming visions into captivating interfaces. With her adept skills in code and design, she adds the aesthetic touch that elevates our projects to the pinnacle of visual allure.

Emily Waltz, Front-End Developer

- At the helm is Michael, the driving force as CEO of Cubix. His strategic vision and leadership steer our partnership towards groundbreaking ventures. With a wealth of experience, he shapes the narrative of our journey toward creative excellence.

Michael Smith, CEO of Cubix

カスタマイズのポイント

カルーセルスライダーの実装にはFlickityライブラリを利用しています。

flickity.metafizzy.co

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

ライブラリのCDN

以下のCDNコードをheadなどに配置することによって、それぞれのライブラリが利用可能になります。CDNとは、Content Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。

Flickity v2

<script src="//npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>

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>

主にFlickityとAnimate.cssはアニメーション、jQueryはJavaScriptコードの簡素化に利用しています。

ソースコード

HTMLの構造

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

Flickityライブラリを使って、要素をスライドショーとして表示するためのHTML構成です。

コードのポイント

data-flickity属性:
Flickityライブラリの設定を指定するために使用されます。
- "autoPlay": 5000: 秒間隔の自動スクロール
- "wrapAround": true: 無限スクロール

flickity.metafizzy.co

コードの解説

このJavaScriptコードは、.carouselクラスの要素が画面に表示されたとき、その要素に新たなクラス（animate__）を動的に追加します。

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

解説が開きます

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

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

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

$(document).ready(function() {
 const $carousel = $('.carousel');

$(document).ready(function() {...}:
documentの読み込みが完了したら、指定された関数を実行します。
const $carousel = $('.carousel');:
.carouselクラスの要素をすべて取得します。

$carousel.each(function(index, carousel) {

$carousel.each(function(index, carousel) {...}:
.carouselクラスの要素を1つずつ処理します。

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
  if (entry.isIntersecting) {
   carousel.classList.add('animate__animated', 'animate__zoomInUp');
  }
  });
});

const observer = new IntersectionObserver((entries, observer) => {...}:
IntersectionObserverオブジェクトを作成します。
entries.forEach(entry => {...}:
IntersectionObserverオブジェクトのintersectionchangeイベントが発生したときに実行される処理を記述します。
if (entry.isIntersecting) {...}:
要素が画面に指定した閾値以上表示されたら、carousel.classList.add('animate__animated', 'animate__zoomInUp');を実行します。閾値の指定はthreshold属性で行っています。

animate__zoomInUpは、Animate.cssライブラリで定義されているアニメーションの種類です。ここを変更することで、アニメーションの動きを変えることができます。

animate.style

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

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

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

アレンジ

オプション指定

data-flickity属性のオプション指定を追加・変更することにより、スライドアニメーションの動作にバリエーションを持たせることができます。オプションを複数指定するときは、,（カンマ）で繋ぎます。

"autoPlay": 1500: 自動スクロールの間隔を変更します。（この場合、1.5秒おき）
"wrapAround": true: 自動スクロールを無限ループします。
"draggable": false: マウスドラッグを不可能にします。（デフォルトはtrue）

<div class="carousel" data-flickity='{ "autoPlay": 1500, "wrapAround": true, "draggable": false }'>

flickity.metafizzy.co

おさらい

コードのまとめ

Flickity v2 CDN: <script src="//npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
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サイトへ）

おわりに

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

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

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