Press "Enter" to skip to content

A Small jQuery Snippet for Creating Glitter/Sparkles in-Text | SparklingStars.js

SparklingStars is a small jQuery snippet for creating glitter in text. A small, easy-to-use plugin that applies a sparkling star effect to text with SVG, CSS / CSS3, and a little bit JavaScript.

sparkle effect jquery, how to add glitter effect in html, css sparkle effect, pure css sparkle effect, javascript twinkle effect, sparkle hover effect

How to make use of it:

1. Insert the JavaScript SparklingStars.js and Stylesheet SparklingStars.css into the HTML web page.

<link href="SparklingStars.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="SparklingStars.js"></script>

2. Apply the glowing star’s impact by wrapping your text within the <span class="sparkling"></span> tag.

<p>
  Lorem ipsum dolor sit amet, <span class="sparkling">tempor incididunt</span> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <span class="sparkling">dolor in reprehenderit</span> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

3. Customize the sparkling stars.

// color
const color = "#FFC700";

// shape
const svgPath = 'M26.5 25.5C19.0043 33.3697 0 34 0 34C0 34 19.1013 35.3684 26.5 43.5C33.234 50.901 34 68 34 68C34 68 36.9884 50.7065 44.5 43.5C51.6431 36.647 68 34 68 34C68 34 51.6947 32.0939 44.5 25.5C36.5605 18.2235 34 0 34 0C34 0 33.6591 17.9837 26.5 25.5Z';

4. Customize the animation within the CSS.

@-webkit-keyframes comeInOut {
  0% { transform: scale(0); }
  50% { transform: scale(1); }
  100% { transform: scale(0); }
}
@-moz-keyframes comeInOut {
  0% { transform: scale(0); }
  50% { transform: scale(1); }
  100% { transform: scale(0); }
}
@-o-keyframes comeInOut {
  0% { transform: scale(0); }
  50% { transform: scale(1); }
  100% { transform: scale(0); }
}
@keyframes comeInOut {
  0% { transform: scale(0); }
  50% { transform: scale(1); }
  100% { transform: scale(0); }
}

@-webkit-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
@-moz-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
@-o-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

Sparkling Effect On Text Using jQuery, SparklingStars Plugin/Github, css sparkle text effect, jquery sparkle animation


See Demo And Download

Official Website(iseries): Click Here

This superior jQuery/javascript plugin is developed by iseries. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *