JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="twitter">

            <h2>Latest tweets</h2>

            <p>Loading...</p>

            <noscript>This feature requires JavaScript</noscript>

        </div>

<p class="cred" align="center"> Created by <a href="http://beben-koben.blogspot.com/" >Tutorial Blog for Stylish Blogger</a></p> 
<footer>
    <a class="orig"  href="http://beben-koben.blogspot.com/2011/01/twitter-oh-twitter.html" title="GO BACK TO ARTICLE"> &laquo; Back to</a>

    <h1><a href="http://beben-koben.blogspot.com/2011/01/twitter-oh-twitter.html">Twitter oh Twitter</a></h1>
</footer>

CSS

*
{
    margin:0;
    padding:0;
}
body
{
    background:#999;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,
a:visited
{
    text-decoration:none;
    outline:none;
    color:#fff;
}
a:hover
{
    text-decoration:underline;
    color:#ddd;
}
footer
{
    background:#333;
    position:fixed;
    width:100%;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h1
{
    font:25px/26px Acens;
    font-weight:normal;
    left:70%;
    margin:0px 0 0 150px;
    padding:25px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
   ...

JavaScript

/**
* author Remy Sharp
* url http://remysharp.com/tag/marquee
*/

(function ($) {
    $.fn.marquee = function (klass) {
        var newMarquee = [],
            last = this.length;

        // works out the left or right hand reset position, based on scroll
        // behavior, current direction and new direction
        function getReset(newDir, marqueeRedux, marqueeState) {
            var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
            var r = 0;
            if (behavior == 'alternate') {
                r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
            } else if (behavior == 'slide') {
                if (newDir == -1) {
                    r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
                } else {
                    r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
                }
            } else {
                r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
            }
            return r;
        }

        // single "thread" animation
        function animateMarquee() {
            var i = newMarquee.length,
                marqueeRedux = null,
                $marqueeRedux = null,
                marqueeState = {},
                newMarqueeList = [],
                hitedge = false;
                
            while (i--) {
                marqueeRedux = newMarquee[i];
                $marqueeRedux = $(marqueeRedux);
                marqueeState = $marqueeRedux.data('marqueeState');
                
                if ($marqueeRedux.data('paused') !== true) {
                    // TODO read scrollamount, dir, behavior, loops and last from data
                    marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);

                    // only true if it's hit the end
                    hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <=...