近年、ウェブデザインにおいて動きやインタラクティブな要素を取り入れることが増えています。
今回は、GSAP(GreenSock Animation Platform)を使用して、ウェブページに様々なインタラクティブな要素を追加する方法をサンプルを用いて紹介させていただきます!
See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
![](https://i0.wp.com/kmnmc.com/wp-content/uploads/2024/07/0705-01.jpg?resize=1024%2C554&ssl=1)
使用する技術とライブラリ
- GSAP: ウェブアニメーションのための強力なJavaScriptライブラリ。
- ScrollTrigger: GSAPのプラグインで、スクロールに応じたアニメーションを制御するために使用します。
コードの紹介と説明
ざっくりとですが、各セッショのコードを紹介します。
時に難しいことはしていないので、どのサイトでも対応出来ると思います。
セクション A, C, D:
メインコンテンツとサイドバーのHTML
<section class="section" id="sectionA">
<div class="main-content">
<h2>Main Content of Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<!-- コンテンツ省略 -->
</div>
<div class="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<!-- コンテンツ省略 -->
</div>
</section>
<!-- セクション C, D も同様の構造で記述 -->
メインコンテンツとサイドバーのCSS
/* 各セクションの基本スタイル */
.section {
padding: 20px;
border-bottom: 1px solid #ccc;
}
/* サイドバーの共通スタイル */
.sidebar {
flex: 1;
padding: 20px;
background-color: #e9e9e9;
border-left: 1px solid #ccc;
position: sticky;
top: 20px; /* ヘッダーとの距離 */
align-self: flex-start; /* 上端に固定 */
height: fit-content; /* コンテンツに合わせて高さを調整 */
}
/* サイドバーの見出しスタイル */
.sidebar h3 {
font-size: 18px;
margin-bottom: 10px;
}
/* メインコンテンツの共通スタイル */
.main-content {
flex: 3;
padding: 20px;
background-color: #f9f9f9;
height: 200vh; /* 高さを200vhに設定 */
}
/* メインコンテンツの見出しスタイル */
.main-content h2 {
font-size: 24px;
margin-bottom: 15px;
}
/* メインコンテンツの段落スタイル */
.main-content p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 10px;
}
解説ポイント
- セクション構造: 各セクションには
section
クラスが適用され、その中にmain-content
(メインコンテンツ)とsidebar
(サイドバー)が配置されています。 - フレックスボックスを利用したレイアウト: メインコンテンツとサイドバーは
display: flex
を使用して横並びに配置され、それぞれの幅を調整しています。 - サイドバーの固定位置: 「
position: sticky」
と 「top: 20px
」 を使用して、サイドバーをページの上端に固定しています。 - 背景色と余白の設定: メインコンテンツとサイドバーには異なる背景色が設定され、適切な余白とパディングが与えられています。
セクション B
セクション B は、横にスクロールするコンテンツを表示するために、GSAP(GreenSock Animation Platform)ライブラリを利用しています。このアニメーションライブラリは、豊富なアニメーション効果とシームレスなスクロール制御を提供し、ウェブサイトのインタラクティブ性を向上させます。
横にスクロールするセクションのHTML
<section class="section" id="sectionB">
<h2>横にスクロールするセクション</h2>
<div class="horizontal-scroll">
<div class="scroll-item">Item 1</div>
<div class="scroll-item">Item 2</div>
<div class="scroll-item">Item 3</div>
<div class="scroll-item">Item 4</div>
<div class="scroll-item">Item 5</div>
<div class="scroll-item">Item 6</div>
</div>
</section>
横にスクロールするセクションのCSS
#sectionB {
height: 100vh; /* 画面の高さいっぱいにセクションを表示 */
overflow-x: auto; /* 横方向のスクロールを許可 */
white-space: nowrap; /* 子要素が横並びになるように設定 */
}
.horizontal-scroll {
display: flex; /* アイテムを横に並べるための flexbox */
}
.scroll-item {
flex: 0 0 600px; /* 各アイテムの幅を固定 */
height: 600px; /* アイテムの高さを設定 */
background-color: #ddd; /* アイテムの背景色 */
border: 1px solid #ccc; /* アイテムの境界線 */
margin-right: 10px; /* アイテム間の間隔 */
text-align: center; /* アイテム内のテキストを中央揃え */
line-height: 600px; /* アイテム内のテキストの垂直中央揃え */
}
解説ポイント
overflow-x: auto
: セクション B にはoverflow-x: auto
スタイルが適用されています。これにより、要素が横方向にはみ出した場合にスクロールバーが表示され、ユーザーがスクロールできるようになります。white-space: nowrap
:.horizontal-scroll
内の子要素(.scroll-item
)が横に並ぶように設定されています。これにより、各アイテムが横一列に並びます。- Flexbox の利用:
.horizontal-scroll
はdisplay: flex
を使用しており、子要素である.scroll-item
は横に並べられています。これにより、アイテムの横並びが可能になります。 - 各
.scroll-item
のスタイル: 各アイテムには固定の幅 (600px
) と高さ (600px
)、背景色、境界線、余白などが設定されています。これにより、横スクロール時にアイテムがどのように表示されるかが制御されます。
横にスクロールするセクションのGSAP
// GSAPのScrollTriggerプラグインを登録
gsap.registerPlugin(ScrollTrigger);
// 横スクロールアニメーション
gsap.to(".horizontal-scroll", {
x: () => -(document.querySelector(".horizontal-scroll").scrollWidth - window.innerWidth) + "px",
ease: "none",
scrollTrigger: {
trigger: "#sectionB",
start: "top top",
end: () => "+=" + document.querySelector(".horizontal-scroll").scrollWidth,
scrub: true,
pin: true,
anticipatePin: 1
}
});
このコードでは、gsap.to()
メソッドを使用して .horizontal-scroll
要素を横にスクロールさせています。
ScrollTriggerプラグインの scrollTrigger
オプションを設定して、trigger
要素(#sectionB
)が画面内に入ったときにアニメーションが開始されるようにしています。
セクション Contact: お問い合わせセクション
このセクションは、ユーザーが問い合わせを行うための特別なセクションです。背景のアニメーションやボタンのインタラクションを含むこのセクションは、視覚的に魅力的であり、ユーザーエクスペリエンスを向上させます。
お問い合わせセクションのHTML
<section id="sectionContact">
<div id="contactBackground">
<div class="scroll-container">
<div class="custom-item">Item 1</div>
<div class="custom-item">Item 2</div>
<div class="custom-item">Item 3</div>
<div class="custom-item">Item 4</div>
<div class="custom-item">Item 5</div>
<div class="custom-item">Item 6</div>
</div>
</div>
<button class="contact-button">お問い合わせはこちら</button>
</section>
お問い合わせセクションのCSS
#sectionContact {
height: 100vh;
display: grid;
place-items: center; /* 子要素を中央に配置 */
background-color: #fff;
position: relative;
}
.contact-button {
position: absolute;
margin: 0 auto; /* 左右の margin を auto にすることで中央に寄せる */
padding: 20px 40px;
font-size: 18px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
.contact-button:hover {
background-color: #0056b3;
}
#contactBackground {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.8; /* 透過度を調整(必要に応じて変更) */
}
.scroll-container {
display: flex; /* 要素を横に並べるために flexbox を使用 */
width: 600%; /* 6つのアイテムが横に並ぶように */
animation: scroll 30s linear infinite; /* scroll アニメーションを適用 */
}
.custom-item {
flex: 0 0 16.666%; /* 各アイテムの幅を設定(100% / 6) */
height: 100vh; /* コンテナの高さいっぱいにする */
text-align: center;
line-height: 100vh; /* 垂直方向に中央揃えする */
font-size: 3rem; /* テキストのフォントサイズを設定 */
}
@keyframes scroll {
0% {
transform: translateX(0); /* 開始位置 */
}
100% {
transform: translateX(-100%); /* 終了位置 */
}
}
お問い合わせセクションのライブラリ(GSAP)
// GSAPのScrollTriggerプラグインを登録
gsap.registerPlugin(ScrollTrigger);
// お問い合わせアニメーション
const tlContact = gsap.timeline({
paused: true,
scrollTrigger: {
trigger: "#sectionContact",
start: "top 80%",
end: "bottom 80%",
toggleActions: "play none none reverse",
markers: true
},
})
.to("#sectionContact", { backgroundColor: "#000", duration: 0.5 })
.from("#sectionContact", { xPercent: -100, duration: 0.5 })
.to(".contact-content", { display: "block", duration: 0 })
.from(".contact-button", { opacity: 0, y: 20, duration: 1, ease: "power3.out" })
.to("#sectionContact", { backgroundColor: "rgba(0, 0, 0, 0.8)", duration: 0.5 });
// お問い合わせボタンのクリックイベント
document.querySelector(".contact-button").addEventListener("click", () => {
tlContact.play();
});
GSAP(GreenSock Animation Platform)は、強力なJavaScriptアニメーションライブラリであり、ウェブサイトのアニメーションをスムーズかつ効果的に実装するためのツールを提供します。特に、複雑なアニメーションやスクロールトリガーを簡単に制御することができます。
位置と配置
#sectionContact
は高さ100vh
で全画面を占有し、display: grid;
を使用して子要素を中央に配置しています。position: relative;
を使用して、背景とボタンの絶対配置を可能にしています。
アニメーション効果
- 背景のアニメーションは
keyframes
を使って定義され、scroll-container
が横にスクロールするようになっています。 - ボタンにはホバー時の色変更を追加し、GSAPを使ってスクロールトリガーとアニメーションを実装しています。
GSAPの使用
ScrollTrigger
プラグインを使ってスクロール位置に基づいてアニメーションをトリガーし、timeline
を使って複数のアニメーションを連続的に実行します。- クリックイベントをリッスンし、ボタンがクリックされたときにタイムラインのアニメーションを再生します。
See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
まとめ
今回はGSAPとScrollTriggerを使用して、ウェブページに動きのある要素を追加する方法を紹介しました。
各セクションごとに異なるアニメーションやスクロール効果を適用することで、より魅力的でインタラクティブなウェブデザインを実現できます。
ぜひご自身のプロジェクトに適用して、ユーザーエクスペリエンスを向上させてください。