animated-numbers
Version:
A lean package for displaying animated numbers
43 lines (41 loc) • 1.45 kB
HTML
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body {
font-family: sans-serif;
}
.animated-number {
text-align: center;
}
.animated-number_number,
.animated-number_text
{
font-size: 24px;
}
.second {
margin-top: 1200px;
}
</style>
</head>
<body>
<div class="animated-number">
<div class="animated-number_number">
<span class="animated-number_number_nr">1009</span>
<span class="animated-number_number_unit">sheep</span>
</div>
<div class="animated-number_text">counted since page load</div>
</div>
<div class="animated-number second">
<div class="animated-number_number">
<span class="animated-number_number_nr">95,6</span>
<span class="animated-number_number_unit">%</span>
</div>
<div class="animated-number_text">counted since entering viewport</div>
</div>
<script type="text/javascript" src="./animated-numbers.js"></script>
</body>
</html>