CSS Houdiniで3Dカードフリップアニメーションを構築します

この記事では、3Dカードフリップアニメーションを作成することにより、Houdiniの機能を示しています。 コアの概念と実用的な実装を案内し、ワークフローを強化し、高度なCSSアニメーションを実現する方法を示しています。

従来のCSSアニメーションの制限は、レンダリングエンジンを前例のない制御を提供する一連の実験的なブラウザAPIのセットであるHoudiniによって克服されます。これにより、以前は不可能なユニークな視覚体験が可能になり、Webデザインの境界を押します。

重要な概念：

HoudiniのコアAPI（ワークレット、カスタムプロパティ、ペイントAPI）

インタラクティブな3Dアニメーションの作成
• カードフリップの例を拡張する
• houdiniのトライアド：

Houdiniは、ブラウザのレンダリングエンジンを拡張し、カスタムアニメーション、エフェクト、スタイルを可能にします。 3つの主要なAPIを詳細に調べます。 （注：関連する実験を検索してアクティブ化することにより、Chrome：// flags/でHoudiniを有効にします。

ワークレット：

ブラウザのレンダリングエンジン内で実行されているJavaScriptモジュールは、カスタムペイント、レイアウト、アニメーションの動作を可能にします。 ワークレットでは、

を許可します

ダイナミックアニメーション（ユーザーの相互作用に基づいてストローク幅をアニメーション化する）

インタラクティブな効果（粒子システム、リップル効果など）

拡張されたビジュアルスタイル（例：カスタムグラデーション、パターン）

• javaScript統合
• ワークレットの例：星空の夜空：
星空の夜の効果は、ワークレットの使用を示しています。 HTMLには、エフェクト用のa

が含まれています：

cssはワークレットを適用します：

<div>javascript（app.js）は、星空の効果を作成します： <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;night-sky&quot;&gt;&lt;/div&gt; &lt;🎜&gt;</pre> <p> </p><pre class='brush:php;toolbar:false;'>#night-sky { width: 100vw; height: 100vh; background-image: paint(starrySky); }</pre> <p></p>カスタムプロパティ：<pre class='brush:php;toolbar:false;'>class Star { paint(ctx, geom, properties) { /* ... star drawing logic ... */ } } registerPaint('starrySky', Star);</pre><p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173899357963721.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a 3D Card Flip Animation with CSS Houdini ">動的スタイリングのタイプチェック、構文定義、およびカスタムロジックを提供する高度なCSS変数。 </p> <p>カスタムプロパティの例：円形の進行状況バー：<strong></strong> </p>円形の進行状況バーは、カスタムプロパティと塗装ワークレットを示しています。 HTML：<p> </p> <p>cssは、進行状況バーと<strong>カスタムプロパティを定義します。 </strong> </p>javascript（paint-worklet.js）絵画を処理します：<p> </p> <pre class='brush:php;toolbar:false;'>&lt;div class=&quot;progress&quot; data-progress=&quot;0&quot;&gt;&lt;/div&gt;</pre>別のJavaScriptファイルがワークレットを登録し、進捗状況を更新します：<p> <code>--progress

@property --progress { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.progress { background: conic-gradient(...var(--progress)...); }

class PaintWorklet { paint(ctx, { width, height, progress }) { /* ... drawing logic ... */ } }

塗装API：

// ... code to register the paint worklet and update --progress ...

動的でカスタマイズされたビジュアルスタイルを有効にします。 主な機能には、ペイントワークレット、カスタムプロパティ、

機能が含まれます。

ペイントAPI例：動的パターン：

この例は、円の動的なパターンを作成します。 HTML：

<div id="night-sky"></div>
<🎜>

cssは塗料ワークレットを適用します：

#night-sky {
  width: 100vw;
  height: 100vh;
  background-image: paint(starrySky);
}

javascript（app.js）パターンを定義します：

class Star { paint(ctx, geom, properties) { /* ... star drawing logic ... */ } }
registerPaint('starrySky', Star);

インタラクティブ3Dカードフリップ：

このセクションでは、Houdiniを使用して3Dカードフリップアニメーションの構築を詳述しています。 HTML、CSS、およびJavaScript（app.jsおよびpaintworklet.js）が提供され、ワー​​クレット、カスタムプロパティ、ペイントAPIの統合を実証して、ホバートリガーアニメーションを作成します。

カードフリップの拡張

カードフリップは、サンプル会社のウェブサイトスタッフセクションに統合されており、実用的なアプリケーションを紹介しています。 修正されたHTML、CSS、およびJavaScriptが表示され、画像とスタッフ情報を組み込む方法を示しています。

結論：

この記事は、Houdiniの能力を包括的に紹介し、革新的でインタラクティブなWebエクスペリエンスを作成する可能性を示しています。 例は、ワークレット、カスタムプロパティ、ペイントAPIを活用して、高度な視覚効果を実現し、Web開発ワークフローを強化する方法を示しています。