記事より動画で見たい方はこちらから！（チャプター付のリンクから見たいところを再生できます）
【動画のChapter】
01:48 今回のお題～タイトル紹介
02:20 まずは完成形を見てみる
04:06 実際にFigmaを操作しながら解説
04:36 「インタラクション」→「スクロールパララックス」を選んで設定
05:18 左右からスライドインさせるセクションをつくる
06:00 各セクションも透過させてビジュアルの通過が見えるように設定
06:38 完成した状態をプレビュー
07:10 厳密に言うと「パララックス」と「スクロール連動アニメーション」は独立した概念
08:38 今回のまとめ
こんにちは。上武 ハヤです！今回は「パララックス」を「デザインデータだけ」で実装しちゃうよ！というお話です
みなさんこんにちは😊
私は「上武 ハヤ（うぇぶ はや）」といいます🌟
最近、動画配信を始めたVの者(Vtuber)ですよー！
なんか急～に、一気に秋めいてきてませんか🍂？最近🧐
この前の投稿で「まだ暑いですねぇ～」なんて言ってたら。
もうむしろ、どっちかというと寒いという😶🌫️
さてそんな中、私は秋カラーの衣装にチェンジして！お送りしてますよ～！
さて今回も、前回の内容につづいて。
「Figma Sites」についてのお話をしていきます！
デザインデータだけで、スクロール型のパララックスも実装できます！
今回は…「スクロール型のパララックスをFigma Sitesで実装」する事について、チャレンジしてみました！
これまでも「Figma Sites」で、いろんなパーツを実装するチャレンジを、動画でしてきたわけですが…！
今回は「スクロール型のパララックス」の実装を、実際に手を動かしながら、ご紹介しています！
やる事としては主に次の3つ。
- ・(1). 大きめのメインビジュアルを用意（現時点ではファーストビューでの使用が一番わかりやすく効果が確認できます）
- ・(2). そこに「インタラクション > スクロールパララックス」を設定。スクロールにどのくらいの量、反応するかを設定します
- ・(3). あとは、スクロールに応じて左右からスライドインしてくる要素・セクションなどを用意してあげれば完成！（要素をスライドインさせる方法はこの回の動画を見てね！）
たったこれだけの、わずか数ステップで！
「スクロール型のパララックス」の実装も、できちゃうんですねー。
これまでも、ハンバーガーメニューやタブ型コンテンツ、アコーディオン型のFAQなど、
実用的なWebデザインのパーツをFigma Sitesでつくってきたわけですが。
今回の「スクロール型のパララックス」も、Webデザインの手法のひとつとして、
概念だけでも知っておくと。きっと何かの役に立つことと思います！
…ということで、今回も、実際に私自身がFigma Sitesで
実践してみた様子を動画として配信してますので、ぜひとも！ご覧くださいね～☺️
【実践動画】【Figma Sites】パララックスも！「デザインデータだけ」で実装できちゃいます！
【動画のChapter】
01:48 今回のお題～タイトル紹介
02:20 まずは完成形を見てみる
04:06 実際にFigmaを操作しながら解説
04:36 「インタラクション」→「スクロールパララックス」を選んで設定
05:18 左右からスライドインさせるセクションをつくる
06:00 各セクションも透過させてビジュアルの通過が見えるように設定
06:38 完成した状態をプレビュー
07:10 厳密に言うと「パララックス」と「スクロール連動アニメーション」は独立した概念
08:38 今回のまとめ
ぜひぜひ、みなさんのチャンネル登録をお待ちしてますっ！
上武 ハヤでした～！またねっ😉！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※この動画は個人によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※動画は自身の責任において閲覧ください。本記事掲載の動画の内容を無断で講座や教材等に転用することを禁じます。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。