JSFiddle - React, Tailwind, and code Playground

by jacobdubail

HTML

<script src="http://fonts.googleapis.com/css?family=Metrophobic"></script>
<script src="https://raw.github.com/brandonaaron/jquery-cssHooks/master/bgpos.js"></script>
<div id="wrap">
<ul id="heading">
    <li id="about"><a data-T=0 class="cur" href="#"> About Us </a></li>
    <li id="who"><a href="#"> Who We Are </a></li>
    <li id="what"><a data-T=1 href="#"> What We Do </a></li>
    <li id="gallery"><a data-T=1 href="#"> Gallery </a></li>
    <li id="contact"><a data-T=2 href="#"> Contact Us </a></li>
</ul>
<img class="bg" src="http://dl.dropbox.com/u/1210327/bg.jpg" alt="Pollard" />
</div>

CSS

body { font-family: 'metrophobic'; font-size: 44px; text-transform: uppercase; position: relative; min-height: 850px; }

img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed;      top: 0; left: 0; }

#wrap         { width: 960px; margin: 25px 0; position: relative; z-index: 1; }

#heading      { position: absolute; top: 25px; left: 51px; /* -webkit-transform: translateZ(0); */ width: 700px; z-index: 25; }
#heading:before { content: ''; position: absolute; display: block; width: 51px; height: 152px; background: #888; top: 0; left: -51px; }
#heading li   { position: relative; float: left;  }
#heading li a { text-decoration: none; }
#heading span { background: url('http://dl.dropbox.com/u/1210327/letters.png') no-repeat 0 0; height: 50px; display: block; float: left; position: relative; margin: 0 0 1px; color: #444; text-indent: -9999em;
        -webkit-transition: all .75s ease-in-out;
           -moz-transition: all .75s ease-in-out;
                transition: all .75s ease-in-out;
}


#heading li a .char1 { margin-left: 1px; }

#heading .let-a { background-position:   -2px -56px; width: 32px; } /* a */
#heading .let-b { background-position:  -38px -56px; width: 28px; } /* b */
#heading .let-c { background-position:  -70px -56px; width: 29px; } /* c */
#heading .let-d { background-position: -103px -56px; width: 28px; } /* d */
#heading .let-e { background-position: -135px -56px; width: 25px; } /* e */
#heading .let-g { background-position: -164px -56px; width: 27px; } /* g */
#heading .let-h { background-position: -195px -56px; width: 29px; } /* h */
#heading .let-l { background-position: -228px -56px; width: 29px; } /* l */
#heading .let-n { background-position: -497px -56px; width: 29px; } /* n */
#heading .let-o { background-position: -261px -56px; width: 29px; } /* o */
#heading .let-r { background-position: -294px -56px; width: 27px; } /* r */
#heading .let-s { background-position: -325px -56px; width: 27px; } /* s...

JavaScript

/*global jQuery */
/*!    
* Lettering.JS 0.6.1
*
* Copyright 2010, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Thanks to Paul Irish - http://paulirish.com - for the feedback.
*
* Date: Mon Sep 20 17:14:00 2010 -0600
*/
(function($){
    function injector(t, splitter, klass, after) {
        var a = t.text().split(splitter), inject = '';
        if (a.length) {
            $(a).each(function(i, item) {
                inject += '<span class="'+klass+(i+1)+ ' let-' + a[i].toLowerCase()+ '">'+item+'</span>'+after;
            });    
            t.empty().append(inject);
        }
    }
    
    var methods = {
        init : function() {

            return this.each(function() {
                injector($(this), '', 'char', '');
            });

        },

        words : function() {

            return this.each(function() {
                injector($(this), ' ', 'word', ' ');
            });

        },
        
        lines : function() {

            return this.each(function() {
                injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
            });

        }
    };

    $.fn.lettering = function( method ) {
        // Method calling logic
        if ( method && methods[method] ) {
            return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
        } else if ( method === 'letters' || ! method ) {
            return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
        }
        $.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
        return this;
    };

})(jQuery);


$(function() {

    $('#heading li a').lettering();
           
    $("#heading li a").click(function() { 
      
        if ( $(this).hasClass('cur') ) {
           return false;
        }    
            
        var $this  = $(this);
        var $par   = $this.parent();
        var $list  = $par.parent();
        var...