このドキュメントは、Framerを学ぶ国内ユーザーが、日本語資料の不足に直面する問題を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆様に少しでもお役に立てば幸いです。

このチュートリアルでは、Framerを活用して素晴らしいスクロール効果を実現するプロセスを見ていきます。この効果はFramerコミュニティで継続的にリクエストされており、Appleのような人気サイトでもよく目にします。特に、Apple TV Plusのページが良い例で、スクロールするにつれてセクションが徐々に縮小し、スライドショーに変わる流れを明確に示しています。

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

デモの準備

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

Framerで始める

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

次に、スクロールセクション内にフレームをもう一つ描き、サイズを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を複製して三行作成し、各行を画像に接続します。続けてGapとSpeedの値を適切に調整し、各行に異なるDirectionを指定して左右のスクロール方向を変えましょう。これによって画面にリズムが生まれ、移行後のセクションが一層活き活きします。

最終結果

これでスクロールするほど画面が滑らかに縮小され、スライドショーに変わるスクロール効果が完成しました。最終結果はAppleのウェブサイトで見ることができる演出と類似した感触を与えるでしょう。

効果を見て実際にやってみる→

この記事は、Framer公式ブログの「Creating a cool scrolling effect like Apple with Framer」を翻訳・アダプトしたコンテンツです。