Where
sparkles
dance and web designs
breakdance
Sparkly Text is a lightweight web component allowing developers to integrate eye-catching animated sparkles, making any text element shine. Customize the count, size, and colors of the sparkles to create the perfect touch for website headlines, calls-to-action or other text that needs a touch of magic.
Step 1
Download the file sparkly-text.js file and upload it in your website, in order to load it locally (for example in the /wp-content/uploads/ directory)
Step 2
In a Code Block or with a Snippet Manager, add this code:
Step 3
You can now add the new html tag to any text field, whether it's the Text element, the Heading, Dual Heading, Menu Builder, Form Builder...
In a Dual Heading element like the example at the top of his page:
You can easily change the color, change the size and the number of sparkles:
<sparkly-text number-of-sparkles="5">Vote for Mike</sparkly-text>
<!-- Color the sparkles -->
<sparkly-text style="--sparkly-text-color: orange">Mike says Hi!</sparkly-text>
<!-- Increase the sparkle size -->
<sparkly-text style="--sparkly-text-size: 2.5em">I AM YOUR FATHER</sparkly-text>
More info : https://github.com/stefanjudis/sparkly-text