Animated sparkles in jQuery

a small jQuery snippet to create sparkles in text

How to create an animated sparkles effect

I came across an interesting and detailed blog article about creating a partial effect written in React. The result was so cool, that I thought about doing a similar implementation in jquery. The article was written by Joshua Comeau and his blog is about frontend techniques.

Interested in Josh's solution in React? Check out his blog article.

So, welcome to my first blog article 😃. This is the sparkling effect I'm writing about. Now let's do this in jQuery. The idea is to add the sparkling animation effect for all elements with a sparkling class. To do so, we initialize the initSparkling() function when the DOM is ready and execute a closure which contains the further logic.

		
			
function initSparkling() { // sparkling effect let sparkling = function() { $('.sparkling').each(function() { // let's go! }); } // execute sparkling(); } $(function() { initSparkling(); });

Let's define some settings, first. The constant color is for the star color and svgPath for the svg path. I used the svg from Josh, which was released under Creative Commons Zero. If you want to use your own svg just replace the svg path.

		
			
// settings const color = "#FFC700"; 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';

Generating Sparkles

Now let's dive into the inner function. We want to add a star to each sparkling element.

		
			
// sparkling effect let sparkling = function() { $('.sparkling').each(function() { let sparklingElement = $(this); // add a new star sparklingElement.append(addStar()); }); }

We extend this logic by using the javascript timeout function to create a random loop with Math.round(), where we add stars. To avoid having more than five stars at the same time, we count the currently existing stars in each loop and remove the longest existing one.

		
			
// sparkling effect let sparkling = function() { $('.sparkling').each(function() { let sparklingElement = $(this); let stars = sparklingElement.find('.star'); // remove the first star when more than 6 stars existing if(stars.length > 5) { stars.each(function(index) { if(index === 0) { $(this).remove(); } }); } // add a new star sparklingElement.append(addStar()); }); let rand = Math.round(Math.random() * 700) + 100; setTimeout(sparkling, rand); }

To add a star, we create another inner function in which we define HTML for the output. This time we use Math.random() to randomly determine the top and bottom position as well as the size of the star. I played around with the values ​​to see what fits the best view.

		
			
// star let addStar = function() { let size = Math.floor(Math.random() * 20) + 10; let top = Math.floor(Math.random() * 100) - 50; let left = Math.floor(Math.random() * 100); return '<span class="star" style="top:' + top + '%; left:' + left + '%;">' + '<svg width="' + size + '" height="' + size + '" viewBox="0 0 68 68" fill="none">' + '<path d="' + svgPath + '" fill="' + color + '" /></svg></span>'; }

The js part is done. Now we're adding some css to animate the svg elements. We need to scale and rotate the stars for a good looking animation.

		
			
/* sparkling stars */ /*******************/ @-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 { position: relative; display: inline-block; z-index: 0; font-weight: bold; color: #FFC700; } .sparkling > span { z-index: -1; position: absolute; display: block; animation: comeInOut 700ms forwards; } .sparkling > span > svg { display: block; animation: spin 1000ms linear; }

That's it!