今回のチュートリアルでは、Framerを活用して素晴らしいスクロール効果を実装する過程を見ていきます。この効果はFramerコミュニティから継続的に要請されてきたもので、Appleなどの人気サイトで頻繁に見ることができます。特にApple TV Plusページが良い例で、スクロールするにつれてセクションが徐々に縮小し、スライドショーに変わる流れを明確に示しています。

YouTubeチャンネルを購読してください

デモの準備

今回のチュートリアルのために、画像の代わりにビデオで同じ効果を実装したデモを用意しました。スクロールを下げると、ビデオがどんどん縮小してスライドショーに移行し、スケーリング区間が終了すると自然に次のセクションに繋がります。スライドショーで次のアイテムをクリックした後に上にスクロールすると、ビデオは再び拡大され、元の状態に戻ります。

Framerで始める

まず、Framerプロジェクトを開いて十分な長さのスクロールセクションを作成します。例では高さを約2800pxに設定しましたが、ページのリズムやコンテンツの長さに応じて自由に調整しても構いません。このセクションの高さは、ビデオがどの程度スクロールされてスケールが縮小されるかを決定します。

次に、スクロールセクション内にフレームをもう1つ描き、サイズをWidth: 100%、Height: 100vhに設定します。このフレームの名前を「slideshow container」に変更し、Position: Stickyに指定するとページを下げてもこの領域が上部に固定されます。最後にフレームのLayoutを有効にし、デフォルト値をそのままにすると配置が安定して保たれます。

スライドショーの追加

次にInsertメニューのInteractiveセクションからスライドショーを引っ張ってきてプロジェクトに追加します。スライドショーのサイズはHeight: 100%、ビデオのアスペクト比に合わせてWidth: 約1900pxに設定し、比率が崩れないようにLock Aspect Ratioをオンにしてください。画面の幅を常にいっぱいにするため、Min-width: 110%も忘れずに指定します。その後、マルチピンコネクタでスライドショーにビデオを接続します。次にスクロール変換効果を適用する番です。スライドショーを選択した状態でプロパティパネルのEffectsに移動し、Scroll Transformを追加し、基準をSection in Viewに設定して、先ほど作成したビデオセクションをターゲットに指定すれば完了です。

スライドショーの仕上げ

プロジェクトに合わせてスライドショーの属性を仕上げてください。例えばIntervalを5秒に設定すると、次の項目に移る前にビデオが画面に長く留まり、安定して鑑賞できます。今回の例では下部の点表示であるDotsが必要ないので非表示にし、スライド間の間隔は約50pxと広めに取ると、遷移段階がより鮮明になります。ナビゲーション性を高めるために矢印のサイズも少し大きくしてください。

端で他のビデオが少し見えるようにClipping > Overflow: Show に設定して視認性を確保します。また、テキストレイヤーにもScroll Transformを追加してスクロールに応じてOpacityが徐々に減るようにすることで、視線が自然にビデオとスライドの遷移に集中し、全体の流れがよりスムーズに感じられます。

Tickerコンポーネントの追加

次のセクションの印象をより良くするために、Insert > InteractiveからTickerコンポーネントを追加します。このTickerを複製して3本作り、それぞれの列を画像に接続します。続いてGapとSpeedの値を適切に調整し、各列に異なるDirectionを指定して左右スクロール方向を変えてください。これで画面にリズム感が生まれ、遷移後のセクションが一層活気づきます。

最終結果

これでスクロールするごとに画面が滑らかに縮小し、スライドショーに移行するスクロール効果が完成しました。最終結果はAppleウェブサイトで見ることのできる演出と類似した感覚を提供するでしょう。

効果を見るにはここをクリック→

この文はFramer公式ブログの「FramerでAppleのようなかっこいいスクロール効果を作成する」を翻訳・アレンジしたコンテンツです。