載入 Javascript Html CSS 時的數位計數器動畫預載器窗口

Question

我想在我的作品集網站上創建一個數位計數器動畫。我的舊網站中有一些 jquery 程式碼，當完全載入時，它們會從預先載入器轉換到網站。

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

如何添加數位計數器動畫並添加側面向上過渡？ 謝謝

Answer 1

給你。

1. 宣布計數。
2. 減少計數值。
3. 根據計數器值slideUp您的div和刪除計數器跨度。

範例：

$(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>