Randomized Name Placement

by Ken Watanabe

HTML

<div class="page animated fade delay">
    <section>
        <figure class="index blank1">
            <h1></h1>
        </figure>
        <figure class="index blank2">
            <h1></h1>
        </figure>
        <figure class="index blank1">
            <h1>K</h1>
        </figure>
        <figure class="index blank2">
            <h1>EN</h1>
        </figure>
        <figure class="index blank1">
            <h1></h1>
        </figure>
        <!-- row 2 -->
        <figure class="index blank2">
            <h1></h1>
        </figure>
        <figure class="index blank1">
            <h1></h1>
        </figure>
        <figure class="index blank2">
            <h1></h1>
        </figure>
        <figure class="index blank1">
            <h1></h1>
        </figure>
        <figure class="index blank2">
            <h1>WA&mdash;</h1>
        </figure>
        <!-- Row 3 -->
        <figure class="index blank1">
            <h1>TA</h1>
        </figure>
        <figure class="index blank2">
            <h1>NA</h1>
        </figure>
        <figure class="index blank1">
            <h1></h1>
        </figure>
        <figure class="index blank2">
            <h1></h1>
        </figure>
        <figure class="index blank1">
            <h1></h1>
        </figure>
        <!-- Row 3 -->
        <figure class="index blank2">
            <h1></h1>
        </figure>
        <figure class="index blank1">
            <h1></h1>
        </figure>
        <figure class="index blank2">
            <h1></h1>
        </figure>
        <figure class="index blank1">
            <h1>BE</h1>
        </figure>
        <figure class="index blank2">
            <h1></h1>
        </figure>
    </section>
</div>

CSS

html, body { width:100%; height:100%; }
html, body, div, section, figure, figcaption { margin:0; padding:0; }

div.page { width:100%; height:100%; }
div.page section { display: block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; /* margin:20px; padding:0; */ } 
div.page section figure.index { width:20%; float:left; /* padding:20px; margin:0; */ -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out; -webkit-transition: height 0.5s ease-in-out, left 0.5s ease-in-out; -moz-transition: height 0.5s ease-in-out, left 0.5s ease-in-out; -o-transition: height 0.5s ease-in-out, left 0.5s ease-in-out; transition: height 0.5s ease-in-out, left 0.5s ease-in-out; }
div.page section figure.index { height:125px; }
div.page section figure.index figcaption { display:block; }
div.page section figure.index h1 { font-family:'Akzidenz Grotesk BE R'; font-size:100%; letter-spacing:1px; font-weight:normal; font-style:normal; }

.blank1 { background:#eee; font-size:300%; }
.blank2 { background:#ddd; font-size:300%; }
























@font-face { font-family: 'Akzidenz Grotesk BE R'; src:...

JavaScript

function randomize() {
    var elts = document.querySelectorAll('figure.index');
    var array = Array.prototype.slice.call(elts);
    array.forEach(function (elt) {
        elt.style.textAlign = getDirection();
    });
}

function getDirection() {
    var roll = Math.random();
    if (roll < 0.33) {
        return 'left';
    } else if (roll > 0.66) {
        return 'right';
    }
    //return 'center';
}
randomize();