test anime

probleme de la mort qui tue

Sunny mornings

Animations de lettres

code de l'animation

<!-- end chunk blapyDiv --> <p><code>&lt;!DOCTYPE html&gt;</code><br /><code>&lt;html&gt;</code><br /><code>&lt;head&gt;</code></p> <p><code>&lt;style&gt;</code></p> <p><code>.ml1 {</code><br /><code>&nbsp; font-weight: 900;</code><br /><code>&nbsp; font-size: 3.5em;</code><br /><code>}</code></p> <p><code>.ml1 .letter {</code><br /><code>&nbsp; display: inline-block;</code><br /><code>&nbsp; line-height: 1em;</code><br /><code>}</code></p> <p><code>.ml1 .text-wrapper {</code><br /><code>&nbsp; position: relative;</code><br /><code>&nbsp; display: inline-block;</code><br /><code>&nbsp; padding-top: 0.1em;</code><br /><code>&nbsp; padding-right: 0.05em;</code><br /><code>&nbsp; padding-bottom: 0.15em;</code><br /><code>}</code></p> <p><code>.ml1 .line {</code><br /><code>&nbsp; opacity: ;</code><br /><code>&nbsp; position: absolute;</code><br /><code>&nbsp; left: 0;</code><br /><code>&nbsp; height: 3px;</code><br /><code>&nbsp; width: 100%;</code><br /><code>&nbsp; background-color: #fff;</code><br /><code>&nbsp; transform-origin: 0 0;</code><br /><code>}</code></p> <p><code>.ml1 .line1 { top: 0; }</code><br /><code>.ml1 .line2 { bottom: 0; }</code></p> <p><code>&lt;/style&gt;</code><br /><code>&lt;/head&gt;</code></p> <p><br /><code>&lt;body&gt;</code><br /><code>&lt;h1 class="ml1"&gt;</code><br /><code>&nbsp; &lt;span class="text-wrapper"&gt;</code><br /><code>&nbsp; &nbsp; &lt;span class="line line1"&gt;&lt;/span&gt;</code><br /><code>&nbsp; &nbsp; &lt;span class="letters"&gt;{{texteAnime}}&lt;/span&gt;</code><br /><code>&nbsp; &nbsp; &lt;span class="line line2"&gt;&lt;/span&gt;</code><br /><code>&nbsp; &lt;/span&gt;</code><br /><code>&lt;/h1&gt;</code><br /><code>&lt;/body&gt;</code></p> <p>&nbsp;</p> <p>&nbsp;</p> <p><code>&lt;/html&gt;</code></p> <p><code>&lt;script&gt;</code></p> <p><br /><code>var lettres= document.querySelector(".text-wrapper");</code></p> <p><br /><code>anime({</code><br /><code>&nbsp; targets: lettres,</code><br /><code>&nbsp; direction : "{{directionTranslation}}",</code><br /><code>&nbsp; easing: '{{styleArrive}}',</code><br /><code>&nbsp; translatex: "{{distanceTranslation}}", </code><code>&nbsp;</code><br /><code>});</code></p> <p><br /><code>&lt;/script&gt;</code></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <!-- start tagListerDisplayCategories 10176--> <section class=""> </section> <!-- end tagListerDisplayCategories --> <!-- streamSection for subsection 10176/ -->

Exemples d'animations