Issue
how to make the numbers change until the User stop on the page it stops
using html - css -js .
when we scroll the page the number of the visits starts to change until the User stop on the page the numbers change fast until the user stand on the section like this example preview.colorlib.com/theme/hospice/about.htm tell me : if it's better with another freamwork like react
Solution
I have made an example, you might like it
let a = 0;
$(window).scroll(function () {
let oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter').each(function () {
let $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
a = 1;
}
});
.text-center {
text-align: center;
}
.statistics {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
}
.statistics .stastic{text-align: center;background-color: bisque;}
.statistics .stastic h4{font-size: 24px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Document</title>
<style>
.text-center {
text-align: center;
}
.statistics {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
}
.statistics .stastic{text-align: center;background-color: bisque;}
.statistics .stastic h4{font-size: 24px;}
</style>
</head>
<body>
<p class="text-center">Scroll Down</p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<section id="counter" class="statistics">
<div class="stastic">
<h4 class="counter">500</h4>
<p>Projects Done</p>
</div>
<div class="stastic">
<h4 class="counter">10</h4>
<p>Years Experience</p>
</div>
<div class="stastic">
<h4 class="counter percent">100</h4>
<p>Success Rate</p>
</div>
</section>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
Answered By - Mahesh Prajapati
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.