この文書は、Framerを学ぶ日本のユーザーが日本語資料の不足で直面する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用される皆様に少しでもお役に立てば幸いです。

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

ウェブサイトを訪れて、そのインタラクティブでダイナミックな様子に感心したことはありますか？最近人気のあるインタラクションの一つが、フレームワークキャンバス効果です。実際のキャンバスのように画面をドラッグし要素を動かせるようにする方法です。SketchやJitterはすでにこの効果をウェブサイトに導入しています。このチュートリアルでは、Framerでこの効果を作る方法を段階的に案内します。

キャンバス効果を作る

1. ページの設定

Fキーで新しいフレームを作成し、ページ全体を覆うようにします。左と右上にピン留めし、高さはビューポートに設定します。Fillは削除し、フレーム名を『Frame Canvas』に指定します。中央にもう一つフレームを作成し、サイズを2500 × 2500に設定した後、白で塗りつぶします。このレイヤー名を『draggable』に指定します。以降の効果を適用するオブジェクトはここに追加します。

2. ドラッグ効果の追加

『draggable』レイヤーを選択し、右側のEffectsパネルでDragを追加します。まず自由形で保持し、SnapbackとMomentumをオフにします。プレビューでドラッグできるか確認してください。

3. 制約条件の設定

『Frame Canvas』レイヤーを選択し、プロパティパネルのScrollセクションでセクション名を指定します。その後、『draggable』レイヤーのドラッグ効果に戻り、FreeformをNoに変更し、先ほど作成したセクションを選択します。プレビューで『draggable』レイヤーが『Frame Canvas』内でのみ動くか確認します。

4. 要素の追加

操作したいオブジェクトを『draggable』レイヤーに追加します。ページと『Frame Canvas』レイヤーのOverflowをVisibleに設定し、『draggable』全体が見えるようにします。

5. ホバー状態と回転

オブジェクトをドラッグし始めるときに、ホバー状態と回転を追加します。onDragStartを使ってドラッグ時にオブジェクトの不透明度を変更し、少し回転させるように実装できます。

ウェブサイトにインタラクションを追加

これでFramerで実際のキャンバスのようにコンポーネントを自由に操作できるフレームワークキャンバス効果が完成しました。この効果はウェブサイトによりインタラクティブでダイナミックな雰囲気を追加し、Framerのドラッグ効果だけで簡単に実現できます。

効果およびリミックスプロジェクトを見に行く→

本記事はFramer公式ブログの‘Framerでドラッガブル要素を用いたキャンバス効果の作成’を翻訳・編集したコンテンツです。