I want to create a number counter animation on my portfolio website. I have some jquery code in my old website that transitions from the preloader to the website when fully loaded.
<script>
$(window).on('load', () => {
$('#preloader').fadeOut(1800, function() {
$(this).remove();
});
});
</script>
How to add number counter animation and add side to upward transition? Thanks
1
0
0
for you.
counter span based on the counter value slideUp of your div and . Example:
$(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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
