WOW.js Hacker News Top Stories

By Hawkee on Dec 10, 2014

I saw WOW.js on Product Hunt today and thought, "neat, that looks like fun." I'd also had the thought to play around with the Hacker News FireBase API so why not merge the two?

How it Works

This is a very straightforward jQuery script that grabs the Hacker News data over $.getJSON calls. Once the top 100 stories are collected a loop gathers the urls, titles and scores for each story and appends them to a list. Finally, a random animation from animate.css is selected and attached to each story.

$(document).ready(function() {

  var effects = ["bounce","pulse","rubberBand","shake","swing","tada","wobble","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","flip","lightSpeedIn","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rollIn","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp"];

  function(data) {
    var items = [];
    $.each(data, function(key, val) {      
      $.getJSON(""+val+".json", function(data2) {
        var effect = effects[Math.round(Math.random()*(effects.length - 1))];
        $('#news-list').append("<li class='wow "+effect+"' data-wow-delay='10ms' data-wow-duration='1s'><a href='"+data2.url+"'>"+data2.title+"</a><br><b>+"+data2.score+"</b></li>");

  new WOW().init();


As far as the styling is concerned I used Bootstrap and Google's Bree Serif font. The styling is fairly simple, but I figured I'd share it here as well.

#news-list {
  margin: 30px;
  list-style-type: none;
  padding: 0;

#news-list li {
  text-align: center;
  padding: 300px 0;
  list-style-type: none;
  font-family: "Bree Serif";
  font-size: 50px;
  letter-spacing: -0.03em;
  font-weight: bold;

#news-list li a {
  font-size: 70px;
  color: #655B5B;
  line-height: 80px;

#news-list li a:hover {
  text-decoration: none;
  color: #938787;

#news-list b {
  font-size: 74px;
  padding-top: 80px;
  color: #271717; 


And finally we have the HTML which is really just a couple divs containing an empty list.

  <div class='container'>
      <div class='row'>
        <ul id='news-list'>
          <li>Scroll Down</li>


And here is the final product!

See the Pen vEGEBK by Scott Aikin (@Hawkee) on CodePen.

While this isn't necessarily comprehensive as it doesn't include links to the Hacker News discussions I thought it would be a fun little tech demo merging a couple technologies. While the focus is to demo WOW.js and the Hacker News FireBase API there were various technologies used here including CodePen, Bootstrap, jQuery, Google Fonts and Animate.css.


Sign in to comment.
dma   -  Feb 15, 2016

just a test........... BTW i have no problems with this script it's glowing nice and fast

Hawkee  -  Feb 19, 2016

This is a web demo. It doesn't interface with IRC.

Sign in to comment

[Plornt]   -  Aug 14, 2015

Hey, just noticed, the code pen example is broken because github (due to the security risk and the whole chinese redirecting github scripts to a random page) now serves content with text/plain rather than as a script. Can fix it by using cdnjs:

Looks pretty cool when its loaded though! Further things to add might be to make it so it preloads 10 and then put the rest in an array to be loaded as you scroll further (so your scroll bar doesnt go wacky whilst it loads!). Still, a neat little proof of concept!

Hawkee  -  Aug 14, 2015

Thank you for the heads up! How is that? I just edited the pen.

[Plornt]  -  Aug 14, 2015

Works great!

Sign in to comment

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.