JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.1.0/normalize.css">

<section>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>
<div></div>

CSS

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
ul {
    list-style-type: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed;
}
li {
    width: 200px;
    height: 150px;
    background: red;
    float: left;
}

JavaScript

$('li').each(function () {
    $(this).css('background-color', '#'+Math.floor(Math.random()*16777215).toString(16));
});

$('ul').css('width', $('li').length * 200);

$('div').height(
    (($('ul').width() / $(window).width()) * $(window).height()) - 150
);

$(window).scroll(function (e) {
    e.preventDefault();
    
    $('ul').css('margin-left', ($(window).scrollTop() * -1));
    
    return false;
});