Tetingkap prapemuat animasi pembilang nombor apabila memuatkan Javascript Html CSS

Question

Saya ingin mencipta animasi pembilang nombor di laman web portfolio saya. Saya mempunyai beberapa kod jquery dalam laman web lama saya yang beralih daripada pramuat ke laman web apabila dimuatkan sepenuhnya.

<script>
  $(window).on('load', () => {
    $('#preloader').fadeOut(1800, function() {
      $(this).remove();
    });
  });
    </script>

Bagaimana untuk menambah animasi pembilang nombor dan menambah peralihan sisi atas? Terima kasih

Answer 1

Inilah.

1. Umumkan kiraan.
2. Kurangkan nilai kiraan.
3. Berdasarkan nilai pembilang slideUp您的div和删除Span pembilang.

Contoh:

$(window).on('load', () => {
  let count = 3;
  function ShowCounter() {
    if (count > 0) {
      $("#spnNumber").fadeOut('slow', function() {
        $("#spnNumber").text(count);
        $("#spnNumber").fadeIn();
        count--;
      });

    } else if (count == 0) {
      $("#preloader").slideUp();
      $("#spnNumber").remove();
      clearInterval(interval);

    }

  }
  var interval = setInterval(function() {
    ShowCounter()
  }, 1000)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='preloader'>Loading ... </div>
<span id='spnNumber'><span>