스크롤 이벤트 감지 + jquery + css

 .caritem{display:flex;align-items:end;flex-direction:column;background:#002DAC;padding:30px 0;padding-right:80px;margin:15px 0;max-width:500px;color:#fff;font-size:24px;border-radius:30px 0 0 30px;transition:all .5s}

.caritem.del{text-decoration:line-through;transform:rotate(-10deg);color:#220663}

.caritem.del:nth-child(2){transform:rotate(3deg)}

.caritem.del:nth-child(3){transform:rotate(-8deg)}

.caritem.del:nth-child(4){transform:rotate(3deg)}

.caritem span:nth-child(2){font-size:40px;font-weight:700}

<div class="caritem">

  <span>그랜져 3.5 가솔린 프리미엄</span>

  <span>3,990만원</span>

</div>




<div class="caritem">

  <span>그랜져 3.5 가솔린 프리미엄 등록세</span>

  <span>1,995,000원</span>

</div>




<div class="caritem">

  <span>그랜져 3.5 가솔린 프리미엄 취득세</span>

  <span>798,000원</span>

</div>




<div class="caritem">

  <span>그랜져 3.5 가솔린 프리미엄 보험료</span>

  <span>1,150,000원</span>

</div>

$(document).ready(function() {

  const $counters = $(".caritem");




  const exposurePercentage = 100;

  const loop = true;




  $(window).on('scroll',

  function() {

    $counters.each(function() {

      const $el = $(this);




      const rect = $el[0].getBoundingClientRect();

      const winHeight = window.innerHeight;

      const contentHeight = rect.bottom - rect.top;




      if (rect.top <= winHeight - (contentHeight * exposurePercentage / 100) && rect.bottom >= (contentHeight * exposurePercentage / 100)) {

        $el.addClass('del');

      }




      if (loop && (rect.bottom <= 0 || rect.top >= window.innerHeight)) {

        $el.removeClass('del');

      }

    });

  }).scroll();

});