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公式ブログの‘Create a canvas effect in Framer with draggable elements’を翻訳・脚色したコンテンツです。