Construire une animation de flip de carte 3D avec CSS Houdini

Cet article démontre les capacités de Houdini en créant une animation de flip de carte 3D. Il vous guide à travers les concepts de base et la mise en œuvre pratique, montrant comment améliorer votre flux de travail et réaliser des animations CSS avancées.

Les limitations d'animation CSS traditionnelles sont surmontées par Houdini, un ensemble d'API de navigateur expérimental offrant un contrôle sans précédent sur le moteur de rendu. Cela permet des expériences visuelles uniques auparavant impossibles, repoussant les limites de conception Web.

Concepts clés:

• API de base de Houdini (travaux, propriétés personnalisées, API de peinture)
• Création d'animations 3D interactives
• élargir l'exemple de flip de carte

Triade de Houdini:

Houdini étend le moteur de rendu du navigateur, permettant des animations, des effets et des styles personnalisés. Nous explorerons ses trois principales API en détail. (Remarque: Activer Houdini dans Chrome: // Flags / en recherchant et en activant les expériences pertinentes.)

Worklets:

Modules JavaScript fonctionnant dans le moteur de rendu du navigateur, permettant des comportements de peinture, de mise en page et d'animation personnalisés. Les travaux permettent:

• Animations dynamiques (par exemple, animer la largeur de course basée sur l'interaction utilisateur)
• Effets interactifs (par exemple, systèmes de particules, effets d'ondulation)
• Styles visuels étendus (par exemple, gradients personnalisés, motifs)
• Intégration JavaScript

Exemple de travail: ciel nocturne étoilé:

Un effet nocturne étoilé illustre l'utilisation des travaux. Le HTML comprend un <div> pour l'effet: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div id=&quot;night-sky&quot;&gt;&lt;/div&gt; &lt;/code&gt;</pre> <p> CSS applique le travail: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-css&quot;&gt;#night-sky { width: 100vw; height: 100vh; background-image: paint(starrySky); }&lt;/code&gt;</pre> <p> javascript (app.js) crée l'effet étoilé: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;class Star { paint(ctx, geom, properties) { /* ... star drawing logic ... */ } } registerPaint('starrySky', Star);&lt;/code&gt;</pre> <p> <img src="https://img.php.cn/upload/article/000/000/000/173899357963721.jpg" alt="Building a 3D Card Flip Animation with CSS Houdini "> </p> <p> <strong> Propriétés personnalisées: </strong> </p> <p> Variables CSS avancées Vérification du type d'offre, définition de syntaxe et logique personnalisée pour le style dynamique. </p> <p> <strong> Propriété personnalisée Exemple: barre de progrès circulaire: </strong> </p> <p> Une barre de progrès circulaire montre des propriétés personnalisées et des travaux de peinture. Le HTML: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div class=&quot;progress&quot; data-progress=&quot;0&quot;&gt;&lt;/div&gt;&lt;/code&gt;</pre> <p> CSS définit la barre de progression et la propriété personnalisée <code>--progress:

<code class="language-css">@property --progress { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.progress { background: conic-gradient(...var(--progress)...); }</percentage></code>

javascript (peinture-worklet.js) gère la peinture:

<code class="language-javascript">class PaintWorklet { paint(ctx, { width, height, progress }) { /* ... drawing logic ... */ } }</code>

Un autre fichier JavaScript enregistre le travail et met à jour les progrès:

<code class="language-javascript">// ... code to register the paint worklet and update --progress ...</code>

API PEINT:

Active les styles visuels dynamiques et personnalisés. Les caractéristiques clés incluent des travaux de peinture, des propriétés personnalisées et la fonction paint().

Paint API Exemple: Modèle dynamique:

Cet exemple crée un motif dynamique de cercles. Le HTML:

<code class="language-html"><div id="night-sky"></div>
</code>

CSS applique le travail de peinture:

<code class="language-css">#night-sky {
  width: 100vw;
  height: 100vh;
  background-image: paint(starrySky);
}</code>

javascript (app.js) définit le modèle:

<code class="language-javascript">class Star { paint(ctx, geom, properties) { /* ... star drawing logic ... */ } }
registerPaint('starrySky', Star);</code>

Flip de carte 3D interactive:

Cette section détaille la construction d'une animation de flip de carte 3D à l'aide de Houdini. Le HTML, CSS et JavaScript (app.js et peintureworklet.js) sont fournis, démontrant l'intégration des travaux, des propriétés personnalisées et l'API de peinture pour créer une animation déclenchée en volants.

Élargir la carte de carte:

Le flip de carte est intégré dans une section de personnel de site Web de l'entreprise, présentant son application pratique. HTML, CSS et JavaScript modifiés sont montrés, démontrant comment intégrer les images et les informations du personnel.

Conclusion:

Cet article fournit une introduction complète aux capacités de Houdini, démontrant son potentiel pour créer des expériences Web innovantes et interactives. Les exemples illustrent comment tirer parti des travaux, des propriétés personnalisées et l'API de peinture pour réaliser des effets visuels avancés et améliorer les flux de travail de développement Web.