JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<input type="range" min="0" max="100" value="0" />

<div id="board">
    <ul>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
    </ul>
    <ul>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
    </ul>
    <ul>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
    </ul>
    <ul>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
        <li>
            <img src="http://graph.facebook.com/kennethbrogger/picture?width=100&height=100" />
            <!-- Hejsa -->
        </li>
    </ul>
    <ul>
        <li>
            <img...

CSS

img {
    width: 4em;
    height: 4em;
}

#board {
    overflow: hidden;
    width: 500px;
    padding: 30px;
}

#board li {
    width: 4em;
}

#board ul {
    overflow: hidden;
    display: block;
    margin: 0.5em auto;
    width: 15em;
    
}

#board ul li {
    float: left;
    list-style-type: none;
    margin-right: 1em;
}

JavaScript

var $range = $('input');
var $len = $('li').length;
var $minFontSize = 10;
var $maxFontSize = 40;
var ready = true;

function setPerspective(perspective) {

    $('ul').each(function(index){
        var $scale = (((index - ($len / 2)) / $len * $range.val() * 2) + parseInt($range.attr('max'), 10)) / 2;
        var $fontSize = $minFontSize + ($scale * ($maxFontSize - $minFontSize) / 100);
        //$(this).html($fontSize);
        $(this).css('font-size', $fontSize + 'px');
    });
}


$range.change(function() {
    setPerspective($range.val());
});
setPerspective($range.val());