⑥GSAPによるカルーセルの実装
はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの６回目です。
以下、今回の内容となります。
- GSAPを使ったカルーセルの実装
- Intersection Observer（スクロール監視）によるイベントトリガー
- Animate.cssを使ったズームインアニメーション
今回は、GSAPを使用したスタイリッシュなカルーセルの実装方法を紹介します。GSAP（GreenSock Animation Platform）は、ウェブ開発者向けのJavaScriptアニメーションライブラリです。GreenSock社が開発しており、多機能でシンプルな記法で書けるため、アニメーションを実装する際におすすめです。
さらにIntersection Observerを活用し、スクロールに応じたイベントトリガーを設定。Animate.cssを使ったズームインアニメーションで魅力的なデザインを追加します。デモページもご覧いただき、カスタマイズのポイントや必要なライブラリのCDN、ソースコードの解説を通じて、カルーセルの魅力を探ってみましょう。最新のポストを引き立てるLatest Postsブロックに、ユーザーの好みに合わせた新たな魅力を与えましょう。
振り返り
はてなブログ無料版でトップページをカスタマイズする方法について、これまで以下の内容を紹介して参りました。
① 基本設定、見出しの装飾、コンタクトへのリンクボタン
② Animate.cssによるスライドアニメーションとホバー効果1
③ Animate.cssによるスライドアニメーションとホバー効果2
④ Flickityによるカルーセルスライダーの導入
⑤ Animate.cssを使ったフリップアニメーションとポートフォリオのディスプレイ
今回も引き続き、トップページのカスタマイズを紹介させていただきます。今回メインで紹介するのは、下記デモページにある見出し「Latest Posts」のブロックにあたります。
デモページ
今回のカスタマイズ
Latest Posts
カスタマイズのポイント
GSAPライブラリを利用して、滑らかな動きのカルーセルを実装しています。
GSAPの特徴
GSAPの特徴は次のとおりです。
- 軽量で多機能
- 直感的で扱いやすい
- パフォーマンス・機能性に優れている
- 実行性能が良好
- 互換性が高い
- 動きがスムーズで、アニメーションを自由度高く演出できる
画像クリックでカルーセルが回転し、マウスホバー時にはイメージの明度を下げています。さらにスクロールに応じたズームインアニメーション（animate__zoomInDown）にはIntersection ObserverとAnimate.cssライブラリを利用しています。
ライブラリのCDN
以下のCDNコードをheadなどに配置することによって、それぞれのライブラリが利用可能になります。CDNとは、Content Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。
GSAP
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.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>
jQueryはJavaScriptコードの簡素化に利用しています。
ソースコード
HTMLの構造
コードの解説
このHTMLコードは、スライダーとして機能する要素を記述しています。以下はコードの詳細な解説です：
スライダー全体の構造です。 各スライドは これらの矢印リンクには解説が開きます
<div class="slider">
<div class="slider-wrapper flex">
<!-- スライド要素が配置されるフレックスコンテナ -->
</div>
<div class="arrows">
<!-- 前後のスライドへ移動するための矢印リンク -->
<a class="arrow slider-link prev" href="#" title="Previous"></a>
<a class="arrow slider-link next" href="#" title="Next"></a>
</div>
</div>
.sliderがスライダーのコンテナであり、.slider-wrapperはスライド要素が配置されるフレックスコンテナです。また、.arrowsは前後のスライドへ移動するための矢印リンクが含まれています。
<div class="slide flex">
<div class="slide-image slider-link prev">
<!-- サムネイル画像と前のスライドへのリンク -->
</div>
<div class="slide-content">
<!-- スライドのコンテンツ部分 -->
<div class="slide-date">日付</div>
<div class="slide-title">タイトル</div>
<div class="slide-text">ディスクリプション</div>
<div class="slide-more">
<a href="ページへのＵＲＬ" target="_blank">READ MORE</a>
</div>
</div>
</div>
.slideクラスで示され、その中には.slide-image（サムネイル画像と前のスライドへのリンク）と.slide-content（日付、タイトル、ディスクリプション、Read More リンク）が含まれています。
<a class="arrow slider-link prev" href="#" title="Previous"></a><a class="arrow slider-link next" href="#" title="Next"></a>.arrowクラスと、スライドへのリンクを指定する.slider-linkクラスが含まれています。各リンクにはprevまたはnextクラスが指定され、これにより前後のスライドへの移動が制御されます。
これらの要素とクラスの組み合わせにより、シンプルながら柔軟なスライダーが構築されています。JavaScriptやCSSでのスタイリングおよび動作の設定により、これらの要素を操作します。
CSSスタイル
コードの解説
以下にCSSコードの解説を行います：
このCSSコードは、HTMLコードに適用されるスタイルシートで、特にスライダーとそのコンテンツのデザインに焦点を当てています。以下はコードの主な要素と解説です： 全体のスライダースタイル: スライダーの配置と余白: スライドとイメージのスタイル: オーバーレイのスタイル: スライドコンテンツのスタイル: 矢印のスタイル: レスポンシブデザイン:解説が開きます
.slider: スライダー全体のスタイルが指定されています。画面の幅全体に広がり、中央寄せされ、背景色は黒色、フォントはGoogleフォント「Roboto」が使用しています。
.slider-wrapper: スライダーのコンテンツを包むラッパーで、上に3em、下に4emの余白があり、画面左上からの位置は上方向に5vw、左方向に11vwずれています。
.slide-image: 各スライドのイメージ部分のスタイルを指定しています。幅と高さがそれぞれ12emで、内部の画像は全幅・全高に拡がるように設定されています。
.overlay-blue: オーバーレイ部分のスタイル。スライド上にかぶさり、ホバー時に背景色が変化し、カーソルがポインターに変わります。
.slide-content: スライドのテキストコンテンツ部分のスタイルが指定されています。幅が25emで、文字色は白色です。
.arrow: 前後のスライドに移動するための矢印のスタイルを指定しています。ホバー時に線の太さが変わり、矢印の向きを左右の方向に回転させています。
.slider-wrapperの左マージンがリセットされ、600px以下ではスライダーの配置が変更され（flex-direction: column）、450px以下ではテキストの最大幅が制限されます。
このスタイルシートは、スライダーとそのコンテンツに関する様々な要素を指定しており、デザインの調整や拡張が容易に行えるようになっています。
JavaScript
コードの解説
このJavaScriptコードは、GSAPとjQueryを使用して、スライダーにアニメーションとインターセクションオブザーバーを実装しています。以下にコードの主な要素と解説を示します：
スライダーが画面に表示されたかどうかの閾値（threshold）は、0（完全に隠れている状態）と0.5（50%以上表示されている状態）に設定されています。解説が開きます
animate__animatedとanimate__zoomInRightは、animate.cssライブラリのクラスで、要素にアニメーションを付与します。
animate.style$(document).ready(function() {
const $slider = $('.slider');
$slider.each(function(index, slider) {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
slider.classList.add('animate__animated', 'animate__zoomInRight');
observer.unobserve(slider);
}
});
}, { threshold: [0, .5] });
observer.observe(slider);
});
});
(function($) {
$(document).ready(function() {
// ... (前略)
btn.on('click', function(e) {
e.preventDefault();
if ($(this).hasClass('next')) {
(clickCount < (sCount - 1)) ? clickCount++ : clickCount = 0;
} else if ($(this).hasClass('prev')) {
(clickCount > 0) ? clickCount-- : (clickCount = sCount - 1);
}
TweenMax.to(sWrapper, .4, { x: '-' + (sWidth * clickCount) });
// ... (前略)
});
});
})(jQuery);
$('.overlay').addClass('overlay-blue');
このコードは、スライダーの要素が画面に表示されたときにアニメーションを付与し、また、前後のボタンと画像クリックによってスライドを制御できるようになっています。
おさらい
コードのまとめ
- GSAP CDN:
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.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サイトへ）
おわりに
以上、GSAPを使ったカルーセル、Intersection ObserverとAnimate.cssを使ったズームインアニメーションの実装について解説しました。これらのテクニックを取り入れることで、ブログやサイトのビジュアル体験を向上させ、読者との魅力的なインタラクションを築くことができます。
今後のブログ運営において、より魅力的でユーザーフレンドリーなページを作り上げる一助となれば幸いです。
次回も引き続き、トップページのカスタマイズを紹介します(^^♪
これまでの記事
はてなブログ無料版: トップページを魅力的にカスタマイズする方法
① 基本設定、見出しの装飾、コンタクトへのリンクボタン
② Animate.cssによるスライドアニメーションとホバー効果1
③ Animate.cssによるスライドアニメーションとホバー効果2
④ Flickityによるカルーセルスライダーの導入
⑤ Animate.cssを使ったフリップアニメーションとポートフォリオのディスプレイ
