4eb76d459158f0804f2c by bollwyvl

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  width: 960px;
  padding-top: 40px;
  margin: auto;
  position: relative;
}
svg {
    width: 100%;
    max-height: 400px;
}
</style>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type='text/javascript'>

var songs = [
    {
        title: 'The past is a...',
        artist: 'Of Montreal'
    },
    {
        title: 'She came in...',
        artist: 'Miley Cyrus'
    },
    {
        title: 'Robotnik is...',
        artist: 'Hitboxx'
    },
    {
        title: 'Young',
        artist: 'Chevalier Avant-...'
    }];

var colors = d3.scale.category10();

function getElementTranslation(el) {
    return d3.transform(el.attr('transform')).translate;
}

function newElement(parent, template, song, color) {
    var _el = template.node().cloneNode(true);
    var el = d3.select(_el);
    el.select('#Picture').attr('fill', color);
    el.select('#Title tspan').text(song.title);
    el.select('#Artist tspan').text(song.artist);
    parent.node().insertBefore(_el);
    return el;
}

window.addEventListener('load', function () {
    d3.select('svg').remove();

    d3.xml('iPhone.svg', 'image/svg+xml', function (error, data) {
        d3.select('body').node().appendChild(data.documentElement);
        var svg = d3.select('svg')
            .style('width', '100%');

        var appScreen = svg.select('#ScreenBackground');
        var screenWidth = +appScreen.attr('width'),
            screenHeight = +appScreen.attr('height');

        var screenContent = svg.select('#ScreenContent');
        var tplElement = svg.select('#Element');
        var tplHeight = +tplElement.select('#ElementBackground').attr('height');
        var tplOrigTransform = getElementTranslation(tplElement);
        var padding = 10;

        var onClick = function () {
            var el = d3.select(this);
            var x = el.node().origPos[0],
                y = el.node().origPos[1];
            el.transition()
                .ease('sin')
                .attr('transform', 'translate(' + (x + 50) + ', ' + y + ')')
                .transition()
                .attr('transform', 'translate(' + x + ', ' + y + ')');
        };

        for(var i = 0 ; i < songs.length ; i++)
        {
            var el = newElement(screenContent, tplElement, songs[i], colors(i));

            var x = tplOrigTransform[0];
            var y = tplOrigTransform[1] + (tplHeight + padding) * i;
            el.node().origPos = [x, y];

            el
                .attr('transform', 'translate(' + (x + 100) + ', ' + y +')')
                .style('cursor', 'pointer')
                .style('opacity', 0.0)
                .on('click', onClick);

            el
                .transition()
                .delay(i * 500)
                .duration(1000)
                .attr('transform', 'translate(' + x + ', ' + y +')')
                .style('opacity', 1.0);
        }

        tplElement.style('display', 'none');
    });
});

</script>

iPhone.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="400px" height="800px" viewBox="0 0 400 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>Trick - Reproducible elements</title>
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
    <defs>
        <rect id="path-1" x="0" y="0" width="360" height="580"></rect>
        <mask id="mask-2" sketch:name="Mask" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Trick:-Reproducible-element" sketch:type="MSLayerGroup">
            <rect id="iPhone" fill="#000000" sketch:type="MSShapeGroup" x="0" y="0" width="400" height="800" rx="50"></rect>
            <circle id="HomeButton" fill="#202020" sketch:type="MSShapeGroup" cx="200" cy="720" r="40"></circle>
            <g id="ScreenGroup" transform="translate(20.000000, 80.000000)">
                <use id="Mask" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
                <g id="ScreenContent" mask="url(#mask-2)">
                    <rect id="ScreenBackground" fill="#2B2B2B" sketch:type="MSShapeGroup" x="0" y="0" width="360" height="580"></rect>
                    <g id="Element" transform="translate(13.000000, 22.000000)">
                        <rect id="ElementBackground" fill="#3498DB" sketch:type="MSShapeGroup" x="0" y="0" width="335" height="88" rx="10"></rect>
                        <circle id="Picture" fill="#E74C3C" sketch:type="MSShapeGroup" cx="39" cy="44" r="28"></circle>
                        <path d="M301.170525,30.3378906 L315.131468,43.7877177 L301.170525,58.8476562" id="Arrow" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" sketch:type="MSShapeGroup"></path>
                        <text id="Title" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="28" font-weight="bold" fill="#FFFFFF">
                            <tspan x="83" y="39">Song name</tspan>
                        </text>
                        <text id="By" opacity="0.4" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="20" font-weight="bold" sketch:alignment="right" fill="#FFFFFF">
                            <tspan x="83" y="69">BY:</tspan>
                        </text>
                        <text id="Artist" sketch:type="MSTextLayer" font-family="Helvetica Neue" font-size="20" font-weight="bold" fill="#FFFFFF">
                            <tspan x="123" y="69">ARTIST NAME</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>