Is there a way to create dynamic number changes when the user stops on a page using HTML, CSS, and JavaScript?
I'd like the numbers to change as the user scrolls through the page until they come to a stop. I want the numbers to update quickly while the user is moving but slow down when they pause in a section, similar to this example: preview.colorlib.com/theme/hospice/about.htm. Do you think it would be better to achieve this with a different framework such as React?
Check out the code snippet below for a cool example:
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>
<!-- Snippet with counter stats starts here -->
<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>
<!-- End of counter stats -->
<p class="text-center">Lorem Ipsum is simply dummy text...</p>
</body>
</html>I am currently developing an application that requires me to retrieve data from the backend containing a userdetail object. In my code, I need to set a current accessToken for the userdetail object: useEffect(() => { if (session?.user && ...
Using PHP to echo a JavaScript block, I have encountered an error message. echo "<script language='javascript' type='text/javascript'> jQuery(document).ready(function($){ var $lg = $('#mydiv'); ...
My container is structured like this with divisions: <div class="container-fluid"> <div class="row"> <div class="col-3"> sidebar </div> <div class="col-7"> top slider </div> <di ...
I'm having trouble with my CSS grid. The red section fits in the first square, but the rest of the content seems to be out of place in the grid. I'm new to all this and I can't figure out what I'm missing. I've tried everything but ...
After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size. In the code provided, the parent element has a fixed height and width, while the children a ...
Stepping outside of my comfort zone here and I'm pretty sure what I've come up with so far is totally off. Ajax is new to me and Google isn't making things any clearer, so I was hoping someone more knowledgeable could assist! Basically, I w ...
I am currently working on a project where I need to populate a dropdown menu based on the value selected from another dropdown. However, I am encountering an issue with the function that I am trying to call in the onChange event of the select tag. This is ...
Is it possible to eliminate extra space at the end of text using CSS (or possibly JS)? I've experimented with various display properties, but none seem to be effective. I need to dynamically insert a blink-div at the conclusion of a multi-line sentenc ...
I'm struggling with my JavaScript code that fetches images and displays them in a modal view when clicked. The issue I'm facing is that the image view only works for the second and other images, but not for the first one. I know there are issues ...
When using SAS to generate ODS output in HTML format, you have the option to include a table of contents with the "CONTENTS" and "FRAME" settings: ODS HTML PATH="C:\Path\" (url=none) BODY="body.html" CONTENTS="contents.html" ...
As I develop a local app on nw.js using angular.js, I'm starting to question my approach. In my controller, I often find myself writing code like this: .controller('UserSettingsCtrl', function($scope, $mdDialog, $translate) { var fs = ...
I am dealing with two different arrays. One array contains my data: var tab1 = ["one","two","three","four","five","six","seven","eight","nine","ten","eleven","twelve","thirteen","fourteen","fifteen","sixteen","seventeen","eighteen","nineteen","twenty"]; ...
As I work on my React.js app, I encountered an issue with hosting pdf files on Amplify. While everything runs smoothly on localhost/3000, allowing me to access and view the pdf files as desired either in a new tab or embedded with html, the same cannot be ...
I have a search field in my application that I want to duplicate. The goal is to create two identical search fields, one on the left side of the page and another on the right side. How can I achieve this using JavaScript? Here is my JavaScript code: doc ...
Having trouble with my Ajax calls. The first one works fine, but when it sends data to send_data.php, I encounter issues running Wordpress functions. After the data is sent to send_data.php, attempting to run a Wordpress function like add_post_meta(2, &ap ...
I am facing an issue with a button that I want to rotate upon mouse hover. The problem is, the rotation works perfectly when the mouse enters, but it continues spinning even after the mouse leaves. Here's the code snippet for better understanding: ...
I am working with a set of checkboxes like so: <input type='checkbox' name='name[]' value='1' /> <input type='checkbox' name='name[]' value='2' /> <input type='checkbox' ...
I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...
I am facing an issue with my Bootstrap navbar not displaying correctly within my Vue component. It is appearing as a stacked greyed out button, almost like it's assuming it's on a small device. https://i.sstatic.net/yoPvO.png You can find the c ...
Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...