A Pen by Michael Abraham Vieth.

index.html

<div id="Stocks">
  
  <span class="Symbol">
    <b class="MainSym"><i data-replace='Symbol'>PTRC</i>:<i data-replace='StockExchange'>PTRC</i></b>
    <b class="Label">( <i data-replace='Name'>Quanta Services</i> )</b>
  </span>
  
  <span class="Price"><b class="Label">Last Bid Price</b> <b class="Stat">$<i data-replace='LastTradePriceOnly'></i></b></span>
  
  <span class="Change"><b class="Label">Change</b> <b class="Stat"><i data-replace='Change'></i></b> <b class="Stat">(<i data-replace='ChangeinPercent'></i>)</b></span>
  
  <span class="Volume"><b class="Label">Volume</b> <b class="Stat" data-replace='Volume'></b></span>
  
  <span class="MarketCapitalization"><b class="Label">Mkt Cap</b> <b class="Stat">$<i data-replace="MarketCapitalization"></i></b></span>
  
  <span class="LastUpdated"><b class="Label">Last Trade</b> <b class="Stat"><i data-replace='LastTradeDate'></i> <i data-replace="LastTradeTime"></i> </b></span>
  
</div>

script.js

var $stocks = $("#Stocks"),
    animationend = (Modernizr.prefixed('animation') + "End").replace(/^ms/, "MS").replace(/^Webkit/, "webkit").replace(/^Moz.*/, "animationend");

////////////////////////////////////////
// Get stock data via YQL query
var getStocks = function () {
			
	var wsql = "select * from yahoo.finance.quotes where symbol in ('PTRC')",
			stockYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json&callback=?';
  
  return $.ajax({
    url: stockYQL,
    dataType: 'json'
  });
};


////////////////////////////////////////
// Format Numbers
var getRepString = function (rep) {
  rep = rep+''; // coerce to string
  if (rep >= 1000000000) {
    return (rep / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
  } else if (rep >= 1000000) {
    return (rep / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
  } else if (rep >= 1000) {
    return (rep / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
  } else {
    return rep; 
  }
}


////////////////////////////////////////
// Replace children with [data-replace] attribute given a data object
$.fn.dataReplace = function(data) {
  var $replacers = this.find("[data-replace]");
  
  if ( $replacers.length ) {
    $replacers.each(function(){
      var $this = $(this);
      var replace = $this.data("replace");
      var content = data[replace];
    
      if ( replace === 'Name' ) {
        content = content.replace(/\W/gi, ' ');
      } else if ( replace === 'Volume' ) {
        content = getRepString(content);
      }
  
      //console.log("replace",replace,":",data[replace]);
      $this.html(content);
    });
    return true;
  } else {
    return false;
  }
}

////////////////////////////////////////
// Update on Click
$stocks.on("click",function(){
  
  var _this = this;
	var $this = $(this);
  var _uniqueID = "stockLoad.unique"+Math.floor(Math.random() * (100 - 1) + 1);
  
  $this
    .removeClass("is-Loaded")
    .addClass("is-Loading");
  
  if ( $this.hasClass("is-Visible") ) {
    $this.css("animation-play-state", "running");
  }
  
  console.log("Triggering AJAX... ");
  
  $this
    .one(_uniqueID,function(data){
      
      console.log("_uniqueID",_uniqueID,"triggered");
      window.setTimeout(function(){
        
        $this.dataReplace($this.data("quote"));
        
        if ( ! $this.is(":visible") ) {
           $this.addClass("is-Visible").fadeIn(1000); 
        }
        
        $this
          .removeClass("is-Loading")
          .addClass("is-Loaded");
          //.html($this.data("stocks"));
        console.log("Done!");
      }, 600)
    })
    .on(animationend,function(event){
      $this.css("animation-play-state","paused");
    });
  
  getStocks().done(function(data){
    console.log("AJAX Returned.",data);
    
    //$this.data("stocks",formatStocks(data));
    $this.data("quote",data.query.results.quote);
    
    if ( Modernizr.cssanimations && $this.css("animation-play-state") === "running" ) {
      console.log("Animating!");
      $this.on(animationend,function(event){
          $this.trigger(_uniqueID);
      });
      
      window.setTimeout(function(){ 
        console.log("animation end no-trigger fallback");
        $this.trigger(_uniqueID);
      },2000);
    } else {
      console.log("Not animating.");
      $this.trigger(_uniqueID);
    }
  });
  
});

$stocks.hide().click();

Stock-Ticker.markdown

Stock Ticker

Forked from Shaw's Pen Stock Ticker.

A Pen by Michael Abraham Vieth on CodePen.

License.

style.less

#Stocks { 
  display: block;
  min-height: 1em;
  background: black;
  color: #8cb3d7;
  padding: 20px;
  vertical-align: middle;
  line-height: 1.4;
  text-align: center;
  transform: translateZ(0);
  cursor: pointer;
  font-size: 20px;
  font-family: "Roboto", Helvetica;
  animation-play-state: paused;
}

#Stocks b { font-weight: 300; }
#Stocks i { font-style: normal; }

#Stocks .Name,
#Stocks .Label,
#Stocks .LastUpdated { font-size: 0.7em; line-height: 1; }

#Stocks span { 
  white-space: nowrap; 
  display: inline-block;
  padding: 0 5px;
}
//#Stocks span { display: block; } ptrc red: D80F1E


#Stocks .Stat { color: white; }
#Stocks .Symbol{ color: #8cb3d7; }
#Stocks .MainSym{ color: #8cb3d7; }


/* ---------------------------------- */
/* Animations */
#Stocks span { animation: none; }

#Stocks.is-Visible span {
  opacity: 0;
  transform: translate(0,-1em) translateZ(0);
  animation-name: slide-in;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

#Stocks.is-Loading.is-Visible span { 
  opacity: 1;
  transform: translateZ(0);
  animation-name: slide-out;
  animation-fill-mode: forwards;
}

#Stocks.is-Loaded.is-Visible span { 
  opacity: 0;
  transform: translate(0,-1em);
  animation-name: slide-in;
  animation-fill-mode: forwards;
}

@iterations: 10;
.nthDelay(@index) when (@index > 0) {
  #Stocks span:nth-child(@{index}) {
    @speed: (@index * 200);
    animation-delay: ~"@{speed}ms"; 
	}
	.nthDelay((@index - 1));
}
.nthDelay(@iterations);

@keyframes slide-in {
  0% { 
    opacity: 0;
    transform: translate(0,-1em);
  }
	100% { 
    opacity: 1;
    transform: translate(0,0);
  }
}
@keyframes slide-out {
  0% { 
    opacity: 1;
    transform: translate(0,0);
  }
  100% {
    opacity: 0;
    transform: translate(0,1em);
  }
}

.no-js #Stocks { display: none; }