Create Bursting Stars Text Animation – Sparkle Text

Preview:

Description:

This ‘Sparkle Text’ animation uses JavaScript and CSS to create beautiful star particles that originate behind text and spread outward in random patterns.

This animation provides a unique method to highlight textual elements on a webpage. It can be applied to headlines, calls to action, or any text segment that requires emphasis. Users experience increased engagement as the animated stars draw attention to key messages.

How to use it:

1. Wrap your desired text in a container with the ‘sparkle’ class:

<div class="sparkle">
  CSSScript.Com
</div>

2. The CSS code below defines the appearance of the “Sparkle Text” container, individual stars, and the animation itself. The :root section sets global variables for background color and text height. The .sparkle class styles the text container, while the .star class sets up individual star properties such as size, color, and starting position. A @keyframes rule named slide defines the animation sequence for the stars, including rotation and scaling.

:root {
  --bg: #1c1c1c;
  --text-height: 300px;
}
.sparkle {
  width: 600px;
  height: var(--text-height);
  font-size: 50px;
  text-align: center;
  line-height: var(--text-height);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  z-index: 100;
  position: relative;
  text-shadow: 0px 0px 10px black;
}

.star {
  --star-size: 50px;
  --star-life: 5s;
  
  --start-left: 0px;
  --start-top: 0px;
  
  --end-left: 0px;
  --end-top: 0px;
  
  --star-color: #f1c40f;
  
  width: var(--star-size);
  height: var(--star-size);
  left: var(--end-left);
  top: var(--end-top);
  background: var(--star-color);
  position: absolute;
  mix-blend-mode: lighten;
  animation: slide var(--star-life) ease-in forwards;
}
.star:after {
  display: block;
  content: "";
  width: var(--star-size);
  height: var(--star-size);
  background-color: var(--bg);
  border-radius: 100%;
  position: relative;
  top: calc(var(--star-size) / 2 * -1);
  left: calc(var(--star-size) / 2 * -1);
  box-shadow: var(--star-size) var(--star-size) var(--bg),
    var(--star-size) 0px var(--bg),
    0px var(--star-size) var(--bg);
}
@keyframes slide {
  0%{
    left: var(--start-left);
    top: var(--start-top);
    transform: rotate(0deg);
    opacity: 0;
  }
  100%{
    left: var(--end-left);
    top: var(--end-top);
    transform: rotate(calc(180deg * var(--star-life-num))) scale(0.5);
    opacity: 1;
  }
}

3. The JavaScript code below controls the generation and animation of the stars. It uses the setInterval function to repeatedly create and add new star elements to the “sparkle” container at fixed intervals. The Star class defines the properties and behaviors of each star, including its size, position, movement, and color. Each star is randomly assigned properties within defined ranges and then appended to the container. The stars are automatically removed after a duration determined by their life property, creating a continuous burst effect.

const sparkle = document.querySelector(".sparkle");
var current_star_count = 0;
const MAX_STARS = 60;
const STAR_INTERVAL = 16;
const MAX_STAR_LIFE = 3;
const MIN_STAR_LIFE = 1;
const MAX_STAR_SIZE = 70;
const MIN_STAR_SIZE = 30;
const MIN_STAR_TRAVEL_X = 100;
const MIN_STAR_TRAVEL_Y = 100;
const Star = class {
  constructor() {
    this.size = this.random(MAX_STAR_SIZE, MIN_STAR_SIZE);
    this.x = this.random(
      sparkle.offsetWidth * 0.75,
      sparkle.offsetWidth * 0.25
    );
    this.y = sparkle.offsetHeight / 2 - this.size / 2;
    this.x_dir = this.randomMinus();
    this.y_dir = this.randomMinus();
    this.x_max_travel =
      this.x_dir === -1 ? this.x : sparkle.offsetWidth - this.x - this.size;
    this.y_max_travel = sparkle.offsetHeight / 2 - this.size;
    this.x_travel_dist = this.random(this.x_max_travel, MIN_STAR_TRAVEL_X);
    this.y_travel_dist = this.random(this.y_max_travel, MIN_STAR_TRAVEL_Y);
    this.x_end = this.x + this.x_travel_dist * this.x_dir;
    this.y_end = this.y + this.y_travel_dist * this.y_dir;
    this.life = this.random(MAX_STAR_LIFE, MIN_STAR_LIFE);
    this.star = document.createElement("div");
    this.star.classList.add("star");
    this.star.style.setProperty("--start-left", this.x + "px");
    this.star.style.setProperty("--start-top", this.y + "px");
    this.star.style.setProperty("--end-left", this.x_end + "px");
    this.star.style.setProperty("--end-top", this.y_end + "px");
    this.star.style.setProperty("--star-life", this.life + "s");
    this.star.style.setProperty("--star-life-num", this.life);
    this.star.style.setProperty("--star-size", this.size + "px");
    this.star.style.setProperty("--star-color", this.randomRainbowColor());
  }
  draw() {
    sparkle.appendChild(this.star);
  }
  pop() {
    sparkle.removeChild(this.star);
  }
  random(max, min) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  randomRainbowColor(){
    return "hsla("+this.random(360,0)+", 100%, 50%, 1)";
  }
  randomMinus() {
    return Math.random() >  0.5 ? 1 : -1;
  }
};
setInterval(() =>  {
  if (current_star_count > = MAX_STARS) {
    return;
  }
  current_star_count++;
  var newStar = new Star();
  newStar.draw();
  setTimeout(() =>  {
    current_star_count--;
    newStar.pop();
  }, newStar.life * 1000);
}, STAR_INTERVAL);