【CSS/JS】ふわっと浮き出る星評価アニメーション

作るもの

評価 4.5

ソースコード

評価 4.5
<span class="star-rating" data-rating="4.5">
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
</span>

.star-rating {
  display: inline-flex;
}

.fa-star {
  color: #ccc;
}

.fa-star.active {
  color: orange;
}

.fa-star.star-half {
  background: linear-gradient(to right, orange 50%, #ccc 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-star:nth-child(1) {
  animation: fadeIn 1s ease-in-out;
}

.fa-star:nth-child(2) {
  animation: fadeIn 1s ease-in-out 0.2s;
}

.fa-star:nth-child(3) {
  animation: fadeIn 1s ease-in-out 0.4s;
}

.fa-star:nth-child(4) {
  animation: fadeIn 1s ease-in-out 0.6s;
}

.fa-star:nth-child(5) {
  animation: fadeIn 1s ease-in-out 0.8s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

  function setRating(starRating) {
    const stars = starRating.querySelectorAll('.fa-star');
    const rating = starRating.getAttribute('data-rating');
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 >= 0.5;
    const halfStar = stars[fullStars];

    stars.forEach((star, index) => {
      if (index < fullStars) {
        star.classList.add('active');
      } else {
        star.classList.remove('active');
      }
    });

    if (hasHalfStar) {
      halfStar.classList.add('star-half');
    }
  }

  function setAllRating() {
    const starRatings = document.querySelectorAll('.star-rating');
    starRatings.forEach((starRating) => {
      setRating(starRating);
    });
  }