スクロール連動
ScrollTriggerでカードを重ねながら切り替えていく、縦スクロール型のショーケース演出です。
Y
Yutaka Kizaki
@junkbranding
2026年5月21日
読了時間: 6分
構成 / File Structure
</>Code Viewer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
表現タイプから探す
スクロール連動
スクロールに連動する多彩な表現を集めました。
2件パララックス系
奥行き感や視差効果で没入感を高める表現です。
2件カード・UIパーツ系
カードやUIパーツのインタラクティブ表現。
1件テキスト演出系
文字を魅せるための多彩なテキスト表現。
2件ページ遷移・画面切り替え系
ページやセクションのスムーズな切り替え表現。
2件ローディング系
読み込みを楽しく魅せるローディング表現。
1件マウス・インタラクション系
カーソル操作に反応するインタラクティブ表現。
1件背景・ビジュアル表現系
背景やビジュアルで魅せるダイナミックな表現。
1件3D・WebGL寄り
WebGLや3Dを活用したリッチな表現カテゴリ。
1件ボタン・CTA系
CTAやボタンを魅力的にするアニメーション表現。
1件関連記事
GSAPScrollTriggerアニメーションスクロールストーリーテリング
GSAPで作るスクロール連動ヒーローアニメーション
GSAPとScrollTriggerを使って、スクロールに合わせてダイナミックに動き出すヒーロー表現を実装します。
2026年5月19日
GSAPJavaScriptCSSテキストUIアニメーション
GSAPで作るSplitText見出しとCTAバナー演出
SplitText と timeline を使って、見出しとボタンを一体で見せるヒーローバナー演出です。
2026年5月21日
GSAPCSSJavaScriptアニメーショントランジションストーリーテリング
GSAPで組む5枚構成のランディングページリビール
プリローダー、カード整列、中央ビジュアル拡張の流れを記事化しました。
2026年5月20日