From 4110d0ff2d0b4677064e6514919b8bd2e4c78204 Mon Sep 17 00:00:00 2001 From: Joschka Kintscher Date: Mon, 13 Feb 2012 17:56:49 -0500 Subject: [PATCH] Added first flip animation with different black and white styles. --- assets/coffee/ticker.coffee | 79 +++++++++++++----------- assets/css/layout.css | 87 +++++++++++++------------- assets/js/interface.js | 2 +- assets/js/ticker.js | 120 ++++++++++++++++++++---------------- assets/scss/layout.scss | 108 +++++++++++++++++++++++--------- index.html | 7 --- 6 files changed, 235 insertions(+), 168 deletions(-) diff --git a/assets/coffee/ticker.coffee b/assets/coffee/ticker.coffee index 82635ce..000c85e 100644 --- a/assets/coffee/ticker.coffee +++ b/assets/coffee/ticker.coffee @@ -37,10 +37,12 @@ $.fn.ticker = (options) -> onTick onStop ### -class StandardTicker +class DefaultTicker constructor: (@element, options={}) -> + @running = no + @options = incremental: options.incremental or 1 delay: options.delay or 1000 @@ -102,13 +104,17 @@ class StandardTicker # dynamically reset the delay during runtime refresh_delay: (new_delay) -> - clearInterval( @periodic ); + clearTimeout( @timer ); @options.delay = new_delay + this.set_timer() + - # call the tick() method inside this object's context - @periodic = setInterval( () => + set_timer: () -> + + # setInterval can cause problems in inactive tabs (see: http://goo.gl/pToBS) + @timer = setTimeout( () => this.tick() - , @options.delay ); + , @options.delay ) if @running ### @@ -117,31 +123,30 @@ class StandardTicker tick: () -> @value += @options.incremental this.render() + this.set_timer() ### Controls for the ticker ### start: () -> - - @element.empty(); + @element.empty() this.render() - # call the tick() method inside this object's context - @periodic = setInterval( () => - this.tick() - , @options.delay ); + @running = yes + this.set_timer() stop: () -> - clearInterval( @periodic ); + clearTimeout( @timer ); + @running = no -class Ticker extends StandardTicker +class Ticker extends DefaultTicker build_container: (i) -> val = String( @value ).split( '' )[ i ] @@ -157,38 +162,47 @@ class Ticker extends StandardTicker update_container: (container, digit) -> - if( $( container ).children( '.new' ).html() != digit ) + nw = $( container ).children( '.new' ) + + if( nw.html() != digit ) - move = $( container ).children( '.old-move' ) + move = $( container ).children( '.old-move' ).css({ zIndex: 1099 }) - move.animate( - { height: 0, 'background-color': 'rgb(100,100,100)' }, + move.stop(true, true).addClass( 'moving' ).animate( + { zIndex: 999 }, { duration: @options.delay / 4, step: (now, fx) => -# console.log now + move.css( '-webkit-transform', "scaleY(#{(now-998)/100})" ) complete: => - move.html( digit ) - .removeAttr( 'style' ) + .removeClass( 'moving' ) + + nw.css( 'z-index', 1098 ) + new_move = $( container ).children( '.new-move' ).html( digit ).css({ zIndex: 1097 }) - new_move = $( container ).children( '.new-move' ).html( digit ) + 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)})" ) + + complete: => + new_move.html( digit ) + .removeClass( 'moving' ) - new_move.animate( - { height: '100%' }, - { duration: @options.delay / 4, complete: => - new_move.removeAttr( 'style' ) $( container ).children( '.old' ).html( digit ) - }) - }) + nw.css( 'z-index', '' ) - $( container ).children( '.new' ).html( digit ) + }, 'linear' ) + }) + + nw.html( digit ) -class ScrollingTicker extends StandardTicker +class ScrollTicker extends DefaultTicker build_container: () -> $( '0123456789' ).appendTo( @element ) @@ -197,15 +211,10 @@ class ScrollingTicker extends StandardTicker $( container ).animate({ top: digit * -96 }, @options.delay ) - # Just for testing... Useful later in combination with live data streamed from a server - tick: () -> super this.refresh_delay( 200 ) if @value == 162007012 - - - -class SlidingTicker extends StandardTicker +class SlidingTicker extends Ticker build_container: () -> diff --git a/assets/css/layout.css b/assets/css/layout.css index 3e03870..4bd8e40 100644 --- a/assets/css/layout.css +++ b/assets/css/layout.css @@ -24,10 +24,15 @@ font-style: normal; font-weight: 600; } +/* */ +/* */ +/* */ body { - width: 680px; + width: 800px; margin: 0 auto; - font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2", "Helvetica Neue", Helvetica, Arial, sans-serif; } + font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2", "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: #e6e6e6; + color: #1e1e1e; } h1 { margin: 1em 0 0; @@ -45,44 +50,45 @@ p { .ticker.flip { position: relative; float: left; - padding: 0 10px; - height: 96px; + padding: 15px 10px; + border: 10px solid #f0f0f0; border-radius: 5px; - color: white; + box-shadow: 0 0 6px #969696; + background: -webkit-linear-gradient(top, #c8c8c8 0%, #fafafa 20%); line-height: 1; - font-size: 4em; - font-weight: bold; - text-align: center; - text-shadow: 0 0 3px #323232; } + font-size: 6em; + text-align: center; } .ticker.flip .seperator { - margin: 0 10px 0 5px; } + margin: 0 5px; + font-size: 0.6em; + color: #646464; } .ticker.flip .wrapper { position: relative; display: inline-block; - margin-right: 10px; - width: 50px; - color: #333; - overflow: hidden; - border-radius: 4px; - box-shadow: 0 0 5px #BBB; } + margin: 0 5px; + border-radius: 4px; } .ticker.flip .wrapper:after { position: absolute; display: block; top: 50%; - z-index: 10000; + z-index: 999; display: block; - height: 2px; + height: 1px; width: 100%; content: ''; - background-color: white; } + background-color: #c8c8c8; } + +.ticker.flip .wrapper span { + padding: 0 5px; } .ticker.flip .old { display: block; border-radius: 4px; - background: #c8c8c8; } + box-shadow: 0 0 5px #505050; + background: -webkit-linear-gradient(top, white 30%, #c8c8c8 100%); } .ticker.flip .new { overflow: hidden; @@ -90,29 +96,36 @@ p { z-index: 998; top: 0; display: block; - width: 100%; height: 50%; border-radius: 4px 4px 0 0; - background: #c8c8c8; } + background: -webkit-linear-gradient(top, white 0%, #c8c8c8 100%); } .ticker.flip .old-move, .ticker.flip .new-move { overflow: hidden; position: absolute; - display: block; - width: 100%; - border-radius: 4px 4px 0 0; - background-color: #c8c8c8; } + display: none; + border-radius: 4px; + background: #c8c8c8; } + +.ticker.flip .moving { + display: block; } .ticker.flip .old-move { z-index: 999; bottom: 50%; - height: 50%; } + height: 50%; + background: -webkit-linear-gradient(top, white 0%, #afafaf 100%); + box-shadow: 0 -5px 7px -5px #969696; + -webkit-transform-origin: bottom left; } .ticker.flip .new-move { z-index: 997; - height: 50%; - top: 0; } + height: 100%; + top: 0; + background: -webkit-linear-gradient(top, white 40%, #b4b4b4 100%); + box-shadow: 0 4px 6px -4px #969696; + -webkit-transform-origin: top left; } /* Tick.scroll @@ -147,23 +160,13 @@ p { background: red; } .ticker.scrolling:before { - background: -moz-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #282828), color-stop(20%, #282828), color-stop(100%, rgba(40, 40, 40, 0))); background: -webkit-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%); - background: -o-linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%); - background: -ms-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%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#00282828',GradientType=0 ); } + background: linear-gradient(top, #282828 0%, #282828 20%, rgba(40, 40, 40, 0) 100%); } .ticker.scrolling:after { bottom: 0; - background: -moz-linear-gradient(top, rgba(40, 40, 40, 0) 0%, rgba(40, 40, 40, 0) 1%, #282828 80%, #282828 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(40, 40, 40, 0)), color-stop(1%, rgba(40, 40, 40, 0)), color-stop(80%, #282828), color-stop(100%, #282828)); background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0) 0%, rgba(40, 40, 40, 0) 1%, #282828 80%, #282828 100%); - background: -o-linear-gradient(top, rgba(40, 40, 40, 0) 0%, rgba(40, 40, 40, 0) 1%, #282828 80%, #282828 100%); - background: -ms-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%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00282828', endColorstr='#282828',GradientType=0 ); } + background: linear-gradient(top, rgba(40, 40, 40, 0) 0%, rgba(40, 40, 40, 0) 1%, #282828 80%, #282828 100%); } /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -185,7 +188,7 @@ p { font-weight: normal; } /* - Tick.slide + Tick.slide [DEPRECATED] */ .ticker.sliding { display: inline-block; diff --git a/assets/js/interface.js b/assets/js/interface.js index 17efb56..0301dcd 100644 --- a/assets/js/interface.js +++ b/assets/js/interface.js @@ -4,7 +4,7 @@ $( document ).ready( function() $( '.ticker' ).ticker( { - delay: 1000, + delay: 800, incremental: 1, seperators: true, autostart: true diff --git a/assets/js/ticker.js b/assets/js/ticker.js index 43ae972..8814d23 100644 --- a/assets/js/ticker.js +++ b/assets/js/ticker.js @@ -1,5 +1,5 @@ (function() { - var $, ScrollingTicker, SlidingTicker, StandardTicker, Ticker, + var $, DefaultTicker, ScrollTicker, SlidingTicker, Ticker, __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; }; @@ -42,11 +42,12 @@ onStop */ - StandardTicker = (function() { + DefaultTicker = (function() { - function StandardTicker(element, options) { + function DefaultTicker(element, options) { this.element = element; if (options == null) options = {}; + this.running = false; this.options = { incremental: options.incremental || 1, delay: options.delay || 1000, @@ -58,7 +59,7 @@ if (this.options.autostart) this.start(); } - StandardTicker.prototype.render = function() { + DefaultTicker.prototype.render = function() { var container, containers, digits, i, _len, _ref, _results; digits = String(this.value).split(''); containers = this.element.children(':not(.seperator)'); @@ -82,54 +83,60 @@ These methods will create all visible elements and manipulate the output */ - StandardTicker.prototype.build_container = function(i) { + DefaultTicker.prototype.build_container = function(i) { return $('').appendTo(this.element); }; - StandardTicker.prototype.build_seperator = function(content) { + DefaultTicker.prototype.build_seperator = function(content) { return $("" + content + "").appendTo(this.element); }; - StandardTicker.prototype.update_container = function(container, digit) { + DefaultTicker.prototype.update_container = function(container, digit) { return $(container).html(digit); }; - StandardTicker.prototype.refresh_delay = function(new_delay) { - var _this = this; - clearInterval(this.periodic); + DefaultTicker.prototype.refresh_delay = function(new_delay) { + clearTimeout(this.timer); this.options.delay = new_delay; - return this.periodic = setInterval(function() { - return _this.tick(); - }, this.options.delay); + return this.set_timer(); + }; + + DefaultTicker.prototype.set_timer = function() { + var _this = this; + if (this.running) { + return this.timer = setTimeout(function() { + return _this.tick(); + }, this.options.delay); + } }; /* Events */ - StandardTicker.prototype.tick = function() { + DefaultTicker.prototype.tick = function() { this.value += this.options.incremental; - return this.render(); + this.render(); + return this.set_timer(); }; /* Controls for the ticker */ - StandardTicker.prototype.start = function() { - var _this = this; + DefaultTicker.prototype.start = function() { this.element.empty(); this.render(); - return this.periodic = setInterval(function() { - return _this.tick(); - }, this.options.delay); + this.running = true; + return this.set_timer(); }; - StandardTicker.prototype.stop = function() { - return clearInterval(this.periodic); + DefaultTicker.prototype.stop = function() { + clearTimeout(this.timer); + return this.running = false; }; - return StandardTicker; + return DefaultTicker; })(); @@ -148,66 +155,71 @@ }; Ticker.prototype.update_container = function(container, digit) { - var move, + var move, nw, _this = this; - if ($(container).children('.new').html() !== digit) { - move = $(container).children('.old-move'); - move.animate({ - height: 0, - 'background-color': 'rgb(100,100,100)' + 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) {}, + step: function(now, fx) { + return move.css('-webkit-transform', "scaleY(" + ((now - 998) / 100) + ")"); + }, complete: function() { var new_move; - move.html(digit).removeAttr('style'); - new_move = $(container).children('.new-move').html(digit); - return new_move.animate({ - height: '100%' + 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.removeAttr('style'); - return $(container).children('.old').html(digit); + new_move.html(digit).removeClass('moving'); + $(container).children('.old').html(digit); + return nw.css('z-index', ''); } - }); + }, 'linear'); } }); } - return $(container).children('.new').html(digit); + return nw.html(digit); }; return Ticker; - })(StandardTicker); + })(DefaultTicker); - ScrollingTicker = (function(_super) { + ScrollTicker = (function(_super) { - __extends(ScrollingTicker, _super); + __extends(ScrollTicker, _super); - function ScrollingTicker() { - ScrollingTicker.__super__.constructor.apply(this, arguments); + function ScrollTicker() { + ScrollTicker.__super__.constructor.apply(this, arguments); } - ScrollingTicker.prototype.build_container = function() { + ScrollTicker.prototype.build_container = function() { return $('0123456789').appendTo(this.element); }; - ScrollingTicker.prototype.update_container = function(container, digit) { + ScrollTicker.prototype.update_container = function(container, digit) { return $(container).animate({ top: digit * -96 }, this.options.delay); }; - ScrollingTicker.prototype.tick = function() { - if (this.value === 162007012) { - return ScrollingTicker.__super__.tick.call(this, this.refresh_delay(200)); - } - }; - - return ScrollingTicker; + return ScrollTicker; - })(StandardTicker); + })(DefaultTicker); SlidingTicker = (function(_super) { @@ -237,6 +249,6 @@ return SlidingTicker; - })(StandardTicker); + })(Ticker); }).call(this); diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss index 47f4c63..16708d5 100644 --- a/assets/scss/layout.scss +++ b/assets/scss/layout.scss @@ -25,12 +25,52 @@ 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: 680px; + width: 800px; margin: 0 auto; font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2", "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: $background; + color: $foreground; } h1 { @@ -46,7 +86,6 @@ p { } - /* Tick.flip */ @@ -54,54 +93,53 @@ p { position: relative; float: left; - padding: 0 10px; - height: 96px; + padding: 15px 10px; + border: 10px solid $border_color; border-radius: 5px; + box-shadow: 0 0 6px $box_shadow_color; + background: $gradient; - color: rgb(255,255,255); line-height: 1; font: { - size: 4em; - weight: bold; + size: 6em; } text: { align: center; - shadow: 0 0 3px rgb(50,50,50); } } .ticker.flip .seperator { - margin: 0 10px 0 5px; + margin: 0 5px; + font-size: 0.6em; + color: $seperator_color; } .ticker.flip .wrapper { position: relative; display: inline-block; - margin-right: 10px; - width: 50px; - color: #333; - overflow: hidden; + margin: 0 5px; border-radius: 4px; - box-shadow: 0 0 5px #BBB; } .ticker.flip .wrapper:after { position: absolute; display: block; top: 50%; - z-index: 10000; + z-index: 999; display: block; - height: 2px; + height: 1px; width: 100%; content: ''; - background-color: white; - + background-color: $bar_color; + } + .ticker.flip .wrapper span { + padding: 0 5px; } .ticker.flip .old { display: block; border-radius: 4px; - - background: rgb(200,200,200); + box-shadow: 0 0 5px $move_shadow_color; + background: $old_gradient; } .ticker.flip .new { overflow: hidden; @@ -110,32 +148,40 @@ p { top: 0; display: block; - width: 100%; height: 50%; border-radius: 4px 4px 0 0; - background: rgb(200,200,200); + background: $new_gradient; } .ticker.flip .old-move, .ticker.flip .new-move { overflow: hidden; position: absolute; + display: none; + border-radius: 4px; + background: $move_background; + } + + .ticker.flip .moving { display: block; - width: 100%; - border-radius: 4px 4px 0 0; - background-color: rgb(200,200,200); } .ticker.flip .old-move { z-index: 999; bottom: 50%; height: 50%; + background: $old_move_gradient; + box-shadow: 0 -5px 7px -5px $box_shadow_color; + -webkit-transform-origin: bottom left; } .ticker.flip .new-move { z-index: 997; - height: 50%; + height: 100%; top: 0; + background: $new_move_gradient; + box-shadow: 0 4px 6px -4px $box_shadow_color; + -webkit-transform-origin: top left; } @@ -185,11 +231,13 @@ p { background: red; } .ticker.scrolling:before { - background: -moz-linear-gradient(top, rgba(40,40,40,1) 0%, rgba(40,40,40,1) 20%, rgba(40,40,40,0) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,40,40,1)), color-stop(20%,rgba(40,40,40,1)), color-stop(100%,rgba(40,40,40,0)));background: -webkit-linear-gradient(top, rgba(40,40,40,1) 0%,rgba(40,40,40,1) 20%,rgba(40,40,40,0) 100%);background: -o-linear-gradient(top, rgba(40,40,40,1) 0%,rgba(40,40,40,1) 20%,rgba(40,40,40,0) 100%);background: -ms-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%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#00282828',GradientType=0 ); + 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 { bottom: 0; - background: -moz-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: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,40,40,0)), color-stop(1%,rgba(40,40,40,0)), color-stop(80%,rgba(40,40,40,1)), color-stop(100%,rgba(40,40,40,1)));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: -o-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: -ms-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%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00282828', endColorstr='#282828',GradientType=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%); } /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ @@ -217,8 +265,10 @@ p { + + /* - Tick.slide + Tick.slide [DEPRECATED] */ .ticker.sliding { display: inline-block; diff --git a/index.html b/index.html index a1cdef7..ab2192d 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,8 @@ -

Tracking…

- -

162,006,997

-

- (4 times the initial speed after the ticker has reached 162,007,012) -

-