Framer用の部品「ScrollSync Showcase」の30秒紹介動画
スクロールに合わせて画像と文章が同期するセクションを作るFramerのコンポーネント「ScrollSync Showcase」の30秒の紹介動画です。切り替えが止まる困りごとから、リミックスを開いて差し替えるまでを、ログ画面で見せています。
FablessBridgeによる自主制作の紹介動画
概要
スクロールに合わせて画像と文章が同期するセクションを作るFramerのコンポーネント「ScrollSync Showcase」の30秒の紹介動画です。切り替えが止まる困りごとから、リミックスを開いて差し替えるまでを、ログ画面で見せています。
動画の要点
- 2つのコンポーネントを1つにまとめるとスクロールの切り替えが止まる困りごとを、赤い失敗のログと、切れるターゲットの線で見せました。
- リミックスを開くだけでターゲットとバリアントが8つずつつながっていることを、青い線が1本ずつつながる図で見せました。
- スクロールに合わせて文章と画像が一緒に切り替わる様子を、掲載ページにある公式のプレビュー画像で見せました。
動画の流れ
- 00:00「ScrollSync Showcase」の名前が記号から組み上がり、ログ画面に「x scroll targets lost」など赤い失敗の行が打たれます。右には赤い「SCROLL SYNC [ off ]」の枠が出ます。
- 00:03「Merging breaks the scroll switch.」と出て、「COMPONENT A」と「COMPONENT B」の箱が1つに寄ります。4つの「scroll target」へつながっていた線が、赤い「x」とともに切れます。
- 00:06「Start from the remix.」と出て、カーソルが「[ REMIX NOW ]」のボタンを押します。ログに「ok project opened」が出ます。
- 00:09「Everything comes pre-wired.」と出て、「target 01」から「target 08」が「variant 01」から「variant 08」へ青い線で1本ずつつながり、点が流れます。ログには「ok scroll targets」「ok variants」「ok responsive layouts」が並びます。
- 00:14「Text and visuals switch together.」と出て、掲載ページの公式のプレビュー画像が約6秒ぶん再生されます。途中から窓の右の列をぼかし、「Demo logos blurred」と添えます。
- 00:20「No code. Swap in」の下で、「product screens」「portfolios」「photography」「case studies」が入れ替わります。「Desktop, tablet and phone layouts included」と、3つの手順のチェックが順に付きます。
- 00:23ASCIIの枠が上下から開き、「ScrollSync Showcase」の名前が組み上がります。出品者のアバターと名前が添えられます。
- 00:26ログの1行に製品ページのアドレスが打たれ、出品者のアバターと名前、「ScrollSync Showcase」を出して締めます。