M-011 Animation simple

How to create a count up numbers カウントアップの作り方

Animation that counts up from zero to a specified number. 指定した数値までゼロからカウントアップするアニメーション。

number counter animation stats

ライブデモ Live Demo

0 Users
0 Projects
0 Downloads (k)

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Animation that counts up from zero to a specified number.

指定した数値までゼロからカウントアップするアニメーション。

どこで使うかWhere to use

hero section, micro interaction, visual feedback, brand expression

実績セクション、ダッシュボード統計、KPIウィジェット、インフォグラフィック

特徴Key features

Animates numeric values from 0 to a target number with customizable easing. Uses requestAnimationFrame for smooth, performant counting. Supports integer and decimal values. Triggered by IntersectionObserver for scroll-based activation.

requestAnimationFrameでスムーズに0からターゲット数値へアニメーション。カスタマイズ可能なイージング付き。整数・小数に対応。IntersectionObserverでスクロールトリガー発火。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--count-color—Counter value color

実装コード Implementation Code 

<span class="counter" data-target="1000">0</span>

<script>
function animateValue(obj, start, end, duration) {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.innerHTML = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}
const obj = document.querySelector(".counter");
animateValue(obj, 0, 1000, 2000);
</script>
:root { --count-color: #5c6ac4; }
.counter { color: var(--count-color); font-variant-numeric: tabular-nums; font-weight: bold; }
import { useEffect, useState } from 'react';
import './M-011.css';

export default function CountUp({ end, duration = 2000 }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let startTime = null;
    let animationFrame;

    const step = (timestamp) => {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / duration, 1);
      // Ease out quart
      const ease = 1 - Math.pow(1 - progress, 4);
      setCount(Math.floor(ease * end));
      if (progress < 1) {
        animationFrame = requestAnimationFrame(step);
      } else {
        setCount(end);
      }
    };

    animationFrame = requestAnimationFrame(step);
    return () => cancelAnimationFrame(animationFrame);
  }, [end, duration]);

  return <span className="counter-value">{count}</span>;
}
/* M-011: React styles */
/* Uses tabular nums for stable width */
.counter-value {
  font-size: 48px;
  font-weight: 700;
  color: #5c6ac4;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A requestAnimationFrame loop calculates the current value using an easing function based on elapsed time vs total duration. The formula is: currentValue = start + (end - start) * easing(progress), where progress goes from 0 to 1. The value is formatted and written to the DOM element on each frame.

requestAnimationFrameループが経過時間と合計時間の比率に基づいてイージング関数で現在値を計算。計算式：currentValue = start + (end - start) × easing(progress)、progressは0から1へ。毎フレーム値をフォーマットしてDOM要素に書き込みます。

カスタマイズ方法Customization

Add a prefix ($ €) or suffix (%, k) by concatenating them during DOM update. Implement comma formatting with toLocaleString() for large numbers. Adjust duration for fast counters (1s) or dramatic slow reveals (3s). Change the easing function to linear for a uniform rate.

DOM更新時にプレフィックス（$、€）またはサフィックス（%、k）を連結して追加。大きな数値にはtoLocaleString()でカンマ区切りを実装。高速カウンター（1s）またはドラマチックな低速リビール（3s）にdurationを調整。均等な速度にするにはイージング関数をlinearに変更。

注意点Caveats

Provide the final static number as the default DOM content so users with JavaScript disabled see the correct value. Pause animation with prefers-reduced-motion and display the final value directly.

JavaScriptが無効な場合でも正しい値が表示されるよう、最終的な静的数値をデフォルトのDOMコンテンツとして提供してください。prefers-reduced-motionでアニメーションを停止し、最終値を直接表示してください。

よくある質問 Frequently Asked Questions

How to customize the count up numbers? Count Up Numbersをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the count up numbers in React? ReactでCount Up Numbersを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of count up numbers? Count Up Numbersのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.