Skip to content

Instantly share code, notes, and snippets.

@bollwyvl

bollwyvl/README.md

Forked from maelp/README.md
Created May 5, 2014 13:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bollwyvl/4eb76d459158f0804f2c to your computer and use it in GitHub Desktop.
Save bollwyvl/4eb76d459158f0804f2c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md
Raw
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="http://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>
Display the source blob
Display the rendered blob
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment