WebflowウェブサイトにCurveの背景を追加する

スプライン は、動的な 3D 設定を作成するためのソフトウェアです。スプライン接続を使用すると、スプラインの背景とその発生を Webflow に直接埋め込むことができます。また、Webflow のネイティブ インタラクションを使用して、Webflow でスプライン エンティティを生き生きとさせることもできます。

このガイド全体を通じて、次のことを理解できます。

1. スプライン背景を形成するプロセス
2. WebflowウェブサイトにSplineの背景を添付する方法
3. Webflow でスプライン背景をアニメーション化する

スプライン背景の構築とエクスポート

まず、 確立する スプラインの背景。まずは スプラインアカウントを作成してデザインを始めましょう！ スプラインのマニュアル または、設計に関するさらなる洞察を得るための説明ビデオをご覧ください。

背景の準備ができたら、エクスポートできます。

1. プレス 輸出 スプラインエディタツールバー
2. アクセス コードのエクスポート
3. ヘッダーのリンクをコピーします 概要 タブ（リンクの末尾には「.splinecode」拡張子が付きます）

Webflow ウェブサイトに Spline 背景を追加する

Splineの背景を作成してエクスポートすると、WebflowのWebサイトに背景を挿入できます。Webflowには、 スプライン背景 コンポーネントは、他の要素と同様にカスタマイズできます (配置、サイズなど)。

Spline 背景を Webflow サイトに埋め込むには:

1. 案内する パネルを追加 > メディア 
2. ドラッグ スプライン背景 コンポーネントを設計領域に配置する
3. 進む 要素設定パネル > スプライン背景設定
4. スプラインバックドロップリンク（拡張子「.splinecode」で終わるリンク）を URL 分野

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

背景が Webflow Web サイトにシームレスに統合されたので、Webflow 固有のインタラクションを使用してアニメーション化できる柔軟性が得られます。

スプライン背景でオブジェクトをアニメーション化するには:

1. 選択してください スプライン背景 デザインエリア
2. アクセス インタラクションパネル
3. 選択してください 要素トリガー または ページトリガー
4. ガイドラインに従って、ステップ6までカスタムアニメーションを構成します。
5. アクションドロップダウンからスプラインアニメーションを選択します
6. エンティティを選択 スプライン > 物体 落ちる 

その後、必要に応じてスプライン バックドロップを微調整できます。アニメーション タイムライン内のオブジェクトの位置、回転、スケール (すべての X、Y、Z 軸) を操作します。アクション ターゲットをカスタマイズして、アニメーションの影響を受ける要素またはトリガーを決定することもできます。