Fenêtre de préchargement de l'animation du compteur numérique lors du chargement de Javascript Html CSS

Question

Je souhaite créer une animation de compteur de nombres sur mon site portfolio. J'ai du code jquery dans mon ancien site Web qui passe du préchargeur au site Web lorsqu'il est complètement chargé.

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

Comment ajouter une animation de compteur de nombres et ajouter une transition latérale vers le haut ? Merci

Answer 1

Et voilà.

1. Annoncez le décompte.
2. Diminuez la valeur de comptage.
3. Basé sur la valeur du compteur slideUp您的div和删除Intervalle du compteur.

Exemple :

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