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 ", "Adam Schwartz " ], "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 ```
Name Theme
Default`default`
Minimal`minimal`
Car`car`
Plaza`plaza`
Slot Machine`slot-machine`
Train Station`train-station`
Digital`digital`
### 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(); ```

================================================ FILE: docs/intro.md ================================================ Odometer ========

GitHub ★ s so far:
0

Star odometer on GitHub to to see it update.
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 -------
123
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 ================================================ Odometer — Transition numbers with ease
O   L M O D   Z A B C D O   I J K L M O M   G H I J K L M E   Y Z A B C D E T   L M N O P Q R S T E   V W X Y Z A B C D E R   G H I J K L M O P Q R
Transition numbers with ease
Docs ★ On Github

How To Use

Add the js and a theme file to your page:

<link rel="stylesheet" href="odometer-theme-car.css" />
<script src="odometer.js"></script>

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.

element.innerHTML = 123 // Native, or...
$('.odometer').html(123) // with jQuery
★ On Github

About

Odometer was made by Adam Schwartz and Zack Bloom of HubSpot.

★ On Github
================================================ FILE: docs/welcome/landing-page.coffee ================================================ THEMES = [{ name: 'minimal' numbers: [{ number: 10000 description: '= 282 + 962 = 602 + 802' detail: 'two sums of two squares' source: 'http://www.wolframalpha.com/input/?i=10000' }, { number: 99999 description: '= 110000110100111112' 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('
') $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: '= 282 + 962 = 602 + 802', detail: 'two sums of two squares', source: 'http://www.wolframalpha.com/input/?i=10000' }, { number: 99999, description: '= 110000110100111112', 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('
'); $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 += "
    • "; } }); el.swipeEvents().bind("swipeDown", function(){ el.moveUp(); }).bind("swipeUp", function(){ el.moveDown(); }); // Create Pagination and Display Them if(settings.pagination === true) { $("
      " + paginationList + "
    ").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 = '' RIBBON_HTML = '' + VALUE_HTML + '' DIGIT_HTML = '8' + RIBBON_HTML + '' FORMAT_MARK_HTML = '' # 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 ? '.'), '') val = val.replace /[.,]/g, '' val = val.replace '', '.' 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 = ''; RIBBON_HTML = '' + VALUE_HTML + ''; DIGIT_HTML = '8' + RIBBON_HTML + ''; FORMAT_MARK_HTML = ''; 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 : '.', ''); val = val.replace(/[.,]/g, ''); val = val.replace('', '.'); 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 ", "Zack Bloom " ], "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 ================================================
    3252
    ================================================ FILE: test/performance.html ================================================
    ================================================ 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; }