Skip to content

Commit

Permalink
Added first flip animation with different black and white styles.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkintscher
jkintscher committed Feb 13, 2012
1 parent 321e723 commit 4110d0f
Show file tree
Hide file tree
Showing 6 changed files with 235 additions and 168 deletions.
79 changes: 44 additions & 35 deletions assets/coffee/ticker.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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


###
Expand All @@ -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 ]
Expand All @@ -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: () ->
$( '<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 )
Expand All @@ -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: () ->

Expand Down
87 changes: 45 additions & 42 deletions assets/css/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -45,74 +50,82 @@ 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;
position: absolute;
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
Expand Down Expand Up @@ -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%); }

/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
Expand All @@ -185,7 +188,7 @@ p {
font-weight: normal; }

/*
Tick.slide
Tick.slide [DEPRECATED]
*/
.ticker.sliding {
display: inline-block;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/interface.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ $( document ).ready( function()

$( '.ticker' ).ticker(
{
delay: 1000,
delay: 800,
incremental: 1,
seperators: true,
autostart: true
Expand Down
Loading

0 comments on commit 4110d0f

Please sign in to comment.