How HTML5 SVG Realizes Star Rating Animation

How HTML5 SVG Realizes Star Rating Animation: BY Richard4 Nov,2020; Tags:
SVG

Introduction

Today I will share with you a more practical HTML5 star rating application. This rating application is different from the previous sharing. While we are scoring, Little Star will show different animation effects based on the results of the rating. In addition, this star rating animation also uses the animation features of SVG. If you are more familiar with svg, you can also modify more animation effects for rating results.

Instructions

HTML Body Code

<nav class="rating">
  <ul>
    <li class="current">
      <svg>
        <use xlink:href="#star"></use>
      </svg>
    </li>
    <li>
      <svg>
        <use xlink:href="#star"></use>
      </svg>
    </li>
    <li>
      <svg>
        <use xlink:href="#star"></use>
      </svg>
    </li>
    <li><span></span>
      <svg>
        <use xlink:href="#star"></use>
      </svg>
    </li>
    <li><span></span>
      <svg>
        <use xlink:href="#star"></use>
      </svg>
    </li>
  </ul>
  <div><span>
      <svg>
        <use xlink:href="#star"></use>
      </svg></span></div>
</nav>

Css Code

.rating {
  --active: #FFED76;
  --active-pale: rgba(255, 237, 118, .36);
  --inactive: #121621;
  --face-active: #121621;
  --face-inactive: #1C212E;
  display: flex;
  position: relative;
  margin: 50px 0;
}
@media (min-width: 600px) {
  .rating {
    zoom: 2;
  }
}
.rating ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  color: var(--inactive);
}
.rating ul li {
  --face: var(--face-inactive);
  cursor: pointer;
  position: relative;
}
.rating ul li:before, .rating ul li:after {
  content: '';
  position: absolute;
  z-index: 2;
  transition: all .2s ease;
}

Js Code

$('.rating ul li').on('click', function() {

    let li = $(this),
        ul = li.parent(),
        rating = ul.parent(),
        last = ul.find('.current');

    if(!rating.hasClass('animate-left') && !rating.hasClass('animate-right')) {

        last.removeClass('current');

        ul.children('li').each(function() {
            let current = $(this);
            current.toggleClass('active', li.index() > current.index());
        });

        rating.addClass(li.index() > last.index() ? 'animate-right' : 'animate-left');
        rating.css({
            '--x': li.position().left + 'px'
        });
        li.addClass('move-to');
        last.addClass('move-from');

        setTimeout(() => {
            li.addClass('current');
            li.removeClass('move-to');
            last.removeClass('move-from');
            rating.removeClass('animate-left animate-right');
        }, 800);
    }
})

VIEW NOW