Repository: HubSpot/odometer
Branch: master
Commit: 0bc5470eeb82
Files: 36
Total size: 136.1 KB
Directory structure:
gitextract_8qn065oo/
├── .gitignore
├── .hsdoc
├── Gruntfile.coffee
├── LICENSE
├── README.md
├── bower.json
├── component.json
├── config.rb
├── docs/
│ ├── api/
│ │ └── themes.md
│ ├── intro.md
│ └── welcome/
│ ├── index.html
│ ├── landing-page.coffee
│ ├── landing-page.css
│ ├── landing-page.js
│ ├── onepage-scroll.css
│ └── onepage-scroll.js
├── odometer.coffee
├── odometer.js
├── package.json
├── sass/
│ ├── _mixins.sass
│ ├── odometer-theme-car.sass
│ ├── odometer-theme-default.sass
│ ├── odometer-theme-digital.sass
│ ├── odometer-theme-minimal.sass
│ ├── odometer-theme-plaza.sass
│ ├── odometer-theme-slot-machine.sass
│ └── odometer-theme-train-station.sass
├── test/
│ ├── demo.html
│ └── performance.html
└── themes/
├── odometer-theme-car.css
├── odometer-theme-default.css
├── odometer-theme-digital.css
├── odometer-theme-minimal.css
├── odometer-theme-plaza.css
├── odometer-theme-slot-machine.css
└── odometer-theme-train-station.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
.sass-cache/
================================================
FILE: .hsdoc
================================================
title: "Odometer"
source: "odometer.coffee"
examples: "**/*.md"
assets: "{docs/welcome/*,odometer.js,themes/*}"
================================================
FILE: Gruntfile.coffee
================================================
Path = require('path')
fs = require('fs')
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON("package.json")
coffee:
compile:
files:
'odometer.js': 'odometer.coffee'
'docs/welcome/landing-page.js': 'docs/welcome/landing-page.coffee'
watch:
coffee:
files: ['odometer.coffee', 'docs/welcome/landing-page.coffee', 'sass/*']
tasks: ["coffee", "uglify", "compass"]
uglify:
options:
banner: "/*! <%= pkg.name %> <%= pkg.version %> */\n"
dist:
src: 'odometer.js'
dest: 'odometer.min.js'
compass:
dist:
options:
sassDir: 'sass'
cssDir: 'themes'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.loadNpmTasks 'grunt-contrib-uglify'
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-compass'
grunt.registerTask 'default', ['coffee', 'uglify', 'compass']
================================================
FILE: LICENSE
================================================
Copyright (c) 2013 HubSpot, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
Odometer
========
Odometer is a Javascript and CSS library for smoothly transitioning numbers.
### [Overview](http://github.hubspot.com/odometer/docs/welcome)
### [Docs and Demo](http://github.hubspot.com/odometer)
================================================
FILE: bower.json
================================================
{
"name": "odometer",
"main": "odometer.js",
"version": "0.4.8",
"homepage": "http://github.hubspot.com/odometer/docs/welcome",
"authors": [
"Zack Bloom <zbloom@hubspot.com>",
"Adam Schwartz <aschwartz@hubspot.com>"
],
"description": "Transition numbers with ease",
"keywords": [
"odometer",
"car",
"number",
"transition",
"animation",
"slot",
"machine",
"turnstile",
"javascript",
"client-side"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
]
}
================================================
FILE: component.json
================================================
{
"name": "odometer",
"version": "0.4.8",
"repo": "hubspot/odometer",
"description": "Transition numbers with ease",
"keywords": [
"odometer",
"car",
"number",
"transition",
"animation",
"slot",
"machine",
"turnstile",
"javascript",
"client-side"
],
"styles": ["themes/odometer-theme-default.css"],
"scripts": [
"odometer.js"
]
}
================================================
FILE: config.rb
================================================
preferred_syntax = :sass
css_dir = './themes'
sass_dir = './sass'
output_style = :expanded
environment = :production
================================================
FILE: docs/api/themes.md
================================================
## Themes
To use a builtin theme, simply include the theme style sheet:
```html
<link rel="stylesheet" href="odometer-theme-default.css" />
```
<table class="hs-table">
<tr>
<th>Name</th>
<th>Theme</th>
<th></th>
</tr>
<tbody>
<tr><td>Default</td><td><a href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-default.css">`default`</a></td><td><div class="odometer-theme-example"><div data-theme="default"><div></div></td></tr>
<tr><td>Minimal</td><td><a href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-minimal.css">`minimal`</a></td><td><div class="odometer-theme-example"><div data-theme="minimal"><div></div></td></tr>
<tr><td>Car</td><td><a href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-car.css">`car`</a></td><td><div class="odometer-theme-example"><div data-theme="car"><div></div></td></tr>
<tr><td>Plaza</td><td><a href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-plaza.css">`plaza`</a></td><td><div class="odometer-theme-example"><div data-theme="plaza"><div></div></td></tr>
<tr><td>Slot Machine</td><td><a href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-slot-machine.css">`slot-machine`</a></td><td><div class="odometer-theme-example"><div data-theme="slot-machine"><div></div></td></tr>
<tr><td>Train Station</td><td><a href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-train-station.css">`train-station`</a></td><td><div class="odometer-theme-example"><div data-theme="train-station"><div></div></td></tr>
<tr><td>Digital</td><td><a href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-digital.css">`digital`</a></td><td><div class="odometer-theme-example"><div data-theme="digital"><div></div></td></tr>
</tbody>
</table>
### Multiple Themes on One Page
If you need to use multipled Odometer themes on a single page, do the following.
```javascript
odometerOptions = { auto: false }; // Disables auto-initialization
// For each odometer, initialize with the theme passed in:
var odometer = new Odometer({ el: $('.odometer')[0], value: 123, theme: 'car' });
odometer.render();
```
<!-- Resources for the demos -->
<p style="-webkit-transform: translateZ(0)"></p>
<link rel="stylesheet" href="/odometer/themes/odometer-theme-minimal.css" />
<script>
odometerOptions = { auto: false };
</script>
<style>
.odometer-theme-example {
font-size: 40px;
line-height: 60px;
}
</style>
<link rel="stylesheet" href="/odometer/themes/odometer-theme-default.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-car.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-slot-machine.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-plaza.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-train-station.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-digital.css" />
<script src="/odometer/odometer.js"></script>
<script>
(function(){
$('[data-theme]').each(function(){
var v = 123456;
var o = new Odometer({
el: this,
value: 123456,
theme: $(this).data('theme')
});
o.render();
setInterval(function(){
o.update(v++);
}, 3000);
});
})();
</script>
================================================
FILE: docs/intro.md
================================================
Odometer
========
<style>
.odometer-github-stars {
margin-bottom: 6px;
}
.odometer-github-stars .odometer-label {
background: #eee;
display: inline-block;
padding: 15px 13px 13px;
line-height: 1;
vertical-align: middle;
border-radius: 4px 0 0 4px;
}
.odometer-github-stars .odometer {
background: #444;
color: #fff;
padding: 13px 21px 11px;
margin: auto;
line-height: 1 !important;
border-radius: 0 4px 4px 0;
}
.odometer-github-stars + p {
display: none;
}
.odometer-subtitle {
padding-left: 13px;
opacity: 0.7;
}
.odometer.odometer-theme-car {
font-size: 80px;
line-height: 100px;
}
</style>
<link rel="stylesheet" href="/odometer/themes/odometer-theme-minimal.css" />
<script>
odometerOptions = { auto: false };
</script>
<link rel="stylesheet" href="/odometer/themes/odometer-theme-car.css" />
<script src="odometer.js"></script>
<script>
$(function(){
var starsOdometer = new Odometer({ el: $('.odometer-github-stars .odometer')[0], theme: 'minimal', value: '0' });
starsOdometer.render()
var exampleOdometerValue = 123456;
var exampleOdometer = new Odometer({ el: $('.odometer-example')[0], theme: 'car', value: exampleOdometerValue });
exampleOdometer.render()
setInterval(function(){
exampleOdometer.update(exampleOdometerValue++);
}, 3000);
var i = 0;
var update = function() {
$.ajax("https://api.github.com/repos/HubSpot/odometer", {
cache: false,
success: function(data){
if (data.watchers_count)
starsOdometer.update(data.watchers_count);
},
complete: function(xhr){
remaining = xhr.getResponseHeader('X-RateLimit-Remaining');
setTimeout(update, 1000 * (4 + Math.pow(1.1, (60 - remaining))));
}
});
};
setInterval(function(){
// Github's limits reset every hour
i = 0;
}, 3600*1000);
setTimeout(update, 1000);
});
</script>
<h3 class="odometer-github-stars"><span class="odometer-label">GitHub ★ s so far:</span><div class="odometer">0</div></h3>
<div class="odometer-subtitle"><a href="http://github.com/HubSpot/odometer" target="_blank">Star odometer</a> on GitHub to to see it update.</div>
Odometer is a Javascript and CSS library for smoothly transitioning numbers.
See the [demo page](http://github.hubspot.com/odometer/docs/welcome) for some examples.
Odometer's animations are handled entirely in CSS using transforms making
them extremely performant, with automatic fallback on older browsers.
The library and largest theme is less than 3kb when minified and compressed.
All of [the themes](http://github.hubspot.com/odometer/api/themes/) can be resized by setting the `font-size` of the `.odometer` element.
Usage
-----
**The simplest possible usage is just including [the javascript](https://raw.github.com/HubSpot/odometer/v0.4.8/odometer.min.js) and a [theme css](http://github.hubspot.com/odometer/api/themes/)
file on your page. Add the `odometer` class to any numbers you'd like to animate on change. You're done.**
Just set the `innerHTML`, `innerText`, or use jQuery's `.text()` or `.html()` methods to change their contents, and the animation
will happen automatically. Any libraries you're using to update their value, provided they don't update by erasing and rerendering
the `odometer` element, will work just fine.
On older browsers, it will automatically fallback to a simpler animation which won't tax their fragile javascript runtime.
Example
-------
<div class="odometer odometer-theme-car odometer-example">123</div>
Play with this simple example on [jsFiddle](http://jsfiddle.net/adamschwartz/rx6BQ/).
Advanced
--------
You can set options by creating a `odometerOptions` object:
```javascript
window.odometerOptions = {
auto: false, // Don't automatically initialize everything with class 'odometer'
selector: '.my-numbers', // Change the selector used to automatically find things to be animated
format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
duration: 3000, // Change how long the javascript expects the CSS animation to take
theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
animation: 'count' // Count is a simpler animation method which just increments the value,
// use it when you're looking for something more subtle.
};
```
You can manually initialize an odometer with the global `Odometer`:
```javascript
var el = document.querySelector('.some-element');
od = new Odometer({
el: el,
value: 333555,
// Any option (other than auto and selector) can be passed in here
format: '',
theme: 'digital'
});
od.update(555)
// or
el.innerHTML = 555
```
Format
------
The format option allows you to configure how the digit groups are formatted,
and how many digits are shown after the decimal point.
Format - Example
(,ddd) - 12,345,678
(,ddd).dd - 12,345,678.09
(.ddd),dd - 12.345.678,09
( ddd),dd - 12 345 678,09
d - 12345678
Browser Support
---------------
Odometer is intended to support IE8+, FF4+, Safari 6+, and Chrome.
Dependencies
------------
None!
Contributing
------------
Odometer is built using Grunt. To setup the build environment you first
must have Node.js installed. Then:
```bash
# In the project directory
npm install
```
To build the project:
```bash
grunt
```
To have it watch for changes and build automatically:
```bash
grunt watch
```
We welcome pull requests!
================================================
FILE: docs/welcome/index.html
================================================
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie9-and-less ie8-and-less" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 ie9-and-less" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Odometer — Transition numbers with ease</title>
<meta name="description" content="Odometer is a Javascript and CSS library for smoothly transitioning numbers. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).">
<link rel="icon" href="http://static.hubspot.com/favicon.ico">
<script type="text/javascript" src="//use.typekit.net/jbn8qxr.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="/odometer/themes/odometer-theme-minimal.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-default.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-digital.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-car.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-train-station.css" />
<link rel="stylesheet" href="/odometer/themes/odometer-theme-slot-machine.css" />
<link rel="stylesheet" href="onepage-scroll.css" />
<link rel="stylesheet" href="landing-page.css" />
</head>
<body>
<div class="main">
<div class="section number-section title-number-section">
<div class="number-container">
<div class="odometer-container">
<div class="odometer odometer-theme-minimal odometer-theme-odometer">
<span class="odometer-digit"><span class="odometer-digit-spacer">O</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value odometer-last-value">O</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">D</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">Z</span>
<span class="odometer-value">A</span>
<span class="odometer-value">B</span>
<span class="odometer-value">C</span>
<span class="odometer-value odometer-last-value">D</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">O</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">I</span>
<span class="odometer-value">J</span>
<span class="odometer-value">K</span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value odometer-last-value">O</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">M</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">G</span>
<span class="odometer-value">H</span>
<span class="odometer-value">I</span>
<span class="odometer-value">J</span>
<span class="odometer-value">K</span>
<span class="odometer-value">L</span>
<span class="odometer-value odometer-last-value">M</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">E</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">Y</span>
<span class="odometer-value">Z</span>
<span class="odometer-value">A</span>
<span class="odometer-value">B</span>
<span class="odometer-value">C</span>
<span class="odometer-value">D</span>
<span class="odometer-value odometer-last-value">E</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">T</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value">N</span>
<span class="odometer-value">O</span>
<span class="odometer-value">P</span>
<span class="odometer-value">Q</span>
<span class="odometer-value">R</span>
<span class="odometer-value">S</span>
<span class="odometer-value odometer-last-value">T</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">E</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">V</span>
<span class="odometer-value">W</span>
<span class="odometer-value">X</span>
<span class="odometer-value">Y</span>
<span class="odometer-value">Z</span>
<span class="odometer-value">A</span>
<span class="odometer-value">B</span>
<span class="odometer-value">C</span>
<span class="odometer-value">D</span>
<span class="odometer-value odometer-last-value">E</span>
</span></span></span></span>
<span class="odometer-digit"><span class="odometer-digit-spacer">R</span><span class="odometer-digit-inner"><span class="odometer-ribbon"><span class="odometer-ribbon-inner">
<span class="odometer-value odometer-first-value"> </span>
<span class="odometer-value">G</span>
<span class="odometer-value">H</span>
<span class="odometer-value">I</span>
<span class="odometer-value">J</span>
<span class="odometer-value">K</span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value">O</span>
<span class="odometer-value">P</span>
<span class="odometer-value">Q</span>
<span class="odometer-value odometer-last-value">R</span>
</span></span></span></span>
</div>
</div>
<div class="number-description">
Transition numbers with ease<br/>
<a class="button dark-button" href="http://github.hubspot.com/odometer">Docs</a>
<a class="button" href="http://github.com/HubSpot/odometer">★ On Github</a>
</div>
</div>
<div class="down-arrow" title="Scroll down to learn more"></div>
</div>
<div class="after-number-sections"></div>
<div class="section">
<div class="about-section">
<h1>How To Use</h1>
<p>Add the <a href="https://raw.github.com/HubSpot/odometer/v0.4.8/odometer.min.js">js</a> and a <a href="http://github.hubspot.com/odometer/api/themes/">theme file</a> to your page:</p>
<pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>odometer-theme-car.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>odometer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span></code></pre>
<p>Any element with class name "odometer" will automatically be made into an Odometer! When you want to update the value, simply update it the same way you normally would.</p>
<pre class=" language-javascript"><code class=" language-javascript">element<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token number">123</span><span class="token comment" spellcheck="true"> // Native, or...
</span>$<span class="token punctuation">(</span><span class="token string">'.odometer'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html<span class="token punctuation">(</span></span><span class="token number">123</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true"> // with jQuery</span></code></pre>
<center><a class="button" href="http://github.com/HubSpot/odometer">★ On Github</a></center>
</div>
</div>
<div class="section">
<div class="about-section">
<h1>About</h1>
<p>Odometer was made by <a href="https://twitter.com/adamfschwartz">Adam Schwartz</a> and <a href="https://twitter.com/zackbloom">Zack Bloom</a> of <a href="http://dev.hubspot.com/">HubSpot</a>.</p>
<center><a class="button" href="http://github.com/HubSpot/odometer">★ On Github</a></center>
</div>
</div>
<div class="template section number-section">
<div class="number-container">
<div class="odometer-container"></div>
<a target="_blank" class="number-source">
<div class="number-description"></div><br/>
<div class="number-detail"></div>
</a>
</div>
<div class="down-arrow" title="Scroll down to learn more"></div>
</div>
</div>
<script>odometerOptions = {auto: false};</script>
<script src="/odometer/odometer.js"></script>
<script src="onepage-scroll.js"></script>
<script src="landing-page.js"></script>
<!-- Share -->
<div id="retweet_button" class="social-sharing-wrapper">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://github.hubspot.com/odometer/docs/welcome" data-text="odometer.js - Transition numbers with ease" data-count="horizontal" data-via="HubSpotDev">Tweet</a>
<script>
if (Math.random() >= 0.5)
var recommends = ['hubspotdev', 'zackbloom', 'adamfschwartz'];
else
var recommends = ['hubspotdev', 'adamfschwartz', 'zackbloom'];
var $button = $('.twitter-share-button');
if ($button.length)
$button.data('related', recommends.join(','));
</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div id="github_stars" class="social-sharing-wrapper">
<iframe src="http://ghbtns.com/github-btn.html?user=HubSpot&repo=odometer&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="200" height="20"></iframe>
</div>
<!-- Start of Async HubSpot Analytics Code -->
<script type="text/javascript">
(function(d,s,i,r) {
if (d.getElementById(i)){return;}
var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js';
e.parentNode.insertBefore(n, e);
})(document,"script","hs-analytics",300000);
</script>
<!-- End of Async HubSpot Analytics Code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45159009-1', 'hubspot.com');
ga('send', 'pageview');
</script>
<!-- Force 3d acceleration always and forever :) -->
<div style="-webkit-transform: translateZ(0)"></div>
</body>
</html>
================================================
FILE: docs/welcome/landing-page.coffee
================================================
THEMES = [{
name: 'minimal'
numbers: [{
number: 10000
description: '= 28<sup>2</sup> + 96<sup>2</sup> = 60<sup>2</sup> + 80<sup>2</sup>'
detail: 'two sums of two squares'
source: 'http://www.wolframalpha.com/input/?i=10000'
}, {
number: 99999
description: '<span class=\'equals\'>=</span> <span class=\'number\'>11000011010011111</span><sub>2</sub>'
detail: '11000011010011111 in base 2'
source: 'http://www.wolframalpha.com/input/?i=99999'
}]
}, {
name: 'car'
odometerOptions:
format: 'd'
numbers: [{
number: 13476
description: 'miles driven'
detail: 'by the average american each year'
source: 'http://www.fhwa.dot.gov/ohim/onh00/bar8.htm'
}, {
number: 25114
description: 'flat tires'
detail: 'occur in america each hour'
source: 'http://excelmathmike.blogspot.com/2011/04/phooey-on-flats-part-i.html'
}]
}, {
name: 'digital'
odometerOptions:
format: 'd'
numbers: [{
number: 87360
description: 'minutes of tv watched'
detail: 'by the average american each year'
source: 'http://www.nationmaster.com/graph/med_tel_vie-media-television-viewing'
}, {
number: 20938
description: 'minutes snoozed'
detail: 'by the average american each year'
source: 'http://jsfiddle.net/adamschwartz/BWgWj/show/light/'
}]
}, {
name: 'slot-machine'
numbers: [{
number: 818
description: ''
detail: ''
source: ''
}, {
number: 777
description: ''
detail: ''
source: ''
}]
}, {
name: 'train-station'
numbers: [{
number: 682
description: 'train cars'
detail: 'on the longest train in the world'
source: 'http://en.wikipedia.org/wiki/Longest_trains'
}, {
number: 853
description: 'people'
detail: 'capacity of the largest commercial airplane'
source: 'http://en.wikipedia.org/wiki/Airbus_A380'
}]
}]
animateHeader = ->
$('.title-number-section .odometer').addClass 'odometer-animating-up odometer-animating'
setupOnePageScroll = ->
$ ->
$('.main').onepage_scroll
sectionContainer: '.section'
$('.down-arrow').click -> $('.main').moveDown()
$(document).keydown (e) ->
switch e.keyCode
when 40, 34 then $('.main').moveDown()
when 33, 38 then $('.main').moveUp()
setupNumberSections = ->
$afterSections = $('.after-number-sections')
$numberSectionTemplate = $('.number-section.template')
$numberSectionTemplateClone = $numberSectionTemplate.clone().removeClass('template')
_.each THEMES, (theme) ->
$section = $numberSectionTemplateClone.clone().addClass('number-section-theme-' + theme.name)
$afterSections.before $section
$odometerContainer = $section.find '.odometer-container'
$odometerContainer.append('<div/>')
$odometerContainer = $odometerContainer.find('div')
currentNumber = 0
odometerOptions = $.extend(true, {}, theme.odometerOptions or {},
theme: theme.name
value: theme.numbers[1].number
el: $odometerContainer[0]
)
odometer = new Odometer odometerOptions
odometer.render()
next = ->
number = theme.numbers[currentNumber]
odometer.update number.number
$section.find('.number-description').html number.description
$section.find('.number-detail').html number.detail
$section.find('.number-source').attr 'href', number.source
currentNumber = (currentNumber + 1) % theme.numbers.length
next()
setInterval ->
next() if $section.hasClass('active')
, 4 * 1000
$afterSections.remove()
$numberSectionTemplate.remove()
init = ->
setupNumberSections()
setupOnePageScroll()
setTimeout ->
animateHeader()
, 500
init()
================================================
FILE: docs/welcome/landing-page.css
================================================
/* Prism.js */
code[class*="language-"], pre[class*="language-"] {color: black; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {text-shadow: none; background: #b3d4fc; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection {text-shadow: none; background: #b3d4fc; } @media print {code[class*="language-"], pre[class*="language-"] {text-shadow: none; } } /* Code blocks */ pre[class*="language-"] {padding: 1em; margin: .5em 0; overflow: auto; font-size: .7em; } :not(pre) > code[class*="language-"], pre[class*="language-"] {background: #f5f2f0; } /* Inline code */ :not(pre) > code[class*="language-"] {padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata {color: slategray; } .token.punctuation {color: #999; } .namespace {opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {color: #905; } .token.selector, .token.attr-name, .token.string, .token.builtin {color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {color: #a67f59; background: hsla(0,0%,100%,.5); } .token.atrule, .token.attr-value, .token.keyword {color: #07a; } .token.regex, .token.important {color: #e90; } .token.important {font-weight: bold; } .token.entity {cursor: help; }
html, body {
height: 100%;
margin: 0;
}
html { font-size: 150%; }
@media (max-width: 1200px) { html { font-size: 125%; } }
@media (max-width: 1000px) { html { font-size: 100%; } }
@media (max-width: 767px) { html { font-size: 80%; } }
@media (max-width: 568px) { html { font-size: 50%; } }
@media (max-width: 480px) { html { font-size: 35%; } }
@media (max-width: 320px) { html { font-size: 25%; } }
body {
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
}
.template {
display: none;
}
.section {
height: 100%;
width: 100%;
position: relative;
-webkit-transform: translateZ(0);
}
.number-container, .about-section {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 20em;
text-align: center;
-webkit-transform: translateZ(0);
}
.about-section {
font-size: 1em;
text-align: left;
width: 30em;
height: 22em;
max-width: 80%;
}
.about-section h1 {
margin-top: 0;
text-align: center;
}
.about-section a {
color: inherit;
}
.number-container .odometer-container {
font-size: 6em;
}
.number-description {
display: inline-block;
text-transform: uppercase;
font-size: 2.5em;
letter-spacing: .08em;
margin: 1em 0 0;
font-weight: bold;
}
.number-detail {
display: inline-block;
text-transform: uppercase;
font-size: 1.5em;
letter-spacing: .08em;
opacity: 0.5;
}
.title-number-section .number-container .odometer-container {
font-size: 4em;
}
.title-number-section .number-description {
font-size: 1.55em;
margin: .5em 0 .25em;
color: #666;
}
@media (max-width: 767px) {
.title-number-section .number-container .odometer-container {
font-size: 5em;
}
.title-number-section .number-description {
font-size: 1.8em
}
}
@media (max-width: 568px) {
.title-number-section .number-container .odometer-container {
font-size: 6em;
}
.title-number-section .number-description {
font-size: 2.2em;
}
}
.button {
text-decoration: none;
color: #000;
font-size: 0.7em;
padding: .3em .7em .4em;
cursor: pointer;
margin: 2em auto;
border: .15em solid;
display: inline-block;
line-height: 1.7;
}
.dark-button {
color: white;
background-color: #222;
}
.number-source {
text-decoration: none;
color: inherit;
}
.number-source:hover .number-detail {
border-bottom: 1px dotted;
opacity: 0.8;
}
.number-section.number-section-theme-minimal {
background: #eee;
color: #444;
}
.number-section.number-section-theme-minimal .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
text-align: right;
}
.number-section.number-section-theme-digital .odometer {
border: .1em solid rgba(139, 245, 165, 0.4);
}
.number-section.number-section-theme-digital {
background: #000;
color: #8bf5a5;
}
.number-section.number-section-theme-car {
background: #eee0d3;
color: #333;
}
.number-section.number-section-theme-train-station {
background: #ccc;
color: #000;
}
.number-section.number-section-theme-slot-machine {
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #000000), color-stop(2%, #000000), color-stop(2%, #ffa500), color-stop(50%, #ffe000), color-stop(98%, #ffa500), color-stop(98%, #000000), color-stop(100%, #000000));
background-image: -webkit-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
background-image: -moz-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
background-image: -o-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
background-image: -ms-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
background-image: linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
background-size: 31em 100%;
background-repeat: no-repeat;
background-position: center;
color: #000;
}
.odometer.odometer-theme-odometer {
line-height: 2em;
}
.odometer-theme-odometer:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: .1em;
background: #000;
}
.odometer-theme-odometer:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: .1em;
background: #000;
}
.odometer-theme-odometer .odometer-value {
width: 100%;
text-align: center;
}
.down-arrow {
position: absolute;
cursor: pointer;
margin: auto;
display: block;
left: 0;
right: 0;
font-size: 2em;
bottom: 1em;
height: 1em;
width: 1em;
text-align: center;
opacity: 0.5;
-webkit-transform: translateZ(0);
}
.down-arrow:hover {
opacity: 1;
}
.down-arrow:before {
content: "\2193";
display: block;
}
/* Social sharing */
#retweet_button {
position: fixed;
bottom: 30px;
left: 30px;
width: 100px;
z-index: 3;
}
#github_stars {
position: fixed;
bottom: 30px;
left: 130px;
width: 100px;
z-index: 3;
}
.social-sharing-wrapper { -webkit-filter: grayscale(1) contrast(1.3); }
.social-sharing-wrapper:hover { -webkit-filter: none; }
================================================
FILE: docs/welcome/landing-page.js
================================================
(function() {
var THEMES, animateHeader, init, setupNumberSections, setupOnePageScroll;
THEMES = [
{
name: 'minimal',
numbers: [
{
number: 10000,
description: '= 28<sup>2</sup> + 96<sup>2</sup> = 60<sup>2</sup> + 80<sup>2</sup>',
detail: 'two sums of two squares',
source: 'http://www.wolframalpha.com/input/?i=10000'
}, {
number: 99999,
description: '<span class=\'equals\'>=</span> <span class=\'number\'>11000011010011111</span><sub>2</sub>',
detail: '11000011010011111 in base 2',
source: 'http://www.wolframalpha.com/input/?i=99999'
}
]
}, {
name: 'car',
odometerOptions: {
format: 'd'
},
numbers: [
{
number: 13476,
description: 'miles driven',
detail: 'by the average american each year',
source: 'http://www.fhwa.dot.gov/ohim/onh00/bar8.htm'
}, {
number: 25114,
description: 'flat tires',
detail: 'occur in america each hour',
source: 'http://excelmathmike.blogspot.com/2011/04/phooey-on-flats-part-i.html'
}
]
}, {
name: 'digital',
odometerOptions: {
format: 'd'
},
numbers: [
{
number: 87360,
description: 'minutes of tv watched',
detail: 'by the average american each year',
source: 'http://www.nationmaster.com/graph/med_tel_vie-media-television-viewing'
}, {
number: 20938,
description: 'minutes snoozed',
detail: 'by the average american each year',
source: 'http://jsfiddle.net/adamschwartz/BWgWj/show/light/'
}
]
}, {
name: 'slot-machine',
numbers: [
{
number: 818,
description: '',
detail: '',
source: ''
}, {
number: 777,
description: '',
detail: '',
source: ''
}
]
}, {
name: 'train-station',
numbers: [
{
number: 682,
description: 'train cars',
detail: 'on the longest train in the world',
source: 'http://en.wikipedia.org/wiki/Longest_trains'
}, {
number: 853,
description: 'people',
detail: 'capacity of the largest commercial airplane',
source: 'http://en.wikipedia.org/wiki/Airbus_A380'
}
]
}
];
animateHeader = function() {
return $('.title-number-section .odometer').addClass('odometer-animating-up odometer-animating');
};
setupOnePageScroll = function() {
return $(function() {
$('.main').onepage_scroll({
sectionContainer: '.section'
});
$('.down-arrow').click(function() {
return $('.main').moveDown();
});
return $(document).keydown(function(e) {
switch (e.keyCode) {
case 40:
case 34:
return $('.main').moveDown();
case 33:
case 38:
return $('.main').moveUp();
}
});
});
};
setupNumberSections = function() {
var $afterSections, $numberSectionTemplate, $numberSectionTemplateClone;
$afterSections = $('.after-number-sections');
$numberSectionTemplate = $('.number-section.template');
$numberSectionTemplateClone = $numberSectionTemplate.clone().removeClass('template');
_.each(THEMES, function(theme) {
var $odometerContainer, $section, currentNumber, next, odometer, odometerOptions;
$section = $numberSectionTemplateClone.clone().addClass('number-section-theme-' + theme.name);
$afterSections.before($section);
$odometerContainer = $section.find('.odometer-container');
$odometerContainer.append('<div/>');
$odometerContainer = $odometerContainer.find('div');
currentNumber = 0;
odometerOptions = $.extend(true, {}, theme.odometerOptions || {}, {
theme: theme.name,
value: theme.numbers[1].number,
el: $odometerContainer[0]
});
odometer = new Odometer(odometerOptions);
odometer.render();
next = function() {
var number;
number = theme.numbers[currentNumber];
odometer.update(number.number);
$section.find('.number-description').html(number.description);
$section.find('.number-detail').html(number.detail);
$section.find('.number-source').attr('href', number.source);
return currentNumber = (currentNumber + 1) % theme.numbers.length;
};
next();
return setInterval(function() {
if ($section.hasClass('active')) {
return next();
}
}, 4 * 1000);
});
$afterSections.remove();
return $numberSectionTemplate.remove();
};
init = function() {
setupNumberSections();
setupOnePageScroll();
return setTimeout(function() {
return animateHeader();
}, 500);
};
init();
}).call(this);
================================================
FILE: docs/welcome/onepage-scroll.css
================================================
body, html {
margin: 0;
overflow: hidden;
-webkit-transition: opacity 400ms;
-moz-transition: opacity 400ms;
transition: opacity 400ms;
}
body, .onepage-wrapper, html {
display: block;
position: static;
padding: 0;
width: 100%;
height: 100%;
}
.main {
height: 100%;
}
.onepage-wrapper {
width: 100%;
height: 100%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
.onepage-wrapper .section {
width: 100%;
height: 100%;
}
.onepage-pagination {
position: absolute;
margin: auto;
right: 10px;
left: auto;
top: 0;
bottom: 0;
height: 190px;
z-index: 5;
list-style: none;
padding: 0;
}
.onepage-pagination li {
padding: 0;
text-align: center;
}
.onepage-pagination li a{
padding: 10px;
width: 4px;
height: 4px;
display: block;
}
.onepage-pagination li a:before{
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(0,0,0,0.85);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.onepage-pagination li a.active:before{
width: 10px;
height: 10px;
background: none;
border: 1px solid black;
margin-top: -4px;
left: 8px;
}
body.viewing-page-2 .onepage-pagination li a:before { background-color: #444; }
body.viewing-page-2 .onepage-pagination li a.active:before { border-color: #444; background: none; }
body.viewing-page-3 .onepage-pagination li a:before { background-color: #333; }
body.viewing-page-3 .onepage-pagination li a.active:before { border-color: #333; background: none; }
body.viewing-page-3 .social-sharing-wrapper { -webkit-filter: grayscale(1) sepia(1) hue-rotate(-47deg); }
body.viewing-page-3 .social-sharing-wrapper:hover { -webkit-filter: none; }
body.viewing-page-4 .onepage-pagination li a:before { background-color: #8bf5a5; }
body.viewing-page-4 .onepage-pagination li a.active:before { border-color: #8bf5a5; background: none; }
body.viewing-page-4 .social-sharing-wrapper { -webkit-filter: grayscale(1) contrast(1.3) invert(1); }
body.viewing-page-4 .social-sharing-wrapper:hover { -webkit-filter: none; }
================================================
FILE: docs/welcome/onepage-scroll.js
================================================
/* ===========================================================
* jquery-onepage-scroll.js v1
* ===========================================================
* Copyright 2013 Pete Rojwongsuriya.
* http://www.thepetedesign.com
*
* Create an Apple-like website that let user scroll
* one page at a time
*
* Credit: Eike Send for the awesome swipe event
* https://github.com/peachananr/onepage-scroll
*
* ========================================================== */
!function($){
var defaults = {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false
};
/*------------------------------------------------*/
/* Credit: Eike Send for the awesome swipe event */
/*------------------------------------------------*/
$.fn.swipeEvents = function() {
return this.each(function() {
var startX,
startY,
$this = $(this);
$this.bind('touchstart', touchstart);
function touchstart(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
startX = touches[0].pageX;
startY = touches[0].pageY;
$this.bind('touchmove', touchmove);
}
event.preventDefault();
}
function touchmove(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
var deltaX = startX - touches[0].pageX;
var deltaY = startY - touches[0].pageY;
if (deltaX >= 50) {
$this.trigger("swipeLeft");
}
if (deltaX <= -50) {
$this.trigger("swipeRight");
}
if (deltaY >= 50) {
$this.trigger("swipeUp");
}
if (deltaY <= -50) {
$this.trigger("swipeDown");
}
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
$this.unbind('touchmove', touchmove);
}
}
event.preventDefault();
}
});
};
$.fn.onepage_scroll = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
sections = $(settings.sectionContainer),
total = sections.length,
status = "off",
topPos = 0,
lastAnimation = 0,
quietPeriod = 500,
paginationList = "";
$.fn.transformPage = function(settings, pos) {
$(this).css({
"-webkit-transform": "translate3d(0, " + pos + "%, 0)",
"-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-moz-transform": "translate3d(0, " + pos + "%, 0)",
"-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
"-ms-transform": "translate3d(0, " + pos + "%, 0)",
"-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
"transform": "translate3d(0, " + pos + "%, 0)",
"transition": "all " + settings.animationTime + "ms " + settings.easing
});
};
$.fn.moveDown = function() {
var el = $(this);
index = $(settings.sectionContainer +".active").data("index");
if(index < total) {
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
if(next) {
current.removeClass("active");
next.addClass("active");
if(settings.pagination === true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (index + 1) + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"));
if (history.replaceState && settings.updateURL === true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
history.pushState( {}, document.title, href );
}
}
pos = (index * 100) * -1;
el.transformPage(settings, pos);
}
};
$.fn.moveUp = function() {
var el = $(this);
index = $(settings.sectionContainer +".active").data("index");
if(index <= total && index > 1) {
current = $(settings.sectionContainer + "[data-index='" + index + "']");
next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");
if(next) {
current.removeClass("active");
next.addClass("active");
if(settings.pagination === true) {
$(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (index - 1) + "']").addClass("active");
}
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"));
if (history.replaceState && settings.updateURL === true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
history.pushState( {}, document.title, href );
}
}
pos = ((next.data("index") - 1) * 100) * -1;
el.transformPage(settings, pos);
}
};
function init_scroll(event, delta) {
deltaOfInterest = delta;
var timeNow = new Date().getTime();
// Cancel scroll if currently animating or within quiet period
if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
event.preventDefault();
return;
}
if (deltaOfInterest < 0) {
el.moveDown();
} else {
el.moveUp();
}
lastAnimation = timeNow;
}
// Prepare everything before binding wheel scroll
el.addClass("onepage-wrapper").css("position","relative");
$.each( sections, function(i) {
$(this).css({
position: "absolute",
top: topPos + "%"
}).addClass("section").attr("data-index", i+1);
topPos = topPos + 100;
if(settings.pagination === true) {
paginationList += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>";
}
});
el.swipeEvents().bind("swipeDown", function(){
el.moveUp();
}).bind("swipeUp", function(){
el.moveDown();
});
// Create Pagination and Display Them
if(settings.pagination === true) {
$("<ul class='onepage-pagination'>" + paginationList + "</ul>").prependTo("body");
posTop = (el.find(".onepage-pagination").height() / 2) * -1;
el.find(".onepage-pagination").css("margin-top", posTop);
}
if(window.location.hash !== "" && window.location.hash !== "#1") {
init_index = window.location.hash.replace("#", "");
$(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active");
$("body").addClass("viewing-page-"+ init_index);
if(settings.pagination === true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active");
next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']");
if(next) {
next.addClass("active");
if(settings.pagination === true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"));
if (history.replaceState && settings.updateURL === true) {
var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index);
history.pushState( {}, document.title, href );
}
}
pos = ((init_index - 1) * 100) * -1;
el.transformPage(settings, pos);
}else{
$(settings.sectionContainer + "[data-index='1']").addClass("active");
$("body").addClass("viewing-page-1");
if(settings.pagination === true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
if(settings.pagination === true) {
$(".onepage-pagination li a").click(function (){
var page_index = $(this).data("index");
if (!$(this).hasClass("active")) {
current = $(settings.sectionContainer + ".active");
next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
if(next) {
current.removeClass("active");
next.addClass("active");
$(".onepage-pagination li a" + ".active").removeClass("active");
$(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
$("body").addClass("viewing-page-"+next.data("index"));
}
pos = ((page_index - 1) * 100) * -1;
el.transformPage(settings, pos);
}
if (settings.updateURL === false) return false;
});
}
$(document).bind('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
});
return false;
};
}(window.jQuery);
================================================
FILE: odometer.coffee
================================================
VALUE_HTML = '<span class="odometer-value"></span>'
RIBBON_HTML = '<span class="odometer-ribbon"><span class="odometer-ribbon-inner">' + VALUE_HTML + '</span></span>'
DIGIT_HTML = '<span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">' + RIBBON_HTML + '</span></span>'
FORMAT_MARK_HTML = '<span class="odometer-formatting-mark"></span>'
# The bit within the parenthesis will be repeated, so (,ddd) becomes 123,456,789....
#
# If your locale uses spaces to seperate digits, you could consider using a
# Narrow No-Break Space ( ), as it's a bit more correct.
#
# Numbers will be rounded to the number of digits after the radix seperator.
#
# When values are set using `.update` or the `.innerHTML`-type attributes,
# strings are assumed to already be in the locale's format.
#
# This is just the default, it can also be set as options.format.
DIGIT_FORMAT = '(,ddd).dd'
FORMAT_PARSER = /^\(?([^)]*)\)?(?:(.)(d+))?$/
# What is our target framerate?
FRAMERATE = 30
# How long will the animation last?
DURATION = 2000
# What is the fastest we should update values when we are
# counting up (not using the wheel animation).
COUNT_FRAMERATE = 20
# What is the minimum number of frames for each value on the wheel?
# We won't render more values than could be reasonably seen
FRAMES_PER_VALUE = 2
# If more than one digit is hitting the frame limit, they would all get
# capped at that limit and appear to be moving at the same rate. This
# factor adds a boost to subsequent digits to make them appear faster.
DIGIT_SPEEDBOOST = .5
MS_PER_FRAME = 1000 / FRAMERATE
COUNT_MS_PER_FRAME = 1000 / COUNT_FRAMERATE
TRANSITION_END_EVENTS = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd'
transitionCheckStyles = document.createElement('div').style
TRANSITION_SUPPORT = transitionCheckStyles.transition? or transitionCheckStyles.webkitTransition? or
transitionCheckStyles.mozTransition? or transitionCheckStyles.oTransition?
requestAnimationFrame = window.requestAnimationFrame or window.mozRequestAnimationFrame or
window.webkitRequestAnimationFrame or window.msRequestAnimationFrame
MutationObserver = window.MutationObserver or window.WebKitMutationObserver or window.MozMutationObserver
createFromHTML = (html) ->
el = document.createElement('div')
el.innerHTML = html
el.children[0]
removeClass = (el, name) ->
el.className = el.className.replace new RegExp("(^| )#{ name.split(' ').join('|') }( |$)", 'gi'), ' '
addClass = (el, name) ->
removeClass el, name
el.className += " #{ name }"
trigger = (el, name) ->
# Custom DOM events are not supported in IE8
if document.createEvent?
evt = document.createEvent('HTMLEvents')
evt.initEvent(name, true, true)
el.dispatchEvent(evt)
now = ->
window.performance?.now?() ? +new Date
round = (val, precision=0) ->
return Math.round(val) unless precision
val *= Math.pow(10, precision)
val += 0.5
val = Math.floor(val)
val /= Math.pow(10, precision)
truncate = (val) ->
# | 0 fails on numbers greater than 2^32
if val < 0
Math.ceil(val)
else
Math.floor(val)
fractionalPart = (val) ->
val - round(val)
_jQueryWrapped = false
do wrapJQuery = ->
return if _jQueryWrapped
if window.jQuery?
_jQueryWrapped = true
# We need to wrap jQuery's .html and .text because they don't always
# call .innerHTML/.innerText
for property in ['html', 'text']
do (property) ->
old = window.jQuery.fn[property]
window.jQuery.fn[property] = (val) ->
if not val? or not this[0]?.odometer?
return old.apply this, arguments
this[0].odometer.update val
# In case jQuery is brought in after this file
setTimeout wrapJQuery, 0
class Odometer
constructor: (@options) ->
@el = @options.el
return @el.odometer if @el.odometer?
@el.odometer = @
for k, v of Odometer.options
if not @options[k]?
@options[k] = v
@options.duration ?= DURATION
@MAX_VALUES = ((@options.duration / MS_PER_FRAME) / FRAMES_PER_VALUE) | 0
@resetFormat()
@value = @cleanValue(@options.value ? '')
@renderInside()
@render()
try
for property in ['innerHTML', 'innerText', 'textContent'] when @el[property]?
do (property) =>
Object.defineProperty @el, property,
get: =>
if property is 'innerHTML'
@inside.outerHTML
else
# It's just a single HTML element, so innerText is the
# same as outerText.
@inside.innerText ? @inside.textContent
set: (val) =>
@update val
catch e
# Safari
@watchForMutations()
@
renderInside: ->
@inside = document.createElement 'div'
@inside.className = 'odometer-inside'
@el.innerHTML = ''
@el.appendChild @inside
watchForMutations: ->
# Safari doesn't allow us to wrap .innerHTML, so we listen for it
# changing.
return unless MutationObserver?
try
@observer ?= new MutationObserver (mutations) =>
newVal = @el.innerText
@renderInside()
@render @value
@update newVal
@watchMutations = true
@startWatchingMutations()
catch e
startWatchingMutations: ->
if @watchMutations
@observer.observe @el, {childList: true}
stopWatchingMutations: ->
@observer?.disconnect()
cleanValue: (val) ->
if typeof val is 'string'
# We need to normalize the format so we can properly turn it into
# a float.
val = val.replace((@format.radix ? '.'), '<radix>')
val = val.replace /[.,]/g, ''
val = val.replace '<radix>', '.'
val = parseFloat(val, 10) or 0
round(val, @format.precision)
bindTransitionEnd: ->
return if @transitionEndBound
@transitionEndBound = true
# The event will be triggered once for each ribbon, we only
# want one render though
renderEnqueued = false
for event in TRANSITION_END_EVENTS.split(' ')
@el.addEventListener event, =>
return true if renderEnqueued
renderEnqueued = true
setTimeout =>
@render()
renderEnqueued = false
trigger @el, 'odometerdone'
, 0
true
, false
resetFormat: ->
format = @options.format ? DIGIT_FORMAT
format or= 'd'
parsed = FORMAT_PARSER.exec format
if not parsed
throw new Error "Odometer: Unparsable digit format"
[repeating, radix, fractional] = parsed[1..3]
precision = fractional?.length or 0
@format = {repeating, radix, precision}
render: (value=@value) ->
@stopWatchingMutations()
@resetFormat()
@inside.innerHTML = ''
theme = @options.theme
classes = @el.className.split(' ')
newClasses = []
for cls in classes when cls.length
if match = /^odometer-theme-(.+)$/.exec(cls)
theme = match[1]
continue
if /^odometer(-|$)/.test(cls)
continue
newClasses.push cls
newClasses.push 'odometer'
unless TRANSITION_SUPPORT
newClasses.push 'odometer-no-transitions'
if theme
newClasses.push "odometer-theme-#{ theme }"
else
# This class matches all themes, so it should do what you'd expect if only one
# theme css file is brought into the page.
newClasses.push "odometer-auto-theme"
@el.className = newClasses.join(' ')
@ribbons = {}
@formatDigits(value)
@startWatchingMutations()
formatDigits: (value) ->
@digits = []
if @options.formatFunction
valueString = @options.formatFunction(value)
for valueDigit in valueString.split('').reverse()
if valueDigit.match(/0-9/)
digit = @renderDigit()
digit.querySelector('.odometer-value').innerHTML = valueDigit
@digits.push digit
@insertDigit digit
else
@addSpacer valueDigit
else
wholePart = not @format.precision or not fractionalPart(value) or false
for digit in value.toString().split('').reverse()
if digit is '.'
wholePart = true
@addDigit digit, wholePart
return
update: (newValue) ->
newValue = @cleanValue newValue
return unless diff = newValue - @value
removeClass @el, 'odometer-animating-up odometer-animating-down odometer-animating'
if diff > 0
addClass @el, 'odometer-animating-up'
else
addClass @el, 'odometer-animating-down'
@stopWatchingMutations()
@animate newValue
@startWatchingMutations()
setTimeout =>
# Force a repaint
@el.offsetHeight
addClass @el, 'odometer-animating'
, 0
@value = newValue
renderDigit: ->
createFromHTML DIGIT_HTML
insertDigit: (digit, before) ->
if before?
@inside.insertBefore digit, before
else if not @inside.children.length
@inside.appendChild digit
else
@inside.insertBefore digit, @inside.children[0]
addSpacer: (chr, before, extraClasses) ->
spacer = createFromHTML FORMAT_MARK_HTML
spacer.innerHTML = chr
addClass(spacer, extraClasses) if extraClasses
@insertDigit spacer, before
addDigit: (value, repeating=true) ->
if value is '-'
return @addSpacer value, null, 'odometer-negation-mark'
if value is '.'
return @addSpacer (@format.radix ? '.'), null, 'odometer-radix-mark'
if repeating
resetted = false
while true
if not @format.repeating.length
if resetted
throw new Error "Bad odometer format without digits"
@resetFormat()
resetted = true
chr = @format.repeating[@format.repeating.length - 1]
@format.repeating = @format.repeating.substring(0, @format.repeating.length - 1)
break if chr is 'd'
@addSpacer chr
digit = @renderDigit()
digit.querySelector('.odometer-value').innerHTML = value
@digits.push digit
@insertDigit digit
animate: (newValue) ->
if not TRANSITION_SUPPORT or @options.animation is 'count'
@animateCount newValue
else
@animateSlide newValue
animateCount: (newValue) ->
return unless diff = +newValue - @value
start = last = now()
cur = @value
do tick = =>
if (now() - start) > @options.duration
@value = newValue
@render()
trigger @el, 'odometerdone'
return
delta = now() - last
if delta > COUNT_MS_PER_FRAME
last = now()
fraction = delta / @options.duration
dist = diff * fraction
cur += dist
@render Math.round cur
if requestAnimationFrame?
requestAnimationFrame tick
else
setTimeout tick, COUNT_MS_PER_FRAME
getDigitCount: (values...) ->
for value, i in values
values[i] = Math.abs(value)
max = Math.max values...
Math.ceil(Math.log(max + 1) / Math.log(10))
getFractionalDigitCount: (values...) ->
# This assumes the value has already been rounded to
# @format.precision places
#
parser = /^\-?\d*\.(\d*?)0*$/
for value, i in values
values[i] = value.toString()
parts = parser.exec values[i]
if not parts?
values[i] = 0
else
values[i] = parts[1].length
Math.max values...
resetDigits: ->
@digits = []
@ribbons = []
@inside.innerHTML = ''
@resetFormat()
animateSlide: (newValue) ->
oldValue = @value
fractionalCount = @getFractionalDigitCount oldValue, newValue
if fractionalCount
newValue = newValue * Math.pow(10, fractionalCount)
oldValue = oldValue * Math.pow(10, fractionalCount)
return unless diff = newValue - oldValue
@bindTransitionEnd()
digitCount = @getDigitCount(oldValue, newValue)
digits = []
boosted = 0
# We create a array to represent the series of digits which should be
# animated in each column
for i in [0...digitCount]
start = truncate(oldValue / Math.pow(10, (digitCount - i - 1)))
end = truncate(newValue / Math.pow(10, (digitCount - i - 1)))
dist = end - start
if Math.abs(dist) > @MAX_VALUES
# We need to subsample
frames = []
# Subsequent digits need to be faster than previous ones
incr = dist / (@MAX_VALUES + @MAX_VALUES * boosted * DIGIT_SPEEDBOOST)
cur = start
while (dist > 0 and cur < end) or (dist < 0 and cur > end)
frames.push Math.round cur
cur += incr
if frames[frames.length - 1] isnt end
frames.push end
boosted++
else
frames = [start..end]
# We only care about the last digit
for frame, i in frames
frames[i] = Math.abs(frame % 10)
digits.push frames
@resetDigits()
for frames, i in digits.reverse()
if not @digits[i]
@addDigit ' ', (i >= fractionalCount)
@ribbons[i] ?= @digits[i].querySelector('.odometer-ribbon-inner')
@ribbons[i].innerHTML = ''
if diff < 0
frames = frames.reverse()
for frame, j in frames
numEl = document.createElement('div')
numEl.className = 'odometer-value'
numEl.innerHTML = frame
@ribbons[i].appendChild numEl
if j == frames.length - 1
addClass numEl, 'odometer-last-value'
if j == 0
addClass numEl, 'odometer-first-value'
if start < 0
@addDigit '-'
mark = @inside.querySelector('.odometer-radix-mark')
mark.parent.removeChild(mark) if mark?
if fractionalCount
@addSpacer @format.radix, @digits[fractionalCount - 1], 'odometer-radix-mark'
Odometer.options = window.odometerOptions ? {}
setTimeout ->
# We do this in a seperate pass to allow people to set
# window.odometerOptions after bringing the file in.
if window.odometerOptions
for k, v of window.odometerOptions
Odometer.options[k] ?= v
, 0
Odometer.init = ->
if not document.querySelectorAll?
# IE 7 or 8 in Quirksmode
return
elements = document.querySelectorAll (Odometer.options.selector or '.odometer')
for el in elements
el.odometer = new Odometer {el, value: (el.innerText ? el.textContent)}
if document.documentElement?.doScroll? and document.createEventObject?
# IE < 9
_old = document.onreadystatechange
document.onreadystatechange = ->
if document.readyState is 'complete' and Odometer.options.auto isnt false
Odometer.init()
_old?.apply this, arguments
else
document.addEventListener 'DOMContentLoaded', ->
if Odometer.options.auto isnt false
Odometer.init()
, false
if typeof define is 'function' and define.amd
# AMD. Register as an anonymous module.
define [], ->
Odometer
else if exports?
# CommonJS
module.exports = Odometer
else
# Browser globals
window.Odometer = Odometer
================================================
FILE: odometer.js
================================================
(function() {
var COUNT_FRAMERATE, COUNT_MS_PER_FRAME, DIGIT_FORMAT, DIGIT_HTML, DIGIT_SPEEDBOOST, DURATION, FORMAT_MARK_HTML, FORMAT_PARSER, FRAMERATE, FRAMES_PER_VALUE, MS_PER_FRAME, MutationObserver, Odometer, RIBBON_HTML, TRANSITION_END_EVENTS, TRANSITION_SUPPORT, VALUE_HTML, addClass, createFromHTML, fractionalPart, now, removeClass, requestAnimationFrame, round, transitionCheckStyles, trigger, truncate, wrapJQuery, _jQueryWrapped, _old, _ref, _ref1,
__slice = [].slice;
VALUE_HTML = '<span class="odometer-value"></span>';
RIBBON_HTML = '<span class="odometer-ribbon"><span class="odometer-ribbon-inner">' + VALUE_HTML + '</span></span>';
DIGIT_HTML = '<span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">' + RIBBON_HTML + '</span></span>';
FORMAT_MARK_HTML = '<span class="odometer-formatting-mark"></span>';
DIGIT_FORMAT = '(,ddd).dd';
FORMAT_PARSER = /^\(?([^)]*)\)?(?:(.)(d+))?$/;
FRAMERATE = 30;
DURATION = 2000;
COUNT_FRAMERATE = 20;
FRAMES_PER_VALUE = 2;
DIGIT_SPEEDBOOST = .5;
MS_PER_FRAME = 1000 / FRAMERATE;
COUNT_MS_PER_FRAME = 1000 / COUNT_FRAMERATE;
TRANSITION_END_EVENTS = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
transitionCheckStyles = document.createElement('div').style;
TRANSITION_SUPPORT = (transitionCheckStyles.transition != null) || (transitionCheckStyles.webkitTransition != null) || (transitionCheckStyles.mozTransition != null) || (transitionCheckStyles.oTransition != null);
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
createFromHTML = function(html) {
var el;
el = document.createElement('div');
el.innerHTML = html;
return el.children[0];
};
removeClass = function(el, name) {
return el.className = el.className.replace(new RegExp("(^| )" + (name.split(' ').join('|')) + "( |$)", 'gi'), ' ');
};
addClass = function(el, name) {
removeClass(el, name);
return el.className += " " + name;
};
trigger = function(el, name) {
var evt;
if (document.createEvent != null) {
evt = document.createEvent('HTMLEvents');
evt.initEvent(name, true, true);
return el.dispatchEvent(evt);
}
};
now = function() {
var _ref, _ref1;
return (_ref = (_ref1 = window.performance) != null ? typeof _ref1.now === "function" ? _ref1.now() : void 0 : void 0) != null ? _ref : +(new Date);
};
round = function(val, precision) {
if (precision == null) {
precision = 0;
}
if (!precision) {
return Math.round(val);
}
val *= Math.pow(10, precision);
val += 0.5;
val = Math.floor(val);
return val /= Math.pow(10, precision);
};
truncate = function(val) {
if (val < 0) {
return Math.ceil(val);
} else {
return Math.floor(val);
}
};
fractionalPart = function(val) {
return val - round(val);
};
_jQueryWrapped = false;
(wrapJQuery = function() {
var property, _i, _len, _ref, _results;
if (_jQueryWrapped) {
return;
}
if (window.jQuery != null) {
_jQueryWrapped = true;
_ref = ['html', 'text'];
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
property = _ref[_i];
_results.push((function(property) {
var old;
old = window.jQuery.fn[property];
return window.jQuery.fn[property] = function(val) {
var _ref1;
if ((val == null) || (((_ref1 = this[0]) != null ? _ref1.odometer : void 0) == null)) {
return old.apply(this, arguments);
}
return this[0].odometer.update(val);
};
})(property));
}
return _results;
}
})();
setTimeout(wrapJQuery, 0);
Odometer = (function() {
function Odometer(options) {
var e, k, property, v, _base, _i, _len, _ref, _ref1, _ref2,
_this = this;
this.options = options;
this.el = this.options.el;
if (this.el.odometer != null) {
return this.el.odometer;
}
this.el.odometer = this;
_ref = Odometer.options;
for (k in _ref) {
v = _ref[k];
if (this.options[k] == null) {
this.options[k] = v;
}
}
if ((_base = this.options).duration == null) {
_base.duration = DURATION;
}
this.MAX_VALUES = ((this.options.duration / MS_PER_FRAME) / FRAMES_PER_VALUE) | 0;
this.resetFormat();
this.value = this.cleanValue((_ref1 = this.options.value) != null ? _ref1 : '');
this.renderInside();
this.render();
try {
_ref2 = ['innerHTML', 'innerText', 'textContent'];
for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
property = _ref2[_i];
if (this.el[property] != null) {
(function(property) {
return Object.defineProperty(_this.el, property, {
get: function() {
var _ref3;
if (property === 'innerHTML') {
return _this.inside.outerHTML;
} else {
return (_ref3 = _this.inside.innerText) != null ? _ref3 : _this.inside.textContent;
}
},
set: function(val) {
return _this.update(val);
}
});
})(property);
}
}
} catch (_error) {
e = _error;
this.watchForMutations();
}
this;
}
Odometer.prototype.renderInside = function() {
this.inside = document.createElement('div');
this.inside.className = 'odometer-inside';
this.el.innerHTML = '';
return this.el.appendChild(this.inside);
};
Odometer.prototype.watchForMutations = function() {
var e,
_this = this;
if (MutationObserver == null) {
return;
}
try {
if (this.observer == null) {
this.observer = new MutationObserver(function(mutations) {
var newVal;
newVal = _this.el.innerText;
_this.renderInside();
_this.render(_this.value);
return _this.update(newVal);
});
}
this.watchMutations = true;
return this.startWatchingMutations();
} catch (_error) {
e = _error;
}
};
Odometer.prototype.startWatchingMutations = function() {
if (this.watchMutations) {
return this.observer.observe(this.el, {
childList: true
});
}
};
Odometer.prototype.stopWatchingMutations = function() {
var _ref;
return (_ref = this.observer) != null ? _ref.disconnect() : void 0;
};
Odometer.prototype.cleanValue = function(val) {
var _ref;
if (typeof val === 'string') {
val = val.replace((_ref = this.format.radix) != null ? _ref : '.', '<radix>');
val = val.replace(/[.,]/g, '');
val = val.replace('<radix>', '.');
val = parseFloat(val, 10) || 0;
}
return round(val, this.format.precision);
};
Odometer.prototype.bindTransitionEnd = function() {
var event, renderEnqueued, _i, _len, _ref, _results,
_this = this;
if (this.transitionEndBound) {
return;
}
this.transitionEndBound = true;
renderEnqueued = false;
_ref = TRANSITION_END_EVENTS.split(' ');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
event = _ref[_i];
_results.push(this.el.addEventListener(event, function() {
if (renderEnqueued) {
return true;
}
renderEnqueued = true;
setTimeout(function() {
_this.render();
renderEnqueued = false;
return trigger(_this.el, 'odometerdone');
}, 0);
return true;
}, false));
}
return _results;
};
Odometer.prototype.resetFormat = function() {
var format, fractional, parsed, precision, radix, repeating, _ref, _ref1;
format = (_ref = this.options.format) != null ? _ref : DIGIT_FORMAT;
format || (format = 'd');
parsed = FORMAT_PARSER.exec(format);
if (!parsed) {
throw new Error("Odometer: Unparsable digit format");
}
_ref1 = parsed.slice(1, 4), repeating = _ref1[0], radix = _ref1[1], fractional = _ref1[2];
precision = (fractional != null ? fractional.length : void 0) || 0;
return this.format = {
repeating: repeating,
radix: radix,
precision: precision
};
};
Odometer.prototype.render = function(value) {
var classes, cls, match, newClasses, theme, _i, _len;
if (value == null) {
value = this.value;
}
this.stopWatchingMutations();
this.resetFormat();
this.inside.innerHTML = '';
theme = this.options.theme;
classes = this.el.className.split(' ');
newClasses = [];
for (_i = 0, _len = classes.length; _i < _len; _i++) {
cls = classes[_i];
if (!cls.length) {
continue;
}
if (match = /^odometer-theme-(.+)$/.exec(cls)) {
theme = match[1];
continue;
}
if (/^odometer(-|$)/.test(cls)) {
continue;
}
newClasses.push(cls);
}
newClasses.push('odometer');
if (!TRANSITION_SUPPORT) {
newClasses.push('odometer-no-transitions');
}
if (theme) {
newClasses.push("odometer-theme-" + theme);
} else {
newClasses.push("odometer-auto-theme");
}
this.el.className = newClasses.join(' ');
this.ribbons = {};
this.formatDigits(value);
return this.startWatchingMutations();
};
Odometer.prototype.formatDigits = function(value) {
var digit, valueDigit, valueString, wholePart, _i, _j, _len, _len1, _ref, _ref1;
this.digits = [];
if (this.options.formatFunction) {
valueString = this.options.formatFunction(value);
_ref = valueString.split('').reverse();
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
valueDigit = _ref[_i];
if (valueDigit.match(/0-9/)) {
digit = this.renderDigit();
digit.querySelector('.odometer-value').innerHTML = valueDigit;
this.digits.push(digit);
this.insertDigit(digit);
} else {
this.addSpacer(valueDigit);
}
}
} else {
wholePart = !this.format.precision || !fractionalPart(value) || false;
_ref1 = value.toString().split('').reverse();
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
digit = _ref1[_j];
if (digit === '.') {
wholePart = true;
}
this.addDigit(digit, wholePart);
}
}
};
Odometer.prototype.update = function(newValue) {
var diff,
_this = this;
newValue = this.cleanValue(newValue);
if (!(diff = newValue - this.value)) {
return;
}
removeClass(this.el, 'odometer-animating-up odometer-animating-down odometer-animating');
if (diff > 0) {
addClass(this.el, 'odometer-animating-up');
} else {
addClass(this.el, 'odometer-animating-down');
}
this.stopWatchingMutations();
this.animate(newValue);
this.startWatchingMutations();
setTimeout(function() {
_this.el.offsetHeight;
return addClass(_this.el, 'odometer-animating');
}, 0);
return this.value = newValue;
};
Odometer.prototype.renderDigit = function() {
return createFromHTML(DIGIT_HTML);
};
Odometer.prototype.insertDigit = function(digit, before) {
if (before != null) {
return this.inside.insertBefore(digit, before);
} else if (!this.inside.children.length) {
return this.inside.appendChild(digit);
} else {
return this.inside.insertBefore(digit, this.inside.children[0]);
}
};
Odometer.prototype.addSpacer = function(chr, before, extraClasses) {
var spacer;
spacer = createFromHTML(FORMAT_MARK_HTML);
spacer.innerHTML = chr;
if (extraClasses) {
addClass(spacer, extraClasses);
}
return this.insertDigit(spacer, before);
};
Odometer.prototype.addDigit = function(value, repeating) {
var chr, digit, resetted, _ref;
if (repeating == null) {
repeating = true;
}
if (value === '-') {
return this.addSpacer(value, null, 'odometer-negation-mark');
}
if (value === '.') {
return this.addSpacer((_ref = this.format.radix) != null ? _ref : '.', null, 'odometer-radix-mark');
}
if (repeating) {
resetted = false;
while (true) {
if (!this.format.repeating.length) {
if (resetted) {
throw new Error("Bad odometer format without digits");
}
this.resetFormat();
resetted = true;
}
chr = this.format.repeating[this.format.repeating.length - 1];
this.format.repeating = this.format.repeating.substring(0, this.format.repeating.length - 1);
if (chr === 'd') {
break;
}
this.addSpacer(chr);
}
}
digit = this.renderDigit();
digit.querySelector('.odometer-value').innerHTML = value;
this.digits.push(digit);
return this.insertDigit(digit);
};
Odometer.prototype.animate = function(newValue) {
if (!TRANSITION_SUPPORT || this.options.animation === 'count') {
return this.animateCount(newValue);
} else {
return this.animateSlide(newValue);
}
};
Odometer.prototype.animateCount = function(newValue) {
var cur, diff, last, start, tick,
_this = this;
if (!(diff = +newValue - this.value)) {
return;
}
start = last = now();
cur = this.value;
return (tick = function() {
var delta, dist, fraction;
if ((now() - start) > _this.options.duration) {
_this.value = newValue;
_this.render();
trigger(_this.el, 'odometerdone');
return;
}
delta = now() - last;
if (delta > COUNT_MS_PER_FRAME) {
last = now();
fraction = delta / _this.options.duration;
dist = diff * fraction;
cur += dist;
_this.render(Math.round(cur));
}
if (requestAnimationFrame != null) {
return requestAnimationFrame(tick);
} else {
return setTimeout(tick, COUNT_MS_PER_FRAME);
}
})();
};
Odometer.prototype.getDigitCount = function() {
var i, max, value, values, _i, _len;
values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
value = values[i];
values[i] = Math.abs(value);
}
max = Math.max.apply(Math, values);
return Math.ceil(Math.log(max + 1) / Math.log(10));
};
Odometer.prototype.getFractionalDigitCount = function() {
var i, parser, parts, value, values, _i, _len;
values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
parser = /^\-?\d*\.(\d*?)0*$/;
for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
value = values[i];
values[i] = value.toString();
parts = parser.exec(values[i]);
if (parts == null) {
values[i] = 0;
} else {
values[i] = parts[1].length;
}
}
return Math.max.apply(Math, values);
};
Odometer.prototype.resetDigits = function() {
this.digits = [];
this.ribbons = [];
this.inside.innerHTML = '';
return this.resetFormat();
};
Odometer.prototype.animateSlide = function(newValue) {
var boosted, cur, diff, digitCount, digits, dist, end, fractionalCount, frame, frames, i, incr, j, mark, numEl, oldValue, start, _base, _i, _j, _k, _l, _len, _len1, _len2, _m, _ref, _results;
oldValue = this.value;
fractionalCount = this.getFractionalDigitCount(oldValue, newValue);
if (fractionalCount) {
newValue = newValue * Math.pow(10, fractionalCount);
oldValue = oldValue * Math.pow(10, fractionalCount);
}
if (!(diff = newValue - oldValue)) {
return;
}
this.bindTransitionEnd();
digitCount = this.getDigitCount(oldValue, newValue);
digits = [];
boosted = 0;
for (i = _i = 0; 0 <= digitCount ? _i < digitCount : _i > digitCount; i = 0 <= digitCount ? ++_i : --_i) {
start = truncate(oldValue / Math.pow(10, digitCount - i - 1));
end = truncate(newValue / Math.pow(10, digitCount - i - 1));
dist = end - start;
if (Math.abs(dist) > this.MAX_VALUES) {
frames = [];
incr = dist / (this.MAX_VALUES + this.MAX_VALUES * boosted * DIGIT_SPEEDBOOST);
cur = start;
while ((dist > 0 && cur < end) || (dist < 0 && cur > end)) {
frames.push(Math.round(cur));
cur += incr;
}
if (frames[frames.length - 1] !== end) {
frames.push(end);
}
boosted++;
} else {
frames = (function() {
_results = [];
for (var _j = start; start <= end ? _j <= end : _j >= end; start <= end ? _j++ : _j--){ _results.push(_j); }
return _results;
}).apply(this);
}
for (i = _k = 0, _len = frames.length; _k < _len; i = ++_k) {
frame = frames[i];
frames[i] = Math.abs(frame % 10);
}
digits.push(frames);
}
this.resetDigits();
_ref = digits.reverse();
for (i = _l = 0, _len1 = _ref.length; _l < _len1; i = ++_l) {
frames = _ref[i];
if (!this.digits[i]) {
this.addDigit(' ', i >= fractionalCount);
}
if ((_base = this.ribbons)[i] == null) {
_base[i] = this.digits[i].querySelector('.odometer-ribbon-inner');
}
this.ribbons[i].innerHTML = '';
if (diff < 0) {
frames = frames.reverse();
}
for (j = _m = 0, _len2 = frames.length; _m < _len2; j = ++_m) {
frame = frames[j];
numEl = document.createElement('div');
numEl.className = 'odometer-value';
numEl.innerHTML = frame;
this.ribbons[i].appendChild(numEl);
if (j === frames.length - 1) {
addClass(numEl, 'odometer-last-value');
}
if (j === 0) {
addClass(numEl, 'odometer-first-value');
}
}
}
if (start < 0) {
this.addDigit('-');
}
mark = this.inside.querySelector('.odometer-radix-mark');
if (mark != null) {
mark.parent.removeChild(mark);
}
if (fractionalCount) {
return this.addSpacer(this.format.radix, this.digits[fractionalCount - 1], 'odometer-radix-mark');
}
};
return Odometer;
})();
Odometer.options = (_ref = window.odometerOptions) != null ? _ref : {};
setTimeout(function() {
var k, v, _base, _ref1, _results;
if (window.odometerOptions) {
_ref1 = window.odometerOptions;
_results = [];
for (k in _ref1) {
v = _ref1[k];
_results.push((_base = Odometer.options)[k] != null ? (_base = Odometer.options)[k] : _base[k] = v);
}
return _results;
}
}, 0);
Odometer.init = function() {
var el, elements, _i, _len, _ref1, _results;
if (document.querySelectorAll == null) {
return;
}
elements = document.querySelectorAll(Odometer.options.selector || '.odometer');
_results = [];
for (_i = 0, _len = elements.length; _i < _len; _i++) {
el = elements[_i];
_results.push(el.odometer = new Odometer({
el: el,
value: (_ref1 = el.innerText) != null ? _ref1 : el.textContent
}));
}
return _results;
};
if ((((_ref1 = document.documentElement) != null ? _ref1.doScroll : void 0) != null) && (document.createEventObject != null)) {
_old = document.onreadystatechange;
document.onreadystatechange = function() {
if (document.readyState === 'complete' && Odometer.options.auto !== false) {
Odometer.init();
}
return _old != null ? _old.apply(this, arguments) : void 0;
};
} else {
document.addEventListener('DOMContentLoaded', function() {
if (Odometer.options.auto !== false) {
return Odometer.init();
}
}, false);
}
if (typeof define === 'function' && define.amd) {
define([], function() {
return Odometer;
});
} else if (typeof exports !== "undefined" && exports !== null) {
module.exports = Odometer;
} else {
window.Odometer = Odometer;
}
}).call(this);
================================================
FILE: package.json
================================================
{
"name": "odometer",
"version": "0.4.8",
"description": "Transition numbers with ease",
"main": "odometer.js",
"authors": [
"Adam Schwartz <adam.flynn.schwartz@gmail.com>",
"Zack Bloom <zackbloom@gmail.com>"
],
"license": "MIT",
"devDependencies": {
"grunt-contrib-coffee": "~0.7.0",
"coffee-script": "~1.6.3",
"grunt-contrib-uglify": "~0.2.4",
"grunt-cli": "~0.1.9",
"grunt": "~0.4.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-compass": "~0.5.0",
"color": "~0.4.4"
}
}
================================================
FILE: sass/_mixins.sass
================================================
@import compass/css3
=spinning-odometer($themeName)
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
+inline-block
position: relative
.odometer-digit
+inline-block
position: relative
.odometer-digit-spacer
+inline-block
visibility: hidden
.odometer-digit-inner
text-align: left
display: block
position: absolute
top: 0
left: 0
right: 0
bottom: 0
overflow: hidden
.odometer-ribbon
display: block
.odometer-ribbon-inner
display: block
-webkit-backface-visibility: hidden
.odometer-value
display: block
-webkit-transform: translateZ(0)
&.odometer-last-value
position: absolute
&.odometer-animating-up
.odometer-ribbon-inner
-webkit-transition: -webkit-transform 2s
-moz-transition: -moz-transform 2s
-ms-transition: -ms-transform 2s
-o-transition: -o-transform 2s
transition: transform 2s
&.odometer-animating .odometer-ribbon-inner
-webkit-transform: translateY(-100%)
-moz-transform: translateY(-100%)
-ms-transform: translateY(-100%)
-o-transform: translateY(-100%)
transform: translateY(-100%)
&.odometer-animating-down
.odometer-ribbon-inner
-webkit-transform: translateY(-100%)
-moz-transform: translateY(-100%)
-ms-transform: translateY(-100%)
-o-transform: translateY(-100%)
transform: translateY(-100%)
&.odometer-animating .odometer-ribbon-inner
-webkit-transition: -webkit-transform 2s
-moz-transition: -moz-transform 2s
-ms-transition: -ms-transform 2s
-o-transition: -o-transform 2s
transition: transform 2s
-webkit-transform: translateY(0)
-moz-transform: translateY(0)
-ms-transform: translateY(0)
-o-transform: translateY(0)
transform: translateY(0)
================================================
FILE: sass/odometer-theme-car.sass
================================================
@import compass/css3
@import mixins
@import url("//fonts.googleapis.com/css?family=Arimo")
$themeName: "odometer-theme-car"
$padding: .15em
$borderRadius: .2em
+spinning-odometer($themeName)
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
+border-radius(.34em)
font-family: "Arimo", monospace
padding: $padding
background: #000
color: #eee0d3
.odometer-digit
+box-shadow(inset 0 0 .3em rgba(0, 0, 0, 0.8))
+background-image(linear-gradient(top, #333 0%, #333 40%, #101010 60%, #333 80%, #333 100%))
padding: 0 $padding
&:first-child
+border-radius($borderRadius 0 0 $borderRadius)
&:last-child
+border-radius(0 $borderRadius $borderRadius 0)
+background-image(linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%))
background-color: #eee0d3
color: #000
.odometer-digit-inner
left: $padding
&.odometer-animating-up .odometer-ribbon-inner, &.odometer-animating-down.odometer-animating .odometer-ribbon-inner
-webkit-transition-timing-function: linear
-moz-transition-timing-function: linear
-ms-transition-timing-function: linear
-o-transition-timing-function: linear
transition-timing-function: linear
================================================
FILE: sass/odometer-theme-default.sass
================================================
@import compass/css3
@import mixins
$themeName: "odometer-theme-default"
+spinning-odometer($themeName)
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
font-family: "Helvetica Neue", sans-serif
line-height: 1.1em
.odometer-value
text-align: center
================================================
FILE: sass/odometer-theme-digital.sass
================================================
@import compass/css3
@import mixins
@import url("//fonts.googleapis.com/css?family=Wallpoet")
$themeName: "odometer-theme-digital"
$green: #8bf5a5
+spinning-odometer($themeName)
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
+background-image(radial-gradient(rgba($green, 0.4), #000))
background-color: #000
font-family: "Wallpoet", monospace
padding: 0 .2em
line-height: 1.1em
color: $green
.odometer-digit + .odometer-digit
margin-left: .1em
================================================
FILE: sass/odometer-theme-minimal.sass
================================================
@import compass/css3
@import mixins
$themeName: "odometer-theme-minimal"
+spinning-odometer($themeName)
================================================
FILE: sass/odometer-theme-plaza.sass
================================================
@import compass/css3
@import mixins
$themeName: "odometer-theme-plaza"
$digitPadding: .03em
+spinning-odometer($themeName)
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
+border-radius(.15em)
background-color: #f0f8ff
font-family: "Helvetica Neue", sans-serif
font-weight: 100
padding: 0 .12em
line-height: 1.2em
font-size: 1.2em
background-size: 16px 16px
.odometer-digit
+border-radius(.1em)
padding: 0 $digitPadding
color: #648baf
.odometer-digit-inner
left: $digitPadding
================================================
FILE: sass/odometer-theme-slot-machine.sass
================================================
@import compass/css3
@import mixins
@import url("//fonts.googleapis.com/css?family=Rye")
$themeName: "odometer-theme-slot-machine"
$spacing: .15em
$borderRadius: .2em
+spinning-odometer($themeName)
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
+border-radius(.34em)
+background-image(linear-gradient(#ff0, #ffa500))
background-color: #fc0
font-family: "Rye", monospace
padding: $spacing
color: #f80000
line-height: 1.35em
border: .03em solid #000
-webkit-text-stroke: .05em #000
.odometer-digit
+box-shadow(inset 0 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))
+border-radius(.2em)
+background-image(linear-gradient(top, #ccc 0%, #fff 20%, #fff 80%, #ccc 100%))
border: .03em solid #444
padding: .1em $spacing 0
&:first-child
+box-shadow(inset .05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))
&:last-child
+box-shadow(inset -.05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))
+ .odometer-digit
margin-left: $spacing
.odometer-digit-inner
padding-top: .08em
.odometer-digit-inner, .odometer-value.odometer-last-value
left: 0
right: 0
text-align: center
================================================
FILE: sass/odometer-theme-train-station.sass
================================================
@import compass/css3
@import mixins
@import url("//fonts.googleapis.com/css?family=Economica")
$themeName: "odometer-theme-train-station"
$digitPadding: .15em
+spinning-odometer($themeName)
.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
font-family: "Economica", sans-serif
.odometer-digit
+inline-block
+border-radius(.1em)
+background-image(linear-gradient(top, #111 0%, #111 35%, #333 55%, #111 55%, #111 100%))
background-color: #222
padding: 0 $digitPadding
color: #fff
+ .odometer-digit
margin-left: .1em
.odometer-digit-inner
left: $digitPadding
================================================
FILE: test/demo.html
================================================
<!DOCTYPE html>
<link rel="stylesheet" href="../themes/odometer-theme-car.css" />
<style>
.odometer {
font-size: 40px;
}
</style>
<script>
window.odometerOptions = {
format: '(ddd).dd'
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../odometer.js"></script>
<div class="odometer">3252</div>
<script>
setTimeout(function(){
$('.odometer').html(423234234);
}, 1000);
</script>
================================================
FILE: test/performance.html
================================================
<link rel="stylesheet" href="../themes/odometer-theme-car.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../odometer.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
header {
margin-bottom: 20px;
}
.odometer-container {
margin: 5px;
width: 150px;
display: inline-block;
}
</style>
<header>
<div class="slider"></div>
</header>
<script>
$('.slider').slider({
value: 4,
max: 10,
change: function(event, ui){
updateOdometerCount(Math.pow(2, ui.value));
}
});
</script>
<div class="container"></div>
<script>
var odometers = [];
var container = document.querySelector('.container');
setInterval(function(){
for(var i=0; i < odometers.length; i++)
odometers[i].update((Math.random() * 10000000)|0);
}, 3000);
function createOdometer(){
var el = document.createElement('div');
var cont = document.createElement('div');
cont.className = 'odometer-container';
cont.appendChild(el);
container.appendChild(cont);
var od = new Odometer({
el: el,
value: 0
});
return od;
}
function destroyOdometer(od){
container.removeChild(od.el.parentNode);
}
function updateOdometerCount(num){
if (num > odometers.length){
for(var i=odometers.length; i < num; i++){
odometers.push(createOdometer());
}
} else if (num < odometers.length){
for(var i=num - 1; i < odometers.length; i++){
destroyOdometer(odometers[i]);
}
odometers.splice(num - 1, (odometers.length - num));
}
}
updateOdometerCount(16);
</script>
================================================
FILE: themes/odometer-theme-car.css
================================================
@import url("//fonts.googleapis.com/css?family=Arimo");
.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-car .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
-moz-border-radius: 0.34em;
-webkit-border-radius: 0.34em;
border-radius: 0.34em;
font-family: "Arimo", monospace;
padding: 0.15em;
background: #000;
color: #eee0d3;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
-moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMzMzMzMzIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMxMDEwMTAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(40%, #333333), color-stop(60%, #101010), color-stop(80%, #333333), color-stop(100%, #333333));
background-image: -moz-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
background-image: -webkit-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
background-image: linear-gradient(to bottom, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);
padding: 0 0.15em;
}
.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-car .odometer-digit:first-child {
-moz-border-radius: 0.2em 0 0 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em 0 0 0.2em;
}
.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-car .odometer-digit:last-child {
-moz-border-radius: 0 0.2em 0.2em 0;
-webkit-border-radius: 0;
border-radius: 0 0.2em 0.2em 0;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZWVlMGQzIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNiYmFhOWEiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee0d3), color-stop(40%, #eee0d3), color-stop(60%, #bbaa9a), color-stop(80%, #eee0d3), color-stop(100%, #eee0d3));
background-image: -moz-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
background-image: linear-gradient(to bottom, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);
background-color: #eee0d3;
color: #000;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
left: 0.15em;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}
================================================
FILE: themes/odometer-theme-default.css
================================================
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
font-family: "Helvetica Neue", sans-serif;
line-height: 1.1em;
}
.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
text-align: center;
}
================================================
FILE: themes/odometer-theme-digital.css
================================================
@import url("//fonts.googleapis.com/css?family=Wallpoet");
.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiZjVhNSIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000);
background-color: #000;
font-family: "Wallpoet", monospace;
padding: 0 0.2em;
line-height: 1.1em;
color: #8bf5a5;
}
.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-digital .odometer-digit + .odometer-digit {
margin-left: 0.1em;
}
================================================
FILE: themes/odometer-theme-minimal.css
================================================
.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
================================================
FILE: themes/odometer-theme-plaza.css
================================================
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
-moz-border-radius: 0.15em;
-webkit-border-radius: 0.15em;
border-radius: 0.15em;
background-color: #f0f8ff;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
padding: 0 0.12em;
line-height: 1.2em;
font-size: 1.2em;
background-size: 16px 16px;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
-moz-border-radius: 0.1em;
-webkit-border-radius: 0.1em;
border-radius: 0.1em;
padding: 0 0.03em;
color: #648baf;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
left: 0.03em;
}
================================================
FILE: themes/odometer-theme-slot-machine.css
================================================
@import url("//fonts.googleapis.com/css?family=Rye");
.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {
-moz-border-radius: 0.34em;
-webkit-border-radius: 0.34em;
border-radius: 0.34em;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYTUwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #ffa500));
background-image: -moz-linear-gradient(#ffff00, #ffa500);
background-image: -webkit-linear-gradient(#ffff00, #ffa500);
background-image: linear-gradient(#ffff00, #ffa500);
background-color: #fc0;
font-family: "Rye", monospace;
padding: 0.15em;
color: #f80000;
line-height: 1.35em;
border: 0.03em solid #000;
-webkit-text-stroke: 0.05em #000;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {
-moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(20%, #ffffff), color-stop(80%, #ffffff), color-stop(100%, #cccccc));
background-image: -moz-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
background-image: linear-gradient(to bottom, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);
border: 0.03em solid #444;
padding: 0.1em 0.15em 0;
}
.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-slot-machine .odometer-digit:first-child {
-moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
}
.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-slot-machine .odometer-digit:last-child {
-moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);
}
.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit + .odometer-digit {
margin-left: 0.15em;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {
padding-top: 0.08em;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {
left: 0;
right: 0;
text-align: center;
}
================================================
FILE: themes/odometer-theme-train-station.css
================================================
@import url("//fonts.googleapis.com/css?family=Economica");
.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-spacer {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station {
font-family: "Economica", sans-serif;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
-moz-border-radius: 0.1em;
-webkit-border-radius: 0.1em;
border-radius: 0.1em;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMzUlIiBzdG9wLWNvbG9yPSIjMTExMTExIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(35%, #111111), color-stop(55%, #333333), color-stop(55%, #111111), color-stop(100%, #111111));
background-image: -moz-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
background-image: -webkit-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
background-image: linear-gradient(to bottom, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);
background-color: #222;
padding: 0 0.15em;
color: #fff;
}
.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit + .odometer-digit {
margin-left: 0.1em;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner {
left: 0.15em;
}
gitextract_8qn065oo/
├── .gitignore
├── .hsdoc
├── Gruntfile.coffee
├── LICENSE
├── README.md
├── bower.json
├── component.json
├── config.rb
├── docs/
│ ├── api/
│ │ └── themes.md
│ ├── intro.md
│ └── welcome/
│ ├── index.html
│ ├── landing-page.coffee
│ ├── landing-page.css
│ ├── landing-page.js
│ ├── onepage-scroll.css
│ └── onepage-scroll.js
├── odometer.coffee
├── odometer.js
├── package.json
├── sass/
│ ├── _mixins.sass
│ ├── odometer-theme-car.sass
│ ├── odometer-theme-default.sass
│ ├── odometer-theme-digital.sass
│ ├── odometer-theme-minimal.sass
│ ├── odometer-theme-plaza.sass
│ ├── odometer-theme-slot-machine.sass
│ └── odometer-theme-train-station.sass
├── test/
│ ├── demo.html
│ └── performance.html
└── themes/
├── odometer-theme-car.css
├── odometer-theme-default.css
├── odometer-theme-digital.css
├── odometer-theme-minimal.css
├── odometer-theme-plaza.css
├── odometer-theme-slot-machine.css
└── odometer-theme-train-station.css
SYMBOL INDEX (4 symbols across 2 files)
FILE: docs/welcome/onepage-scroll.js
function touchstart (line 38) | function touchstart(event) {
function touchmove (line 48) | function touchmove(event) {
function init_scroll (line 154) | function init_scroll(event, delta) {
FILE: odometer.js
function Odometer (line 128) | function Odometer(options) {
Condensed preview — 36 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (146K chars).
[
{
"path": ".gitignore",
"chars": 25,
"preview": "node_modules\n.sass-cache/"
},
{
"path": ".hsdoc",
"chars": 112,
"preview": "title: \"Odometer\"\nsource: \"odometer.coffee\"\nexamples: \"**/*.md\"\nassets: \"{docs/welcome/*,odometer.js,themes/*}\"\n"
},
{
"path": "Gruntfile.coffee",
"chars": 952,
"preview": "Path = require('path')\nfs = require('fs')\n\nmodule.exports = (grunt) ->\n grunt.initConfig\n pkg: grunt.file.readJSON(\""
},
{
"path": "LICENSE",
"chars": 1058,
"preview": "Copyright (c) 2013 HubSpot, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this s"
},
{
"path": "README.md",
"chars": 217,
"preview": "Odometer\n========\n\nOdometer is a Javascript and CSS library for smoothly transitioning numbers.\n\n### [Overview](http://g"
},
{
"path": "bower.json",
"chars": 561,
"preview": "{\n \"name\": \"odometer\",\n \"main\": \"odometer.js\",\n \"version\": \"0.4.8\",\n \"homepage\": \"http://github.hubspot.com/odometer"
},
{
"path": "component.json",
"chars": 392,
"preview": "{\n \"name\": \"odometer\",\n \"version\": \"0.4.8\",\n \"repo\": \"hubspot/odometer\",\n \"description\": \"Transition numbers with ea"
},
{
"path": "config.rb",
"chars": 116,
"preview": "preferred_syntax = :sass\ncss_dir = './themes'\nsass_dir = './sass'\noutput_style = :expanded\nenvironment = :production"
},
{
"path": "docs/api/themes.md",
"chars": 3408,
"preview": "## Themes\n\nTo use a builtin theme, simply include the theme style sheet:\n\n```html\n<link rel=\"stylesheet\" href=\"odometer-"
},
{
"path": "docs/intro.md",
"chars": 5578,
"preview": "Odometer\n========\n\n<style>\n.odometer-github-stars {\n margin-bottom: 6px;\n}\n.odometer-github-stars .odometer-label {\n b"
},
{
"path": "docs/welcome/index.html",
"chars": 16214,
"preview": "<!DOCTYPE html>\n<!--[if lt IE 7]> <html class=\"no-js ie6 ie9-and-less ie8-and-less ie7-and-less\" lang=\"en\"> <![endif]-->"
},
{
"path": "docs/welcome/landing-page.coffee",
"chars": 4100,
"preview": "THEMES = [{\n name: 'minimal'\n numbers: [{\n number: 10000\n description: '= 28<sup>2</sup> + 96<sup>2<"
},
{
"path": "docs/welcome/landing-page.css",
"chars": 7290,
"preview": "/* Prism.js */\ncode[class*=\"language-\"], pre[class*=\"language-\"] {color: black; text-shadow: 0 1px white; font-family: C"
},
{
"path": "docs/welcome/landing-page.js",
"chars": 5011,
"preview": "(function() {\n var THEMES, animateHeader, init, setupNumberSections, setupOnePageScroll;\n\n THEMES = [\n {\n name"
},
{
"path": "docs/welcome/onepage-scroll.css",
"chars": 2119,
"preview": "body, html {\n margin: 0;\n overflow: hidden;\n -webkit-transition: opacity 400ms;\n -moz-transition: opacity 400ms;\n t"
},
{
"path": "docs/welcome/onepage-scroll.js",
"chars": 9541,
"preview": "/* ===========================================================\n * jquery-onepage-scroll.js v1\n * ======================="
},
{
"path": "odometer.coffee",
"chars": 14936,
"preview": "VALUE_HTML = '<span class=\"odometer-value\"></span>'\nRIBBON_HTML = '<span class=\"odometer-ribbon\"><span class=\"odometer-r"
},
{
"path": "odometer.js",
"chars": 21199,
"preview": "(function() {\n var COUNT_FRAMERATE, COUNT_MS_PER_FRAME, DIGIT_FORMAT, DIGIT_HTML, DIGIT_SPEEDBOOST, DURATION, FORMAT_MA"
},
{
"path": "package.json",
"chars": 536,
"preview": "{\n \"name\": \"odometer\",\n \"version\": \"0.4.8\",\n \"description\": \"Transition numbers with ease\",\n \"main\": \"odometer.js\",\n"
},
{
"path": "sass/_mixins.sass",
"chars": 2440,
"preview": "@import compass/css3\n\n=spinning-odometer($themeName)\n .odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n "
},
{
"path": "sass/odometer-theme-car.sass",
"chars": 1340,
"preview": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Arimo\")\n\n$themeName: \"odometer-theme-"
},
{
"path": "sass/odometer-theme-default.sass",
"chars": 283,
"preview": "@import compass/css3\n@import mixins\n\n$themeName: \"odometer-theme-default\"\n\n+spinning-odometer($themeName)\n\n.odometer.odo"
},
{
"path": "sass/odometer-theme-digital.sass",
"chars": 496,
"preview": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Wallpoet\")\n\n$themeName: \"odometer-the"
},
{
"path": "sass/odometer-theme-minimal.sass",
"chars": 105,
"preview": "@import compass/css3\n@import mixins\n\n$themeName: \"odometer-theme-minimal\"\n\n+spinning-odometer($themeName)"
},
{
"path": "sass/odometer-theme-plaza.sass",
"chars": 574,
"preview": "@import compass/css3\n@import mixins\n\n$themeName: \"odometer-theme-plaza\"\n$digitPadding: .03em\n\n+spinning-odometer($themeN"
},
{
"path": "sass/odometer-theme-slot-machine.sass",
"chars": 1375,
"preview": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Rye\")\n\n$themeName: \"odometer-theme-sl"
},
{
"path": "sass/odometer-theme-train-station.sass",
"chars": 667,
"preview": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Economica\")\n\n$themeName: \"odometer-th"
},
{
"path": "test/demo.html",
"chars": 457,
"preview": "<!DOCTYPE html>\n<link rel=\"stylesheet\" href=\"../themes/odometer-theme-car.css\" />\n<style>\n.odometer {\n font-size: 40px;"
},
{
"path": "test/performance.html",
"chars": 1794,
"preview": "<link rel=\"stylesheet\" href=\"../themes/odometer-theme-car.css\" />\n<script src=\"http://ajax.googleapis.com/ajax/libs/jque"
},
{
"path": "themes/odometer-theme-car.css",
"chars": 7595,
"preview": "@import url(\"//fonts.googleapis.com/css?family=Arimo\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-car {\n "
},
{
"path": "themes/odometer-theme-default.css",
"chars": 3563,
"preview": ".odometer.odometer-auto-theme, .odometer.odometer-theme-default {\n display: inline-block;\n vertical-align: middle;\n *"
},
{
"path": "themes/odometer-theme-digital.css",
"chars": 4532,
"preview": "@import url(\"//fonts.googleapis.com/css?family=Wallpoet\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-digit"
},
{
"path": "themes/odometer-theme-minimal.css",
"chars": 3305,
"preview": ".odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {\n display: inline-block;\n vertical-align: middle;\n *"
},
{
"path": "themes/odometer-theme-plaza.css",
"chars": 4003,
"preview": ".odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {\n display: inline-block;\n vertical-align: middle;\n *ve"
},
{
"path": "themes/odometer-theme-slot-machine.css",
"chars": 7992,
"preview": "@import url(\"//fonts.googleapis.com/css?family=Rye\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machi"
},
{
"path": "themes/odometer-theme-train-station.css",
"chars": 5521,
"preview": "@import url(\"//fonts.googleapis.com/css?family=Economica\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-trai"
}
]
About this extraction
This page contains the full source code of the HubSpot/odometer GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 36 files (136.1 KB), approximately 39.5k tokens, and a symbol index with 4 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.