Metro tile

by ffMathy

HTML

<div class="tile large2x2">

    <div>

        <h1>Velkommen</h1>

        <p>
            Techmatic specialiserer sig i apps til Windows Phone 8 og Windows 8. Vi er desuden super seje til de nyeste webteknologier.
        </p>

    </div>

</div>

<div class="tile wide2x1" id="portfolio">

    <div>
        <h1>Newz.dk</h1>
        <img src="@Url.Content("~/Content/images/Apps/Newz/Newz.png")"/>

        <p>
            Newz.dk's officielle Windows 8 App udgivet d.25/10-12. Kan hentes på Windows store.
        </p>
    </div>
    <div>
        <h1>Stackstabilizer</h1>
        <img src="@Url.Content("~/Content/images/Apps/Stackstabilizer/Stackstabilizer.png")"/>
        <p>
            Stackstabilizer den første vinderne til CodeCamp 2012. Kan hentes på Windows store.
        </p>
    </div>
    <div>
        <h1>Imago</h1>
        <img src="@Url.Content("~/Content/images/Apps/Imago/Imago.png")"/>
        <p>
            Imago endnu en vinder fra CodeCamp 2012. Kan hentes på Windows store.
        </p>
    </div>
    <div>
        <h1>Wavematrix</h1>
        <img src="@Url.Content("~/Content/images/Apps/Wavematrix/Wavematrix.png")"/>
        <p>
            En enkel Windows 8 App som giver en ny måde at kompinere musik på. Kan hentes på Windows store.
        </p>
    </div>


</div>

<div class="tile small1x1">

    <div>

        <h1>Kontakt os</h1>

        <p>
            Send os en mail, eller ring.
        </p>

    </div>
    <div>
        <img src="@Url.Content("~/content/images/Rene.png")"/>
    </div>

    <div>

        <h1>Techmatic</h1>

        <p>[email protected]</p>
        <p>+45 23275258</p>
        <p>+45 27624845</p>

    </div>

    <div>
        <img src="@Url.Content("~/content/images/Mathias.png")"/>
    </div>

</div>

<div class="tile wide2x1">

    <div>

        <h1>Agil udvikling</h1>

        <p>
            Se hvordan agil udvikling også virker i mindre projekter.
        </p>

    </div>
    <div>

        <h1>Små milestones...

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.clear {
    clear: both;
}
body {
    overflow-x: hidden;
}

body > div {
    padding-bottom: 30px;
    margin-top: 30px;
    border: 1px solid #DEDEDE;
    font-family: "Segoe UI Light", "Segoe UI";
    background-color: whitesmoke;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

    body > div > h1 > a {
        margin-left: 70px;
        font-weight: 100;
        font-size: 70px;
        margin-right: auto;
        width: auto;
        color: #DFDFDF;
        margin-top: 30px;
        text-decoration: none;
    }

.company_motto {
    float: left;
    margin-bottom: 50px;
    margin-top: -10px;
    margin-left: 200px;
    font-size: 15px;
    color: #AAA;
}

.tile {
    background-color: #622E92;
    margin: 10px 10px 10px 10px;
    float: left;
}

    .tile p {
        font-size: 13px;
        color: #cd96ff;
        margin-top: 5px;
        line-height: 150%;
        margin-left: 15px;
        margin-right: 15px;
    }

    .tile h1 {
        font-size: 22px;
        font-weight: 100;
        color: white;
        padding-top: 10px;
        margin-top: 0px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .tile.large2x2 {
        width: 290px;
        height: 290px;
    }

        .tile.large2x2 h1 {
            font-size: 50px;
        }

        .tile.large2x2 p {
            font-size: 23px;
            line-height: normal;
        }

    .tile.wide2x1 {
        width: 290px;
        height: 135px;
    }

    .tile.small1x1 {
        width: 135px;
        height: 135px;
    }

.embedTile {
    float: left;
}

.tile#portfolio .embedTile {
    margin-left: 14px;
    margin-top: 14px;
    margin-right: 14px;
    width: 320px;
    height: 110px;
}

.tile#portfolio img {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.25);
    float: left;
    margin-left: 15px;
}

.tile#portfolio p {
    float: left;
   ...

JavaScript

function log(text) {
    if (console.log) console.log(text);
}

function Tile(element) {

    var me = this;

    //internals
    var tile = element;
    var contentWrapper = null;

    var tileWidth;
    var tileHeight;

    var sideElements = [];
    var selectedSideElementIndex = 0;

    var hasMoreSides = false;

    var currentAngle = 0;

    var applySides = function () {

        $(contentWrapper).empty();

        var side = sideElements[selectedSideElementIndex];
        $(contentWrapper).append(side);

    };

    var setRotationAngle = function (angle) {

        while (angle > 360) {
            angle -= 360;
        }

        currentAngle = angle;

        $(contentWrapper).css("-webkit-transform", "rotateX(" + angle + "deg)");
        $(contentWrapper).css("-ms-transform", "rotateX(" + angle + "deg)");
    };

    var flipTo = function (angle, duration, callback) {

        angle = parseFloat(angle);
        duration = parseFloat(duration);

        var timerId;

        var frequency = 1.0;
        var delta = (angle - currentAngle) / duration * frequency;

        var isAccelerating = delta > 0.0;

        log("Delta is " + (isAccelerating ? "accelerating" : "decelerating") + " at " + delta + " degrees per frame to destination angle " + angle);

        var angleIncrement = currentAngle;
        var tick = function () {

            angleIncrement += delta;
            if ((!isAccelerating && angleIncrement < angle) || (isAccelerating && angleIncrement > angle)) {

                log("Reached destination");

                clearInterval(timerId);
                setRotationAngle(angle);

                if (callback) {
                    callback();
                }
            } else {

                log("Rotating to " + angleIncrement);
                setRotationAngle(angleIncrement);
            }
        };

        timerId = setInterval(tick, frequency);

    };

    //getters and setters
    this.getTileWidth = function () {
       ...