"
Team:Freiburg/Content/Team/Members
From 2014.igem.org
Revision as of 10:22, 17 October 2014 by Christoph.bauer (Talk | contribs)
<style>
.team-member-virus {
width:100%;
height:0;
padding-top:68.359375%;
position: relative;
}
svg {
position:absolute;
top:0;left:0;
width:100%;height:100%;
}
.member {
cursor: pointer;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0 1024,700">
<style type="text/css">
image {
clip-path: url(#clipPath);
}
#lecell image {
clip-path: url(#clipPathCell);
}
</style>
<defs>
<clipPath id="clipPath"><use xlink:href="#sixsider" /></clipPath>
<clipPath id="clipPathCell"><use xlink:href="#cellcore" /></clipPath>
<path id="cellcore"
d="m 223.88555,21.29458 a 120.91828,192.57355 0 0 1 0,385.14685 120.91828,192.57355 0 1 1 0,-385.14685 z"
style="fill:#ff2b26;stroke:#99150b;stroke-width:10" />
<path d="M197,27 L253,125 196,222 83,221 27,123 84,26 197,27 z" id="sixsider" style="fill:none;stroke:#85abdd;stroke-width:6.5;" />
<circle id="outercirc" r="120" style="fill:#5588d8;stroke:#3a5e8c;stroke-width:6.5;" />
<circle cx="15" cy="122" r="14" id="circ" style="fill:#50a962;stroke:#0e7b2d;stroke-width:2;" />
<g id="bg">
<use xlink:href="#circ" />
<use transform="translate(62,112)" xlink:href="#circ" />
<use transform="translate(190,111)" xlink:href="#circ" />
<use transform="translate(250,1)" xlink:href="#circ" />
<use transform="translate(188,-105)" xlink:href="#circ" />
<use transform="translate(60,-104)" xlink:href="#circ" />
<use transform="translate(140,125)" xlink:href="#outercirc" />
</g>
<linearGradient
x1="0%"
y1="25%"
x2="100%"
y2="75%"
id="gradOrange">
<stop
id="stop5"
style="stop-color:#ffffff;stop-opacity:1"
offset="0" />
<stop
id="stop7"
style="stop-color:#ffb888;stop-opacity:1"
offset="1" />
</linearGradient>
</defs>
<g id="lecell" transform="translate(0,400)">
<path
d="M 84.6349,-95.7008 C 421.58879,109.71901 733.49662,8.81505 878.70582,-70.194 920.57862,32.68133 861.12342,109.51504 1071.6661,184.37737 995.64312,263.16505 863.57452,345.58349 905.04162,518.36333 618.91832,418.84221 333.88112,399.28807 170.7772,480.84023 169.39472,381.31895 47.99788,324.7212 -49.55187,244.45876 78.86805,140.73498 79.30872,81.11448 84.6349,-95.7008 z"
style="fill:url(#gradOrange);stroke:#99150b;stroke-width:5" />
<use xlink:href="#cellcore" />
<image x="100" y="15" width="250" height="290"preserveAspectRatio="xMidYMid slice" xlink:href="
" />
</g>
<g id="receptor" transform="translate(155,330) scale(6)">
<path
d="M 4.0165967,4.2964177 23.01686,11.167445"
id="path3822-3-62-6-4"
style="fill:none;stroke:#000000;stroke-width:0.7690776;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="M 0.10695222,7.0590881 C 1.8516854,7.8789947 3.1427512,7.7542598 3.3739521,9.6631807 3.687317,12.250584 5.2632199,2.2578247 6.7732171,2.1776212 9.0785754,2.0551595 4.3336116,7.0352291 5.9803883,7.8214 7.6271576,8.6075789 8.0197959,1.8817558 9.5538504,0.94367219 11.356322,-0.15857468 7.2963306,8.9319464 8.3417333,9.237118 9.3871388,9.5422872 10.532708,-0.30804996 11.755542,0.27736062 12.978374,0.86277306 9.0932771,9.4411027 10.091311,9.5656155 c 0.998042,0.1245202 1.872871,-7.1893698 3.103782,-7.4229493 1.230913,-0.2335977 0.920899,1.3032086 0.928062,2.2370326 0.0058,0.7541972 -2.548869,5.9704792 -1.898521,6.4683322 0.650353,0.497852 1.065499,-0.0714 1.453386,-1.1978967 0.387885,-1.1264964 0.344657,-3.38756 0.889876,-3.8572455 0.545226,-0.4696886 0.933814,-0.00718 1.022076,1.0093576 0.08826,1.016514 -1.201319,2.2160216 -1.109822,2.9049473 0.09149,0.6889223 0.500185,0.7748543 0.31629,1.1498223 -0.183903,0.374956 -1.018136,0.252051 -0.923414,0.613385 0.09473,0.361331 1.01329,0.239353 0.777192,0.925025 -0.236104,0.685687 -2.418603,2.728233 -0.768593,3.186805 1.650002,0.458574 1.981736,-1.618599 2.298931,-2.221589 0.317194,-0.60298 -1.133672,-1.321693 -0.52099,-1.987294 0.612679,-0.665595 0.745074,0.859191 1.257468,-1.265347 0.512397,-2.1245361 -0.94402,-3.9408605 0.320621,-4.2724044 1.264641,-0.3315443 -1.148596,6.8361244 0.12478,7.2746024 1.27343,0.438479 1.687351,-6.6506089 2.455757,-6.4955991 0.7684,0.1550094 -2.756085,7.0496041 0.874556,10.9841961"
id="path8"
style="fill:none;stroke:#000000;stroke-width:0.36622745" />
</g>
<foreignObject class="node" x="380" y="440" width="500" height="270">
<body xmlns="http://www.w3.org/1999/xhtml">
The iGEM2014 Team Freiburg
We are the iGEM Freiburg 2014 team. This is one of our first pictures together. At that time we were real newbies and most of us had never worked in a real lab! This should change soon...
</body>
</foreignObject>
<g class="member" data-id="anne" transform="translate(0,0)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="christoph" transform="translate(405,150)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="clarissa" transform="translate(145,50)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="dennis" transform="translate(290,20)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="ileana" transform="translate(820,235)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="jialiang" transform="translate(130,210)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="kristoffer" transform="translate(435,0)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="laura" transform="translate(900,300)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="lisa" transform="translate(290,160)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="marc" transform="translate(590,300)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="max" transform="translate(450,260)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="mirja" transform="translate(570,170)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="natalie" transform="translate(600,20)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="nicole" transform="translate(710,80)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="ole" transform="translate(340,260)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="pascal" transform="translate(10,140)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="patrick" transform="translate(830,140)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="patrickh" transform="translate(870,10)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="valentina" transform="translate(480,90)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="" />
<use xlink:href="#sixsider" />
</g>
</g>
<g class="member" data-id="wignand" transform="translate(700,220)">
<g transform="scale(0.35)">
<use xlink:href="#bg" />
<image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="
" />
<use xlink:href="#sixsider" />
</g>
</g>
</svg>
<script> (function(){
var animating = false;
var posRecep = [200,270]; // receptorpos
var time = 0.7/300; // s/px
function selectMember(){
// just don't animate when we are currently docking
if (animating) return;
animating = true;
var $this = $(this);
// move docked head back
$active = $('.member.active');
$active.each(function(){
var $this = $(this);
var pos = $this.data('orig-pos');
$this.css('-webkit-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
$this.css('-ms-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
$this.css('-o-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
$this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
$this.attr('class', 'member');
})
// set current member active
$this.attr('class', 'member active');
// move head to receptor
$this.css('-webkit-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
$this.css('-ms-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
$this.css('-0', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
$this.css('transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
console.log($this.data('duration'));
setTimeout(function(){
// docked part
// get content of member
var content = $('#data-'+$this.data('id')).html();
// apply content of member to the red cell content area
$('#member-description').html(content);
// get the image url
var href = $this.find('image').attr('xlink:href');
// apply to the cellcore
$('#lecell image').attr('xlink:href', href);
animating = false;
}, $this.data('duration') * 1000);
}
$('.member')
.each(function(){
// set orig-pos
var $this = $(this);
var transform = $this.attr('transform');
transform = transform.match(/translate\((\d+),(\d+)\)/);
pos = [transform[1],transform[2]];
$this.data('orig-pos', pos);
$this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
// compute duration
var dist = Math.sqrt(Math.pow(posRecep[0] - pos[0],2) +
Math.pow(posRecep[1] - pos[1],2));
var dur = dist*time;
$this.css('transition-duration', dur + 's');
$this.data('duration', dur);
})
// add the click handler
.click(selectMember);
})();
</script>
</html>
