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 circumsta.........完整代码请登录后点击上方下载按钮下载查看