Webflow(ウェブフロー)サイトにSpline sceneを追加する

Splineは、インタラクティブな3Dをデザインするためのツールです。

Splineの統合により、Spline sceneとそのイベントをWebflowに直接貼り付けることができます。

Webflowのネイティブインタラクションを使用して、WebflowでSplineオブジェクトをアニメーション化することもできます。

‍

Spline sceneを作成してエクスポートする方法

まず、 Splineでsceneを作成する必要があります。

そのためには、Splineにアクセスしてアカウントを作成し、デザインを開始してください。

設計方法の詳細については、Spline のドキュメントまたはビデオ チュートリアルを確認してください。

sceneを作成したら、sceneをエクスポートできます。

1. エディタのツールバーで[Export] をクリックします。
2. Code Exportに移動します。
3. [Overview]タブの上部にあるリンクをコピーします(リンクには「.splinecode」拡張子が付きます)。

‍

Spline sceneをWebflowサイトに追加する方法

Spline sceneを作成してエクスポートしたら、そのシーンを Webflowサイトに追加できます。

WebflowにはネイティブのSpline scene elementがあり、他の要素と同様にスタイルを設定できます。

1. Add elementからMediaに移動します。
2. Spline scene elementをキャンバスにドラッグします。
3. Element settings panelからSpline scene settingsに移動します。
4. Spline sceneのURLを貼り付けます。

‍

Webflow でスプライン シーンをアニメーション化する方法

1. キャンバス上のSpline sceneを選択します。
2. Interactions panelに移動します。
3. Element triggerまたはPage triggerを選択してください。
4. 手順6まではカスタムアニメーションの設定手順に従います。
5. [Actions] ドロップダウンからスプライン アニメーションを選択します。
6. ドロップダウン からオブジェクトを選択します。

その後、Spline sceneを自由にアニメーション化できます。

‍アニメーション タイムラインでそのオブジェクトの位置、回転、スケール (すべての X、Y、Z 軸上) を設定できます。

‍アクション ターゲットを調整して、アニメーションが影響するelementまたはトリガーを決定することもできます。