js实现滚动数字变化动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现滚动数字变化动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&amp;family=Source+Sans+Pro:wght@400;700&amp;display=swap'>
  
<style>
.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  /* font matters a good deal here, esp the width of the numerals */
  font-family: "Source Sans Pro", serif;
}

.stat-figure {
  font-size: 3em;
  display: flex;
  font-weight: bold;
}

.stat-caption {
  text-align: center;
}

/* Demo styling only */

:root {
  --color-background: teal;
  --color-text: #f6fde1;
  --color-accent: #faff98;
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(30em, 100% - var(--gap) * 2);
  --popout: minmax(0, 3rem);
}

/* Forced reset */
*, *:before, *:after {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lora', serif;
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: clamp(1.125rem, 0.625vw + 0.875rem, 1.625rem);
  line-height: 1.25;
}

h1, h2, h3, h4 {
  color: var(--color-accent);
  font-family: 'Source Sans Pro', sans-serif;
}

.text-reverse {
  padding: 3ch;
  background-color: var(--color-text);
  color: var(--color-background);
  border-radius: 2ch;
}

/* Simple grid with popout */
.grid {
  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--full) [full-end];
}

.grid > * {
  grid-column: content;
}

.popout {
  grid-column: popout;
}

/* Simple vertical rhythm */
.flow > * + * {
  margin-top: var(--flow, 1em)
}

.flex {
  display: flex;
}

.gap {
  gap: 2ch;
}

.mb-10vh {
  margin-bottom: 10vh;
}
</style>




</head>

<body >
  <article class="grid flow mb-10vh">
  <h1>Animated Number Counter on Scroll w/Vanilla Javascript</h1>
  <div class="popout flow text-reverse">
    <p>These numbers will count up from 0 when they enter the viewport, making a small statement from an otherwise static number. This has a slight easing applied and will properly format decimals and commas thanks to .toLocaleString().</p>
  </div>

  <div class="flex gap popout" data-module="countup">
    <div class="stat text-reverse">
      <p class="stat-figure">
        <span class="stat-prefix">$</span>
        <span class="stat-number" data-countup-number="2.2">2.2</span>
        <span class="stat-suffix">B</span>
      </p>
      <p class="stat-caption">
        of cogs disseminated
      </p>
    </div>
    <div class="stat text-reverse">
      <p class="stat-figure">
        <span class="stat-prefix"></span>
        <span class="stat-number" data-countup-number="3,000">3,000</span>
        <span class="stat-suffix"></span>
      </p>
      <p class="stat-caption">
        wombats in your bathroom
      </p>
    </div>
    <div class="stat text-reverse">
      <p class="stat-figure">
        <span class="stat-prefix"></span>
        <span class="stat-number" data-countup-number="2">2</span>
        <span class="stat-suffix">%</span>
      </p>
      <p class="stat-caption">
        of people think cereal is soup
      </p>
    </div>
  </div>

  <p>And... now I have to fill a lot of space so there's enough vertical space to scroll. So here's an excerpt from Dr. Jekyll and Mr. Hyde:</p>

  <p>Between these two, I now felt I had to choose. My two natures had memory in common, but all other faculties were most unequally shared between them. Jekyll (who was composite) now with the most sensitive apprehensions, now with a greedy gusto, projected and shared in the pleasures and adventures of Hyde; but Hyde was indifferent to Jekyll, or but remembered him as the mountain bandit remembers the cavern in which he conceals himself from pursuit. Jekyll had more than a father’s interest; Hyde had more than a son’s indifference. To cast in my lot with Jekyll, was to die to those appetites which I had long secretly indulged and had of late begun to pamper. To cast it in with Hyde, was to die to a thousand interests and aspirations, and to become, at a blow and forever, despised and friendless. The bargain might appear unequal; but there was still another consideration in the scales; for while Jekyll would suffer smartingly in the fires of abstinence, Hyde would be not even conscious of all that he had lost. Strange as my circumstances were, the terms of this debate are as old and commonplace as man; much the same inducements and alarms cast the die for any tempted and trembling sinner; and it fell out with me, as it falls with so vast a majority of my fellows, that I chose the better part and was found wanting in the strength to keep to it.</p>

  <div class="flex gap popout" data-module="countup">
    <div class="stat text-reverse">
      <p class="stat-figure">
        <span class="stat-prefix"></span>
        <span class="stat-number" data-countup-number="10.3">10.3</span>
        <span class="stat-suffix">K</span>
      </p>
      <p class="stat-caption">
        Average distance to the coffee pot
      </p>
    </div>
    <div class="stat text-reverse">
      <p class="stat-figure">
        <span class="stat-prefix"></span>
        <span class="stat-number" data-countup-number="500,000">500,000</span>
        <span class="stat-suffix"></span>
      </p>
      <p class="stat-caption">
        bagels consumed in a week (by me)
      </p>
    </div>
  </div>

  <p>Yes, I preferred the elderly and discontented doctor, surrounded by friends and cherishing honest hopes; and bade a resolute farewell to the liberty, the comparative youth, the light step, leaping impulses and secret pleasures, that I had enjoyed in the disguise of Hyde. I made this choice perhaps with some unconscious reservation, for I neither gave up the house in Soho, nor destroyed the clothes of Edward Hyde, which still lay ready in my cabinet. For two months, however, I was true to my determination; for two months, I led a life of such severity as I had never before attained to, and enjoyed the compensations of an approving conscience. But time began at last to obliterate the freshness of my alarm; the praises of conscience began to grow into a thing of course; I began to be tortured with throes and longings, as of Hyde struggling after freedom; and at last, in an hour of moral weakness, I once again compounded and swallowed the transforming draught.</p>

  <p>I do not suppose that, when a drunkard reasons with himself upon his vice, he is once out of five hundred times affected by the dangers that he runs through his brutish, physical insensibility; neither had I, long as I had considered my position, made enough .........完整代码请登录后点击上方下载按钮下载查看