TV ScrollPanel

Made by Adam Schwartz for HubSpot TV :)

by adamschwartz

HTML

<link rel="stylesheet" href="http://static.hubspot.com/style-guide/css/compiled/bootstrap.css">
<div class="container">
    <div class="left">
        <ul class="queue queue1">
            <li class="visits">Visits &amp; Leads</li>
            <li class="social">Social Media</li>
        </ul>
        <div class="selected">
            <span class="text">
                <span id="sources">Sources</span>
            </span>
            <span class="arrow"></span>
        </div>
        <ul class="queue queue2">
            <li class="api">API Activity</li>
            <li class="facebook">Facebook</li>
            <li class="google">Google Search Terms</li>
            <li class="downtime">Downtime</li>
            <li class="visits">Visits &amp; Leads</li>
            <li class="social">Social Media</li>
            <li class="api">API Activity</li>
            <li class="facebook">Facebook</li>
            <li class="google">Google Search Terms</li>
            <li class="downtime">Downtime</li>
        </ul>
    </div>
    <div class="right">
        <div id="controls">
            &nbsp;&nbsp;<a class="hs-button secondary" id="previous">Back</a> &nbsp;
            <a class="hs-button secondary" id="playpause">Pause</a> &nbsp;
            <a class="hs-button secondary" id="next">Next</a> &nbsp;
            &nbsp;&nbsp;&nbsp; All data is about our <span id="total-customers">5000</span> customers.
        </div>
        <div id="visualization">
            <h1>Showing sources chart!</h1>
        </div>
    </div>
    <img src="https://static.hubspotqa.com/final/img/content/sprocket/sprocket-100.png" id="logo">
</div>

CSS

body {
    -webkit-transform: scale(0.8);
}

html, body {
    background: #000 !important;
    -webkit-user-select: none;
}

html, body, html body ul {
    margin: 0px;
    padding: 0px;
    font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div.container {
    height: 1080px;
    width: 1920px;
    overflow: hidden;
    background: #000;
    position: relative;
}

    div.left {
        float: left;
        width: 620px;
        height: 1080px;
        background: #eee;
        position: relative;
    }

        ul.queue {
            list-style: none;
            overflow: hidden;
        }

        .queue1 {
            height: 170px;
        }

        .queue1 li:first-child {
            border-top: 0px;
        }

        .queue2 {
            height: 808px;
        }

            ul.queue li {
                list-style: none;
                font-size: 45px;
                border-top: 1px solid #ccc;
                padding: 15px 20px;
                background-image: -webkit-linear-gradient(top, #f6f6f6, #e6e6e6);
                text-shadow: 0px 2px 1px white;
                line-height: 54px;
            }
        
        div.selected {
            position: relative;
            height: 102px;
            box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);
        }

            .text {
                z-index: 15;
                position: absolute;
                top: 0px;
                left: 0px;
                font-size: 60px;
                color: white;
                background-image: -webkit-linear-gradient(top, #e89764, #ba591c);
                text-shadow: 0px -1px 2px rgba(0, 0, 0, 0.5);
                width: 620px;
                display: block;
                line-height: 72px;
                overflow: hidden;
                height: 98px;
                white-space: nowrap;
                border-top: 2px solid #BA591C;
                border-bottom: 2px solid #94040A;
                box-shadow:...

JavaScript

(function($){
    var s = {};
    
    s.notTooFast = false;

    s.next = function(again) {
        if (s.notTooFast === true) {
            return false;
        }

        s.notTooFast = true;

        s.selected = $('.selected .text span');

        if (again) {
            setTimeout(function(){
                s.next(true);
            }, 10000);
        }

        if (s.pause) {
            return true;
        }

        var selected = s.selected,
            top = s.queue1.find('li').first(),
            topClone = top.clone(),
            next = s.queue2.find('li').first(),
            nextSelected = '<span id="' + next[0].className + '">' + next.text() + '</span>'
        ;

        s.render(next[0].className);
        s.queue2.append(topClone.hide());
        topClone.slideDown();
        top
            .animate({
                marginTop: -1 * top.outerHeight()
            }, function(){
                $(this).remove();
            })
        ;
        s.queue1.append('<li class="' + selected.attr('id') + '">' + selected.text() + '</li>');
        s.selected
            .after(nextSelected)
            .animate({
                marginTop: -1 * s.selected.outerHeight()
            }, function(){
                $(this).remove();
            })
        ;
        next
            .animate({
                marginTop: -1 * next.outerHeight()
            }, function(){
                $(this).remove();
                setTimeout(function(){
                    s.notTooFast = false;
                }, 200);
            })
        ;
    };

    s.previous = function(again) {
        if (s.notTooFast === true) {
            return false;
        }
        s.selected = $('.selected .text span');
        var selected = s.selected,
            bottom = s.queue2.find('li').last(),
            next = s.queue1.find('li').last()
        ;
        s.render(next[0].className);
        s.queue1.prepend(bottom);
        s.queue2.prepend('<li class="' +...