Skip to content

Instantly share code, notes, and snippets.

@abitgone

abitgone/Making-Odometers…-Made-Easier.markdown

Last active December 30, 2015 03:18
Show Gist options
  • Save abitgone/7768113 to your computer and use it in GitHub Desktop.
Save abitgone/7768113 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Anthony Williams.
Raw
Making-Odometers…-Made-Easier.markdown

Making Odometers… Made Easier

You should go here to see what I'm talking about. But it includes Sass for loops and mixins and it's really rather good, I think you'll agree.

A Pen by Anthony Williams on CodePen.

License.

Raw
style.scss
//
// Some vars we're using
//
$default-prefixes: webkit, moz, ms, o;
$odometer-height: 28; // Use pixels, don't use the unit
$odometer-ref-height: 13; // Base pixel size (we're calculating ems)
//
// A mixin
//
@mixin build-prefixes($property, $value, $prefixes: $default-prefixes) {
@each $prefix in $prefixes {
-#{$prefix}-#{$property}: #{$value};
}
#{$property}: #{$value};
}
// And, then...
/*
-- Your .digit and .odometer__digits rules, simplified
*/
// All from these simple rules:
@for $digit from 0 through 9 {
.digit#{$digit} {
@include build-prefixes("transform", "translate3d(0, #{($odometer-height * ($digit * -1)) / $odometer-ref-height}em, 0)");
}
}
.digitundefined {
@include build-prefixes("transform", "translate3d(0, #{($odometer-height * -10) / $odometer-ref-height}em, 0)");
}
@for $nth-child from 2 through 6 {
.odometer__digits:nth-child(#{$nth-child}) > li[class*="number"] {
@include build-prefixes("transition-delay", "#{($nth-child - 1) * 250}ms");
}
}
/*
-- Plus a style to show the rules without me having to repeat them
*/
// I've manually removed this from style_output.css in case you're wondering where it went
head, style {
display: block;
}
head * {
display: none;
}
head style {
margin: 2em;
display: block;
white-space: pre-wrap;
color: black;
font-family: monospace;
}
Raw
style_output.css
/*
-- Your .digit and .odometer__digits rules, simplified
*/
.digit0 {
-webkit-transform: translate3d(0, 0em, 0);
-moz-transform: translate3d(0, 0em, 0);
-ms-transform: translate3d(0, 0em, 0);
-o-transform: translate3d(0, 0em, 0);
transform: translate3d(0, 0em, 0);
}
.digit1 {
-webkit-transform: translate3d(0, -2.15385em, 0);
-moz-transform: translate3d(0, -2.15385em, 0);
-ms-transform: translate3d(0, -2.15385em, 0);
-o-transform: translate3d(0, -2.15385em, 0);
transform: translate3d(0, -2.15385em, 0);
}
.digit2 {
-webkit-transform: translate3d(0, -4.30769em, 0);
-moz-transform: translate3d(0, -4.30769em, 0);
-ms-transform: translate3d(0, -4.30769em, 0);
-o-transform: translate3d(0, -4.30769em, 0);
transform: translate3d(0, -4.30769em, 0);
}
.digit3 {
-webkit-transform: translate3d(0, -6.46154em, 0);
-moz-transform: translate3d(0, -6.46154em, 0);
-ms-transform: translate3d(0, -6.46154em, 0);
-o-transform: translate3d(0, -6.46154em, 0);
transform: translate3d(0, -6.46154em, 0);
}
.digit4 {
-webkit-transform: translate3d(0, -8.61538em, 0);
-moz-transform: translate3d(0, -8.61538em, 0);
-ms-transform: translate3d(0, -8.61538em, 0);
-o-transform: translate3d(0, -8.61538em, 0);
transform: translate3d(0, -8.61538em, 0);
}
.digit5 {
-webkit-transform: translate3d(0, -10.76923em, 0);
-moz-transform: translate3d(0, -10.76923em, 0);
-ms-transform: translate3d(0, -10.76923em, 0);
-o-transform: translate3d(0, -10.76923em, 0);
transform: translate3d(0, -10.76923em, 0);
}
.digit6 {
-webkit-transform: translate3d(0, -12.92308em, 0);
-moz-transform: translate3d(0, -12.92308em, 0);
-ms-transform: translate3d(0, -12.92308em, 0);
-o-transform: translate3d(0, -12.92308em, 0);
transform: translate3d(0, -12.92308em, 0);
}
.digit7 {
-webkit-transform: translate3d(0, -15.07692em, 0);
-moz-transform: translate3d(0, -15.07692em, 0);
-ms-transform: translate3d(0, -15.07692em, 0);
-o-transform: translate3d(0, -15.07692em, 0);
transform: translate3d(0, -15.07692em, 0);
}
.digit8 {
-webkit-transform: translate3d(0, -17.23077em, 0);
-moz-transform: translate3d(0, -17.23077em, 0);
-ms-transform: translate3d(0, -17.23077em, 0);
-o-transform: translate3d(0, -17.23077em, 0);
transform: translate3d(0, -17.23077em, 0);
}
.digit9 {
-webkit-transform: translate3d(0, -19.38462em, 0);
-moz-transform: translate3d(0, -19.38462em, 0);
-ms-transform: translate3d(0, -19.38462em, 0);
-o-transform: translate3d(0, -19.38462em, 0);
transform: translate3d(0, -19.38462em, 0);
}
.digitundefined {
-webkit-transform: translate3d(0, -21.53846em, 0);
-moz-transform: translate3d(0, -21.53846em, 0);
-ms-transform: translate3d(0, -21.53846em, 0);
-o-transform: translate3d(0, -21.53846em, 0);
transform: translate3d(0, -21.53846em, 0);
}
/*
-- Digit Delays
*/
.odometer__digits:nth-child(2) > li[class*="number"] {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.odometer__digits:nth-child(3) > li[class*="number"] {
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-ms-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
}
.odometer__digits:nth-child(4) > li[class*="number"] {
-webkit-transition-delay: 750ms;
-moz-transition-delay: 750ms;
-ms-transition-delay: 750ms;
-o-transition-delay: 750ms;
transition-delay: 750ms;
}
.odometer__digits:nth-child(5) > li[class*="number"] {
-webkit-transition-delay: 1000ms;
-moz-transition-delay: 1000ms;
-ms-transition-delay: 1000ms;
-o-transition-delay: 1000ms;
transition-delay: 1000ms;
}
.odometer__digits:nth-child(6) > li[class*="number"] {
-webkit-transition-delay: 1250ms;
-moz-transition-delay: 1250ms;
-ms-transition-delay: 1250ms;
-o-transition-delay: 1250ms;
transition-delay: 1250ms;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment