Skip to content
Browse files

Created a single class to be used to instantiate the plugin.

  • Loading branch information...
1 parent 4110d0f commit 422521d7056bb30871c04fbeee3c7ae9e443a584 @jkintscher jkintscher committed
Showing with 302 additions and 280 deletions.
  1. +4 −0 README.md
  2. +62 −58 assets/coffee/ticker.coffee
  3. +53 −46 assets/css/layout.css
  4. +2 −3 assets/js/interface.js
  5. +102 −97 assets/js/ticker.js
  6. +70 −75 assets/scss/layout.scss
  7. +9 −1 index.html
View
4 README.md
@@ -0,0 +1,4 @@
+
+## TODO
+
+- Prevent box resizing on startup/initial styling
View
120 assets/coffee/ticker.coffee
@@ -7,7 +7,17 @@ $ = jQuery
# Create the plugin within the jQuery context
$.fn.ticker = (options) ->
- new Ticker( $( el ), options ) for el in this
+ for el in this
+ el = $( el )
+
+ if el.hasClass( 'tick-flip' )
+ new Tick_Flip( $( el ), options )
+ else if el.hasClass( 'tick-scroll' )
+ new Tick_Scroll( $( el ), options )
+ else
+ new Tick( el, options )
+
+
@@ -37,7 +47,7 @@ $.fn.ticker = (options) ->
onTick
onStop
###
-class DefaultTicker
+class Tick
constructor: (@element, options={}) ->
@@ -111,7 +121,7 @@ class DefaultTicker
set_timer: () ->
- # setInterval can cause problems in inactive tabs (see: http://goo.gl/pToBS)
+ # setInterval() can cause problems in inactive tabs (see: http://goo.gl/pToBS)
@timer = setTimeout( () =>
this.tick()
, @options.delay ) if @running
@@ -144,9 +154,12 @@ class DefaultTicker
+###
+ CSS3 Transforms browser support:
+ https://developer.mozilla.org/en/CSS/transform#Browser_compatibility
+###
-
-class Ticker extends DefaultTicker
+class Tick_Flip extends Tick
build_container: (i) ->
val = String( @value ).split( '' )[ i ]
@@ -160,83 +173,74 @@ class Ticker extends DefaultTicker
.appendTo( @element )
- update_container: (container, digit) ->
-
- nw = $( container ).children( '.new' )
-
- if( nw.html() != digit )
-
- move = $( container ).children( '.old-move' ).css({ zIndex: 1099 })
-
- move.stop(true, true).addClass( 'moving' ).animate(
- { zIndex: 999 },
- { duration: @options.delay / 4, step: (now, fx) =>
- move.css( '-webkit-transform', "scaleY(#{(now-998)/100})" )
-
- complete: =>
- move.html( digit )
- .removeClass( 'moving' )
-
- nw.css( 'z-index', 1098 )
- new_move = $( container ).children( '.new-move' ).html( digit ).css({ zIndex: 1097 })
-
- new_move.stop(true, true).addClass( 'moving' ).animate(
- { zIndex: 997 },
- { duration: @options.delay / 4, step: (now, fx) =>
- new_move.css( '-webkit-transform', "scaleY(#{1-((now-997)/100)})" )
+ # provides the flip animation based on simple callbacks
+ flip: (target, digit, scale, onComplete) ->
- complete: =>
- new_move.html( digit )
- .removeClass( 'moving' )
+ target.css({ borderSpacing: 100 })
- $( container ).children( '.old' ).html( digit )
- nw.css( 'z-index', '' )
-
-
- }, 'linear' )
+ target.stop(true, true).addClass( 'moving' ).animate(
+ { borderSpacing: 0 },
+ { duration: @options.delay / 4, step: (now, fx) =>
+ val = scale(now)
+ target.css({
+ '-webkit-transform': "scaleY(#{val})",
+ '-moz-transform': "scaleY(#{val})",
+ '-ms-transform': "scaleY(#{val})",
+ '-o-transform': "scaleY(#{val})",
+ 'transform': "scaleY(#{val})"
})
- nw.html( digit )
+ complete: () =>
+ target.html( digit )
+ .css({
+ borderSpacing: '',
+ '-webkit-transform': '',
+ '-moz-transform': '',
+ '-ms-transform': '',
+ '-o-transform': '',
+ 'transform': ''
+ })
+ .removeClass( 'moving' )
+ onComplete()
+ })
+ # calculate the step value for the respective half of the flip card
+ upper: (now) -> now / 100
+ lower: (now) => 1 - this.upper( now )
-class ScrollTicker extends DefaultTicker
-
- build_container: () ->
- $( '<span class="wheel"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span>' ).appendTo( @element )
-
update_container: (container, digit) ->
- $( container ).animate({ top: digit * -96 }, @options.delay )
+ # reference build_container() for elements/indices
+ parts = $( container ).children()
+ if( @running and parts.eq( 2 ).html() != digit )
+ this.flip( parts.eq( 1 ), digit, this.upper, () =>
+ this.flip( parts.eq( 3 ).html( digit ), digit, this.lower, () ->
-class SlidingTicker extends Ticker
+ parts.eq( 0 ).html( digit ) ))
- build_container: () ->
- super.bind( 'updateDigit', (e, target, old, digit) =>
-
- target.animate(
- { backgroundPositionY: digit * -65 },
- { duration: 500 })
- )
-
- update_container: (container, digit) ->
- target = $( container )
- old = target.html()
-
- super.triggerHandler( 'updateDigit', [target, old, digit])
+ parts.eq( 2 ).html( digit )
+class Tick_Scroll extends Tick
+ build_container: (i) ->
+ $( '<span class="wheel"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span>' ).appendTo( @element )
+ update_container: (container, digit) ->
+ if( @running )
+ $( container ).animate({ top: digit * -96 }, @options.delay )
+ else
+ $( container ).css({ top: digit * -96 })
View
99 assets/css/layout.css
@@ -1,3 +1,4 @@
+/* */
/* Declare Font Families for Internet Explorer < 9 */
@font-face {
font-family: "ff-dagny-web-pro-1";
@@ -24,14 +25,11 @@
font-style: normal;
font-weight: 600; }
-/* */
-/* */
-/* */
body {
- width: 800px;
+ width: 640px;
margin: 0 auto;
font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
- background-color: #e6e6e6;
+ background-color: white;
color: #1e1e1e; }
h1 {
@@ -40,57 +38,65 @@ h1 {
font-weight: bold; }
p {
+ overflow: hidden;
clear: both;
margin: 1.5em 0;
line-height: 1.5; }
+em {
+ clear: left;
+ float: left;
+ display: inline-block;
+ padding: 2px 5px;
+ border-radius: 4px; }
+
/*
- Tick.flip
+ Tick.tick-flip
*/
-.ticker.flip {
+.tick-flip {
position: relative;
float: left;
- padding: 15px 10px;
- border: 10px solid #f0f0f0;
+ padding: 7px;
+ border: 7px solid #1e1e1e;
border-radius: 5px;
box-shadow: 0 0 6px #969696;
- background: -webkit-linear-gradient(top, #c8c8c8 0%, #fafafa 20%);
+ background: -webkit-linear-gradient(top, #2d2d2d 0%, #464646 30%);
line-height: 1;
- font-size: 6em;
+ font-size: 4em;
text-align: center; }
-.ticker.flip .seperator {
- margin: 0 5px;
+.tick-flip .seperator {
+ margin: 0 2px;
font-size: 0.6em;
- color: #646464; }
+ color: #b4b4b4; }
-.ticker.flip .wrapper {
+.tick-flip .wrapper {
position: relative;
display: inline-block;
- margin: 0 5px;
+ margin: 0 2px;
border-radius: 4px; }
-.ticker.flip .wrapper:after {
+.tick-flip .wrapper:after {
position: absolute;
display: block;
top: 50%;
- z-index: 999;
+ z-index: 996;
display: block;
height: 1px;
width: 100%;
content: '';
- background-color: #c8c8c8; }
+ background-color: #323232; }
-.ticker.flip .wrapper span {
+.tick-flip .wrapper span {
padding: 0 5px; }
-.ticker.flip .old {
+.tick-flip .old {
display: block;
border-radius: 4px;
- box-shadow: 0 0 5px #505050;
- background: -webkit-linear-gradient(top, white 30%, #c8c8c8 100%); }
+ box-shadow: 0 0 5px black;
+ background: -webkit-linear-gradient(top, white 60%, #bebebe 100%); }
-.ticker.flip .new {
+.tick-flip .new {
overflow: hidden;
position: absolute;
z-index: 998;
@@ -98,39 +104,40 @@ p {
display: block;
height: 50%;
border-radius: 4px 4px 0 0;
- background: -webkit-linear-gradient(top, white 0%, #c8c8c8 100%); }
+ background: -webkit-linear-gradient(top, white 0%, #bebebe 100%); }
-.ticker.flip .old-move,
-.ticker.flip .new-move {
+.tick-flip .old-move,
+.tick-flip .new-move {
overflow: hidden;
position: absolute;
display: none;
border-radius: 4px;
- background: #c8c8c8; }
+ background: white; }
-.ticker.flip .moving {
+.tick-flip .moving {
display: block; }
-.ticker.flip .old-move {
+.tick-flip .old-move {
z-index: 999;
bottom: 50%;
height: 50%;
- background: -webkit-linear-gradient(top, white 0%, #afafaf 100%);
- box-shadow: 0 -5px 7px -5px #969696;
+ background: -webkit-linear-gradient(top, white 0%, #b4b4b4 100%);
+ box-shadow: 0 -4px 4px -3px black;
-webkit-transform-origin: bottom left; }
-.ticker.flip .new-move {
+.tick-flip .new-move {
z-index: 997;
height: 100%;
top: 0;
+ border-radius: 50px 50px 4px 4px;
background: -webkit-linear-gradient(top, white 40%, #b4b4b4 100%);
- box-shadow: 0 4px 6px -4px #969696;
+ box-shadow: 0 4px 4px -3px black;
-webkit-transform-origin: top left; }
/*
- Tick.scroll
+ Tick.tick-scroll
*/
-.ticker.scrolling {
+.tick-scroll {
overflow: hidden;
position: relative;
float: left;
@@ -148,8 +155,8 @@ p {
/*
Adding depth to the ticker by overlaying some gradients
*/
-.ticker.scrolling:before,
-.ticker.scrolling:after {
+.tick-scroll:before,
+.tick-scroll:after {
position: absolute;
z-index: 999;
left: 0;
@@ -159,11 +166,11 @@ p {
border-radius: 5px;
background: red; }
-.ticker.scrolling:before {
+.tick-scroll:before {
background: -webkit-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%);
background: linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%); }
-.ticker.scrolling:after {
+.tick-scroll:after {
bottom: 0;
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0) 0%, rgba(40, 40, 40, 0) 1%, #282828 80%, #282828 100%);
background: linear-gradient(top, rgba(40, 40, 40, 0) 0%, rgba(40, 40, 40, 0) 1%, #282828 80%, #282828 100%); }
@@ -171,7 +178,7 @@ p {
/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
-.ticker.scrolling .wheel {
+.tick-scroll .wheel {
position: relative;
display: inline-block;
width: 50px;
@@ -180,23 +187,23 @@ p {
margin: 0 2px;
background-color: #505050; }
-.ticker.scrolling .wheel span {
+.tick-scroll .wheel span {
display: block;
padding: 16px 0; }
-.ticker.scrolling .seperator {
+.tick-scroll .seperator {
font-weight: normal; }
/*
Tick.slide [DEPRECATED]
*/
-.ticker.sliding {
+.sliding {
display: inline-block;
padding: 10px;
color: white;
background-color: #141414; }
-.ticker.sliding span {
+.sliding span {
display: inline-block;
width: 50px;
height: 65px;
@@ -207,7 +214,7 @@ p {
background: url("../img/sprite.gif");
text-indent: -999em; }
-.ticker.sliding .seperator {
+.sliding .seperator {
width: 20px;
padding-right: 2px;
padding-left: 0;
View
5 assets/js/interface.js
@@ -2,12 +2,11 @@
$( document ).ready( function()
{
- $( '.ticker' ).ticker(
+ $( '.tick' ).ticker(
{
- delay: 800,
+ delay: 900,
incremental: 1,
seperators: true,
autostart: true
});
-
});
View
199 assets/js/ticker.js
@@ -1,5 +1,6 @@
(function() {
- var $, DefaultTicker, ScrollTicker, SlidingTicker, Ticker,
+ var $, Tick, Tick_Flip, Tick_Scroll,
+ __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__hasProp = Object.prototype.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
@@ -10,7 +11,14 @@
_results = [];
for (_i = 0, _len = this.length; _i < _len; _i++) {
el = this[_i];
- _results.push(new Ticker($(el), options));
+ el = $(el);
+ if (el.hasClass('tick-flip')) {
+ _results.push(new Tick_Flip($(el), options));
+ } else if (el.hasClass('tick-scroll')) {
+ _results.push(new Tick_Scroll($(el), options));
+ } else {
+ _results.push(new Tick(el, options));
+ }
}
return _results;
};
@@ -42,9 +50,9 @@
onStop
*/
- DefaultTicker = (function() {
+ Tick = (function() {
- function DefaultTicker(element, options) {
+ function Tick(element, options) {
this.element = element;
if (options == null) options = {};
this.running = false;
@@ -59,7 +67,7 @@
if (this.options.autostart) this.start();
}
- DefaultTicker.prototype.render = function() {
+ Tick.prototype.render = function() {
var container, containers, digits, i, _len, _ref, _results;
digits = String(this.value).split('');
containers = this.element.children(':not(.seperator)');
@@ -83,25 +91,25 @@
These methods will create all visible elements and manipulate the output
*/
- DefaultTicker.prototype.build_container = function(i) {
+ Tick.prototype.build_container = function(i) {
return $('<span></span>').appendTo(this.element);
};
- DefaultTicker.prototype.build_seperator = function(content) {
+ Tick.prototype.build_seperator = function(content) {
return $("<span class='seperator'>" + content + "</span>").appendTo(this.element);
};
- DefaultTicker.prototype.update_container = function(container, digit) {
+ Tick.prototype.update_container = function(container, digit) {
return $(container).html(digit);
};
- DefaultTicker.prototype.refresh_delay = function(new_delay) {
+ Tick.prototype.refresh_delay = function(new_delay) {
clearTimeout(this.timer);
this.options.delay = new_delay;
return this.set_timer();
};
- DefaultTicker.prototype.set_timer = function() {
+ Tick.prototype.set_timer = function() {
var _this = this;
if (this.running) {
return this.timer = setTimeout(function() {
@@ -114,7 +122,7 @@
Events
*/
- DefaultTicker.prototype.tick = function() {
+ Tick.prototype.tick = function() {
this.value += this.options.incremental;
this.render();
return this.set_timer();
@@ -124,131 +132,128 @@
Controls for the ticker
*/
- DefaultTicker.prototype.start = function() {
+ Tick.prototype.start = function() {
this.element.empty();
this.render();
this.running = true;
return this.set_timer();
};
- DefaultTicker.prototype.stop = function() {
+ Tick.prototype.stop = function() {
clearTimeout(this.timer);
return this.running = false;
};
- return DefaultTicker;
+ return Tick;
})();
- Ticker = (function(_super) {
+ /*
+ CSS3 Transforms browser support:
+ https://developer.mozilla.org/en/CSS/transform#Browser_compatibility
+ */
+
+ Tick_Flip = (function(_super) {
- __extends(Ticker, _super);
+ __extends(Tick_Flip, _super);
- function Ticker() {
- Ticker.__super__.constructor.apply(this, arguments);
+ function Tick_Flip() {
+ this.lower = __bind(this.lower, this);
+ Tick_Flip.__super__.constructor.apply(this, arguments);
}
- Ticker.prototype.build_container = function(i) {
+ Tick_Flip.prototype.build_container = function(i) {
var val;
val = String(this.value).split('')[i];
return $("<span class='wrapper'> <span class='old'>" + val + "</span> <span class='old-move'>" + val + "</span> <span class='new'></span> <span class='new-move'>" + val + "</span> </span>").appendTo(this.element);
};
- Ticker.prototype.update_container = function(container, digit) {
- var move, nw,
- _this = this;
- nw = $(container).children('.new');
- if (nw.html() !== digit) {
- move = $(container).children('.old-move').css({
- zIndex: 1099
- });
- move.stop(true, true).addClass('moving').animate({
- zIndex: 999
- }, {
- duration: this.options.delay / 4,
- step: function(now, fx) {
- return move.css('-webkit-transform', "scaleY(" + ((now - 998) / 100) + ")");
- },
- complete: function() {
- var new_move;
- move.html(digit).removeClass('moving');
- nw.css('z-index', 1098);
- new_move = $(container).children('.new-move').html(digit).css({
- zIndex: 1097
- });
- return new_move.stop(true, true).addClass('moving').animate({
- zIndex: 997
- }, {
- duration: _this.options.delay / 4,
- step: function(now, fx) {
- return new_move.css('-webkit-transform', "scaleY(" + (1 - ((now - 997) / 100)) + ")");
- },
- complete: function() {
- new_move.html(digit).removeClass('moving');
- $(container).children('.old').html(digit);
- return nw.css('z-index', '');
- }
- }, 'linear');
- }
- });
- }
- return nw.html(digit);
+ Tick_Flip.prototype.flip = function(target, digit, scale, onComplete) {
+ var _this = this;
+ target.css({
+ borderSpacing: 100
+ });
+ return target.stop(true, true).addClass('moving').animate({
+ borderSpacing: 0
+ }, {
+ duration: this.options.delay / 4,
+ step: function(now, fx) {
+ var val;
+ val = scale(now);
+ return target.css({
+ '-webkit-transform': "scaleY(" + val + ")",
+ '-moz-transform': "scaleY(" + val + ")",
+ '-ms-transform': "scaleY(" + val + ")",
+ '-o-transform': "scaleY(" + val + ")",
+ 'transform': "scaleY(" + val + ")"
+ });
+ },
+ complete: function() {
+ target.html(digit).css({
+ borderSpacing: '',
+ '-webkit-transform': '',
+ '-moz-transform': '',
+ '-ms-transform': '',
+ '-o-transform': '',
+ 'transform': ''
+ }).removeClass('moving');
+ return onComplete();
+ }
+ });
};
- return Ticker;
-
- })(DefaultTicker);
-
- ScrollTicker = (function(_super) {
-
- __extends(ScrollTicker, _super);
-
- function ScrollTicker() {
- ScrollTicker.__super__.constructor.apply(this, arguments);
- }
+ Tick_Flip.prototype.upper = function(now) {
+ return now / 100;
+ };
- ScrollTicker.prototype.build_container = function() {
- return $('<span class="wheel"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span>').appendTo(this.element);
+ Tick_Flip.prototype.lower = function(now) {
+ return 1 - this.upper(now);
};
- ScrollTicker.prototype.update_container = function(container, digit) {
- return $(container).animate({
- top: digit * -96
- }, this.options.delay);
+ Tick_Flip.prototype.update_container = function(container, digit) {
+ var parts,
+ _this = this;
+ parts = $(container).children();
+ if (this.running && parts.eq(2).html() !== digit) {
+ this.flip(parts.eq(1), digit, this.upper, function() {
+ return _this.flip(parts.eq(3).html(digit), digit, _this.lower, function() {
+ return parts.eq(0).html(digit);
+ });
+ });
+ }
+ return parts.eq(2).html(digit);
};
- return ScrollTicker;
+ return Tick_Flip;
- })(DefaultTicker);
+ })(Tick);
- SlidingTicker = (function(_super) {
+ Tick_Scroll = (function(_super) {
- __extends(SlidingTicker, _super);
+ __extends(Tick_Scroll, _super);
- function SlidingTicker() {
- SlidingTicker.__super__.constructor.apply(this, arguments);
+ function Tick_Scroll() {
+ Tick_Scroll.__super__.constructor.apply(this, arguments);
}
- SlidingTicker.prototype.build_container = function() {
- var _this = this;
- return SlidingTicker.__super__.build_container.apply(this, arguments).bind('updateDigit', function(e, target, old, digit) {
- return target.animate({
- backgroundPositionY: digit * -65
- }, {
- duration: 500
- });
- });
+ Tick_Scroll.prototype.build_container = function(i) {
+ return $('<span class="wheel"><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></span>').appendTo(this.element);
};
- SlidingTicker.prototype.update_container = function(container, digit) {
- var old, target;
- target = $(container);
- old = target.html();
- return SlidingTicker.__super__.update_container.apply(this, arguments).triggerHandler('updateDigit', [target, old, digit]);
+ Tick_Scroll.prototype.update_container = function(container, digit) {
+ if (this.running) {
+ return $(container).animate({
+ top: digit * -96
+ }, this.options.delay);
+ } else {
+ return $(container).css({
+ top: digit * -96
+ });
+ }
};
- return SlidingTicker;
+ return Tick_Scroll;
- })(Ticker);
+ })(Tick);
}).call(this);
View
145 assets/scss/layout.scss
@@ -1,3 +1,27 @@
+
+$background: rgb(255,255,255);
+$foreground: rgb(30,30,30);
+
+$border_color: rgb(30,30,30);
+$box_shadow_color: rgb(150,150,150);
+$gradient: -webkit-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(70,70,70,1) 30%);
+
+$old_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 60%,rgba(190,190,190,1) 100%);
+$old_move_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(180,180,180,1) 100%);
+$new_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(190,190,190,1) 100%);
+$new_move_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 40%,rgba(180,180,180,1) 100%);
+
+$move_background: rgb(255,255,255);
+$seperator_color: rgb(180,180,180);
+$bar_color: rgb(50,50,50);
+$bar_height: 1px;
+
+$move_shadow_color: rgb(0,0,0);
+
+/* */
+
+
+
/* Declare Font Families for Internet Explorer < 9 */
@font-face {
font-family: "ff-dagny-web-pro-1";
@@ -25,48 +49,9 @@
font-weight: 600;
}
-/* */
-$background: rgb(30,30,30);
-$foreground: rgb(255,255,255);
-
-$border_color: rgb(20,20,20);
-$box_shadow_color: rgb(0,0,0);
-$gradient: -webkit-linear-gradient(top, rgba(15,15,15,1) 0%,rgba(28,28,28,1) 20%);
-
-$old_gradient: -webkit-linear-gradient(top, rgba(50,50,50,1) 30%,rgba(20,20,20,1) 100%);
-$old_move_gradient: -webkit-linear-gradient(top, rgba(50,50,50,1) 0%,rgba(25,25,25,1) 100%);
-$new_gradient: -webkit-linear-gradient(top, rgba(50,50,50,1) 0%,rgba(30,30,30,1) 100%);
-$new_move_gradient: -webkit-linear-gradient(top, rgba(50,50,50,1) 40%,rgba(20,20,20,1) 100%);
-
-$move_background: rgb(50,50,50);
-$seperator_color: rgb(180,180,180);
-$bar_color: rgb(25,25,25);
-
-$move_shadow_color: rgb(0,0,0);
-
-/* */
-
-$background: rgb(230,230,230);
-$foreground: rgb(30,30,30);
-
-$border_color: rgb(240,240,240);
-$box_shadow_color: rgb(150,150,150);
-$gradient: -webkit-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(250,250,250,1) 20%);
-
-$old_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 30%,rgba(200,200,200,1) 100%);
-$old_move_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(175,175,175,1) 100%);
-$new_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(200,200,200,1) 100%);
-$new_move_gradient: -webkit-linear-gradient(top, rgba(255,255,255,1) 40%,rgba(180,180,180,1) 100%);
-
-$move_background: rgb(200,200,200);
-$seperator_color: rgb(100,100,100);
-$bar_color: rgb(200,200,200);
-
-$move_shadow_color: rgb(80,80,80);
-/* */
body {
- width: 800px;
+ width: 640px;
margin: 0 auto;
font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: $background;
@@ -80,21 +65,29 @@ h1 {
}
p {
+ overflow: hidden;
clear: both;
margin: 1.5em 0;
line-height: 1.5;
}
+em {
+ clear: left;
+ float: left;
+ display: inline-block;
+ padding: 2px 5px;
+ border-radius: 4px;
+}
+
/*
- Tick.flip
+ Tick.tick-flip
*/
-.ticker.flip {
+.tick-flip {
position: relative;
float: left;
-
- padding: 15px 10px;
- border: 10px solid $border_color;
+ padding: 7px;
+ border: 7px solid $border_color;
border-radius: 5px;
box-shadow: 0 0 6px $box_shadow_color;
background: $gradient;
@@ -102,46 +95,47 @@ p {
line-height: 1;
font: {
- size: 6em;
+ size: 4em;
}
text: {
align: center;
}
}
- .ticker.flip .seperator {
- margin: 0 5px;
+ .tick-flip .seperator {
+ margin: 0 2px;
font-size: 0.6em;
color: $seperator_color;
}
- .ticker.flip .wrapper {
+ .tick-flip .wrapper {
position: relative;
display: inline-block;
- margin: 0 5px;
+ margin: 0 2px;
border-radius: 4px;
}
- .ticker.flip .wrapper:after {
+ .tick-flip .wrapper:after {
position: absolute;
display: block;
top: 50%;
- z-index: 999;
+ z-index: 996;
display: block;
- height: 1px;
+ height: $bar_height;
width: 100%;
content: '';
background-color: $bar_color;
}
- .ticker.flip .wrapper span {
+
+ .tick-flip .wrapper span {
padding: 0 5px;
}
- .ticker.flip .old {
+ .tick-flip .old {
display: block;
border-radius: 4px;
box-shadow: 0 0 5px $move_shadow_color;
background: $old_gradient;
}
- .ticker.flip .new {
+ .tick-flip .new {
overflow: hidden;
position: absolute;
z-index: 998;
@@ -154,8 +148,8 @@ p {
background: $new_gradient;
}
- .ticker.flip .old-move,
- .ticker.flip .new-move {
+ .tick-flip .old-move,
+ .tick-flip .new-move {
overflow: hidden;
position: absolute;
display: none;
@@ -163,24 +157,25 @@ p {
background: $move_background;
}
- .ticker.flip .moving {
+ .tick-flip .moving {
display: block;
}
- .ticker.flip .old-move {
+ .tick-flip .old-move {
z-index: 999;
bottom: 50%;
height: 50%;
background: $old_move_gradient;
- box-shadow: 0 -5px 7px -5px $box_shadow_color;
+ box-shadow: 0 -4px 4px -3px $move_shadow_color;
-webkit-transform-origin: bottom left;
}
- .ticker.flip .new-move {
+ .tick-flip .new-move {
z-index: 997;
height: 100%;
top: 0;
+ border-radius: 50px 50px 4px 4px;
background: $new_move_gradient;
- box-shadow: 0 4px 6px -4px $box_shadow_color;
+ box-shadow: 0 4px 4px -3px $move_shadow_color;
-webkit-transform-origin: top left;
}
@@ -188,9 +183,9 @@ p {
/*
- Tick.scroll
+ Tick.tick-scroll
*/
-.ticker.scrolling {
+.tick-scroll {
overflow: hidden;
position: relative;
float: left;
@@ -217,8 +212,8 @@ p {
/*
Adding depth to the ticker by overlaying some gradients
*/
- .ticker.scrolling:before,
- .ticker.scrolling:after {
+ .tick-scroll:before,
+ .tick-scroll:after {
position: absolute;
z-index: 999;
left: 0;
@@ -230,11 +225,11 @@ p {
background: red;
}
- .ticker.scrolling:before {
+ .tick-scroll:before {
background: -webkit-linear-gradient(top, rgba(40,40,40,1) 0%,rgba(40,40,40,1) 20%,rgba(40,40,40,0) 100%);
background: linear-gradient(top, rgba(40,40,40,1) 0%,rgba(40,40,40,1) 20%,rgba(40,40,40,0) 100%);
}
- .ticker.scrolling:after {
+ .tick-scroll:after {
bottom: 0;
background: -webkit-linear-gradient(top, rgba(40,40,40,0) 0%,rgba(40,40,40,0) 1%,rgba(40,40,40,1) 80%,rgba(40,40,40,1) 100%);
background: linear-gradient(top, rgba(40,40,40,0) 0%,rgba(40,40,40,0) 1%,rgba(40,40,40,1) 80%,rgba(40,40,40,1) 100%);
@@ -243,7 +238,7 @@ p {
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
- .ticker.scrolling .wheel {
+ .tick-scroll .wheel {
position: relative;
display: inline-block;
width: 50px;
@@ -254,12 +249,12 @@ p {
background-color: rgb(80,80,80);
}
- .ticker.scrolling .wheel span {
+ .tick-scroll .wheel span {
display: block;
padding: 16px 0;
}
- .ticker.scrolling .seperator {
+ .tick-scroll .seperator {
font-weight: normal;
}
@@ -270,14 +265,14 @@ p {
/*
Tick.slide [DEPRECATED]
*/
-.ticker.sliding {
+.sliding {
display: inline-block;
padding: 10px;
color: rgb(255,255,255);
background-color: rgb(20,20,20);
}
- .ticker.sliding span {
+ .sliding span {
display: inline-block;
width: 50px;
@@ -292,7 +287,7 @@ p {
text-indent: -999em;
}
- .ticker.sliding .seperator {
+ .sliding .seperator {
width: 20px;
padding-right: 2px;
padding-left: 0;
View
10 index.html
@@ -8,7 +8,15 @@
</head>
<body>
- <p class="flip ticker">162,006,997</p>
+ <p>
+ <span class="tick tick-flip">162,006,992</span>
+ <em>HARVEST</em>
+ </p>
+
+ <p>
+ <span class="tick tick-scroll">162,006,992</span>
+ <em>HARVEST</em>
+ </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

0 comments on commit 422521d

Please sign in to comment.
Something went wrong with that request. Please try again.