@teamthunderfoot/counter-animation
Version:
Counter Animation package
76 lines (75 loc) • 3.22 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./dist/main.css" />
<title>Counter Animation - By Thunderfoot</title>
</head>
<body>
<h1 class="title">Counter Animation - By Thunderfoot</h1>
<section>
<h2>Example 1:</h2>
<h3>No HTML attributes</h3>
<h3>JS Class Configuration options:</h3>
<ul>
<li>elements: document.querySelectorAll(".example-1")</li>
<li>regionFormat: "en-US"</li>
<li>duration: 1</li>
<li>scrollStart: "center"</li>
</ul>
<code>
document.querySelectorAll(".example-1").forEach((element) => {<br />
  new CounterAnimation({<br />
    element: element,<br />
    regionFormat: "en-US",<br />
    separator: ",",<br />
    duration: 1.5,<br />
    scrollStart: "center",<br />
  });<br />
});<br />
</code>
<div class="count-wrapper">
<p class="example-1">20,000M invested</p>
<p class="example-1">20,000,000 houses protected</p>
</div>
</section>
<div class="separator"></div>
<section>
<h2>Example 2:</h2>
<h3>HTML attributes</h3>
<ul>
<li>first number (20.000) → data-counter-duration="5"</li>
<li>second number (20.000.000) → data-counter-duration="3"</li>
</ul>
<h3>JS Class Configuration options:</h3>
<ul>
<li>elements: document.querySelectorAll(".example-2")</li>
<li>regionFormat: "es-ES"</li>
<li>separator: "."</li>
</ul>
<code>
document.querySelectorAll(".example-1").forEach((element) => {<br />
  new CounterAnimation({<br />
    element: element,<br />
    regionFormat: "es-ES",<br />
    separator: ".",<br />
  });<br />
});<br />
</code>
<div class="count-wrapper">
<p class="example-2" data-counter-duration="5">20.000$</p>
<p class="example-2" data-counter-duration="3">20.000.000$ inverted</p>
</div>
</section>
<div class="separator"></div>
<script src="./dist/main.js"></script>
</body>
</html>