Create Sparkling Text Effects With sparkly-text Web Component

Category: Animation , Javascript , Recommended | December 7, 2023
Author:stefanjudis
Views Total:83 views
Official Page:Go to website
Last Update:December 7, 2023
License:MIT

Preview:

Create Sparkling Text Effects With sparkly-text Web Component

Description:

sparkly-text is a lightweight web component that allows developers to easily add animated sparkles to text, making it shimmer and shine.

You can customize the number of sparkles, and their size/color to create the perfect effect for your needs. Ideal for headlines, calls to action, or any text element that needs a little extra attention.

See Also:

How to use it:

1. Download and import the sparkly-text web component

<script type="module" src="sparkly-text.js"></script>

2. Wrap your text content into the sparkly-text Custom Element. That’s it.

<sparkly-text>
  sparkly text
</sparkly-text>

3. Specify the numnber of sparkles to generate.

<sparkly-text
  number-of-sparkles="10">
  sparkly text
</sparkly-text>

4. Override the color of sparkles.

<sparkly-text
  style="--sparkly-text-color: black">
  sparkly text
</sparkly-text>

5. Change the size of sparkels.

<sparkly-text
  style="--sparkly-text-size: 3em">
  sparkly text
</sparkly-text>

You Might Be Interested In:


Leave a Reply