Team:Freiburg/Content/Team/Members
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<!-- hier ändern https://2014.igem.org/Team:Freiburg/Content/Team/Members --> | <!-- hier ändern https://2014.igem.org/Team:Freiburg/Content/Team/Members --> | ||
- | < | + | <style> |
- | + | .team-member-virus { | |
- | + | width:100%; | |
- | < | + | height:0; |
- | < | + | padding-top:68.359375%; |
- | + | position: relative; | |
- | + | } | |
- | + | svg { | |
- | <h1> | + | position:absolute; |
- | + | top:0;left:0; | |
- | + | width:100%;height:100%; | |
- | + | } | |
- | + | .member { | |
- | + | cursor: pointer; | |
- | + | } | |
- | + | </style> | |
- | </ | + | <div style="display:none;"> |
+ | <div id="data-anne"> | ||
+ | <h1>Anne Müller</h1> | ||
+ | <ul> | ||
+ | <li>Age: 23</li> | ||
+ | <li>Studies: Biological Sciences, Applied Biosciences</li> | ||
+ | <li>Favorite dish and/or drink: Lasagne, Mojito</li> | ||
+ | <li>Favorite color and/or number: Red, 4</li> | ||
+ | <li>Hobbies: Showjumping, dog cenel, reading</li> | ||
+ | <li>Why iGEM?: Last years iGEM was great!</li> | ||
+ | </ul> | ||
</div> | </div> | ||
- | <div | + | <div id="data-christoph"> |
- | < | + | <h1>Christoph Bauer</h1> |
+ | <ul> | ||
+ | <li>Age: 25 </li> | ||
+ | <li>Studies: Biological Sciences, Applied Biosciences</li> | ||
+ | <li>Favorite dish and/or drink: Spaetzle, lentils and hot dogs</li> | ||
+ | <li>Favorite color and/or number: 6</li> | ||
+ | <li>Hobbies: Sports, handball, photography, reading</li> | ||
+ | <li>Why iGEM?: Learn something new, implement our own idea!</li> | ||
+ | </ul> | ||
</div> | </div> | ||
- | + | <div id="data-clarissa"> | |
- | </ | + | <h1>Clarissa Hiltl</h1> |
- | + | <ul> | |
- | < | + | <li>Age: 22</li> |
- | <h1> | + | <li>Studies: Bachelor in Biology</li> |
- | + | <li>Favorite dish and/or drink: Mojito</li> | |
- | + | <li>Favorite color and/or number: Blue and 8</li> | |
- | + | <li>Hobbies: Travelling</li> | |
- | + | <li>Why iGEM?: Im always excited for new experiences and the possibilty to meet great people.</li> | |
- | + | </ul> | |
- | + | </div> | |
- | + | <div id="data-dennis"> | |
- | + | <h1>Dennis Zimmer</h1> | |
- | + | <ul> | |
- | + | <li>Age: 24</li> | |
- | + | <li>Studies: Biological Sciences, Immunology</li> | |
- | < | + | <li>Favorite dish and/or drink: Pancakes / Dark 'n' Stormy</li> |
- | < | + | <li>Favorite color and/or number: Blue, 18</li> |
+ | <li>Hobbies: Beach volleyball, mountain biking, traveling</li> | ||
+ | <li>Why iGEM?: I think iGEM is a great opportunity to learn amazing new stuff!</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-ileana"> | ||
+ | <h1>Ileana Bender</h1> | ||
+ | <ul> | ||
+ | <li>Age: </li> | ||
+ | <li>Studies: </li> | ||
+ | <li>Favorite dish and/or drink: </li> | ||
+ | <li>Favorite color and/or number: </li> | ||
+ | <li>Hobbies: </li> | ||
+ | <li>Why iGEM?: </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-jialiang"> | ||
+ | <h1>Jialiang Lu</h1> | ||
+ | <ul> | ||
+ | <li>Age: </li> | ||
+ | <li>Studies: </li> | ||
+ | <li>Favorite dish and/or drink: </li> | ||
+ | <li>Favorite color and/or number: </li> | ||
+ | <li>Hobbies: </li> | ||
+ | <li>Why iGEM?: </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-kristoffer"> | ||
+ | <h1>Kristoffer Weißert</h1> | ||
+ | <ul> | ||
+ | <li>Age: 24</li> | ||
+ | <li>Studies: Biological Sciences, Immunology</li> | ||
+ | <li>Favorite dish and/or drink: Rice pudding</li> | ||
+ | <li>Favorite color and/or number: Red, 77</li> | ||
+ | <li>Hobbies: Table tennis, singing</li> | ||
+ | <li>Why iGEM?: Do something besides studying, learn to organize a project. </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-laura"> | ||
+ | <h1>Laura Ost</h1> | ||
+ | <ul> | ||
+ | <li>Age: 23</li> | ||
+ | <li>Studies: Bachelor in Biology</li> | ||
+ | <li>Favorite dish and/or drink: Flammkuchen (flame cake)</li> | ||
+ | <li>Favorite color and/or number: Dark green and 7</li> | ||
+ | <li>Hobbies: Reading</li> | ||
+ | <li>Why iGEM?: It fascinates me to learn about the diversity of ideas different teams came up with. Also I, as part of a great team like to develop a project from scratch. </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-lisa"> | ||
+ | <h1>Lisa Schmunk</h1> | ||
+ | <ul> | ||
+ | <li>Age: 24</li> | ||
+ | <li>Studies: Mistress of Biology; Genetics and Synthetic Biology</li> | ||
+ | <li>Favorite dish and/or drink: Black tea</li> | ||
+ | <li>Favorite color and/or number: Blue, 7</li> | ||
+ | <li>Hobbies: Jazz & modern dance</li> | ||
+ | <li>Why iGEM?: Once is not enough :)</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-marc"> | ||
+ | <h1>Marc Müller</h1> | ||
+ | <ul> | ||
+ | <li>Age: </li> | ||
+ | <li>Studies: </li> | ||
+ | <li>Favorite dish and/or drink: </li> | ||
+ | <li>Favorite color and/or number: </li> | ||
+ | <li>Hobbies: </li> | ||
+ | <li>Why iGEM?: </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-max"> | ||
+ | <h1>Max Ulbrich</h1> | ||
+ | <ul> | ||
+ | <li>Age: 41</li> | ||
+ | <li>Studied: Physics</li> | ||
+ | <li>Favorite dish and/or drink: Flaming Moe</li> | ||
+ | <li>Favorite color and/or number: Pink</li> | ||
+ | <li>Hobbies: Brewing, assembling microscopes, disassembling microscopes</li> | ||
+ | <li>Why iGEM?: Because the students need someone to look up to.</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-mirja"> | ||
+ | <h1>Mirja Harms</h1> | ||
+ | <ul> | ||
+ | <li>Age: 22</li> | ||
+ | <li>Studies: Biological Sciences, Immunology</li> | ||
+ | <li>Favorite dish and/or drink: Favorite dish and/or drink: Sun & love</li> | ||
+ | <li>Favorite color and/or number: red, all of the numbers</li> | ||
+ | <li>Hobbies: Climbing, bouldering, hiking</li> | ||
+ | <li>Why iGEM?: I like glowing cells!</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-natalie"> | ||
+ | <h1>Natalie Louis</h1> | ||
+ | <ul> | ||
+ | <li>Age: 25</li> | ||
+ | <li>Studies: Master in Applied Biosciences</li> | ||
+ | <li>Favorite dish and/or drink: Mussels</li> | ||
+ | <li>Favorite color and/or number: Blue and 4 </li> | ||
+ | <li>Hobbies: Latin, standard and salsa dancing, hiking</li> | ||
+ | <li>Why iGEM?: To be able to pass on iGEM experiences of the previous years.</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-nicole"> | ||
+ | <h1>Nicole Gensch</h1> | ||
+ | <ul> | ||
+ | <li>Age: 32</li> | ||
+ | <li>Studied: Developmental Biology / Biotechnology</li> | ||
+ | <li>Favorite dish and/or drink: Self-made sandwiches and salad</li> | ||
+ | <li>Favorite color and/or number: Bright colors</li> | ||
+ | <li>Hobbies: Workout & fitness</li> | ||
+ | <li>Why iGEM?: I like the idea of iGEM and I was interested to see how a group of students, which did not know each other beforehand, become a team, develop their own idea of a research project and work on it.</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-ole"> | ||
+ | <h1>Jan Ole Ackermann</h1> | ||
<ul> | <ul> | ||
<li>Age: 25 </li> | <li>Age: 25 </li> | ||
<li>Studies: Biological Sciences, Immunology</li> | <li>Studies: Biological Sciences, Immunology</li> | ||
- | <li>Favorite dish and/or drink: Pizza, green cabbage with kassler & smoothie</li> | + | <li>Favorite dish and/or drink: Pizza, green cabbage with kassler & smoothie</li> |
<li>Favorite color and/or number: Blue, 8</li> | <li>Favorite color and/or number: Blue, 8</li> | ||
<li>Hobbies: Music, sport, reading</li> | <li>Hobbies: Music, sport, reading</li> | ||
<li>Why iGEM?: Good food! New experiences, organize an own project.</li> | <li>Why iGEM?: Good food! New experiences, organize an own project.</li> | ||
</ul> | </ul> | ||
- | </ | + | </div> |
- | < | + | <div id="data-pascal"> |
- | + | <h1>Pascal Sartor</h1> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
<ul> | <ul> | ||
- | <li>Age: | + | <li>Age: </li> |
- | <li>Studies: | + | <li>Studies: </li> |
- | <li>Favorite dish and/or drink: | + | <li>Favorite dish and/or drink: </li> |
- | <li>Favorite color and/or number: | + | <li>Favorite color and/or number: </li> |
- | <li>Hobbies: | + | <li>Hobbies: </li> |
- | <li>Why iGEM?: | + | <li>Why iGEM?: </li> |
</ul> | </ul> | ||
- | </ | + | </div> |
- | < | + | <div id="data-patrick"> |
- | + | <h1>Patrick Gonschorek</h1> | |
- | </ | + | <ul> |
+ | <li>Age: </li> | ||
+ | <li>Studies: </li> | ||
+ | <li>Favorite dish and/or drink: </li> | ||
+ | <li>Favorite color and/or number: </li> | ||
+ | <li>Hobbies: </li> | ||
+ | <li>Why iGEM?: </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-patrickh"> | ||
+ | <h1>Patrick Heisterkamp</h1> | ||
+ | <ul> | ||
+ | <li>Age: 20</li> | ||
+ | <li>Studies: Molecular Medicine</li> | ||
+ | <li>Favorite dish and/or drink: Schnitzel with chips</li> | ||
+ | <li>Favorite color and/or number: 13</li> | ||
+ | <li>Hobbies: Chinese language, jogging, informatics</li> | ||
+ | <li>Why iGEM?: Learn something new!</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-valentina"> | ||
+ | <h1>Valentina Diehl</h1> | ||
+ | <ul> | ||
+ | <li>Age: </li> | ||
+ | <li>Studies: </li> | ||
+ | <li>Favorite dish and/or drink: </li> | ||
+ | <li>Favorite color and/or number: </li> | ||
+ | <li>Hobbies: </li> | ||
+ | <li>Why iGEM?: </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="data-wignand"> | ||
+ | <h1>Wignand Mühlhäuser</h1> | ||
+ | <ul> | ||
+ | <li>Age: 25</li> | ||
+ | <li>Studies: Master in Biology</li> | ||
+ | <li>Favorite dish and/or drink: Steak</li> | ||
+ | <li>Favorite color and/or number: Cherry Berry and pi</li> | ||
+ | <li>Hobbies: Music</li> | ||
+ | <li>Why iGEM?: I really like the idea of students creating and working on their own project building something together from the bottom up. </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="team-member-virus"> | ||
+ | <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> | ||
+ | <!-- bottom cell where text will be displayed eventually --> | ||
+ | <!-- cell part --> | ||
+ | <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="https://static.igem.org/mediawiki/2014/2/24/Teamfreiburg-all.jpg" /> | ||
+ | </g> | ||
+ | <!-- receptor and docking part --> | ||
+ | <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> | ||
+ | <!-- content part --> | ||
+ | <foreignObject class="node" x="380" y="440" width="500" height="270"> | ||
+ | <body xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <div id="member-description" style="height:250px; overflow:auto;"> | ||
+ | <h1>The iGEM2014 Team Freiburg </h1> | ||
+ | <p>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...</p> | ||
+ | </div> | ||
+ | </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="https://static.igem.org/mediawiki/2014/2/21/Teamfreiburg-anne.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/0/09/Teamfreiburgnopic.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/b/ba/Teamfreiburg-clarissa.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/c/cf/Teamfreiburg-dennis.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/0/09/Teamfreiburgnopic.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/9/9f/Teamfreiburg-jialiang.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/9/93/Teamfreiburg-kristoffer.jpg" /> |
- | < | + | <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="https://static.igem.org/mediawiki/2014/a/a0/Teamfreiburg-laura.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/7/7c/Teamfreiburg-lisa.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/f/fe/Teamfreiburg-marc.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/4/46/Teamfreiburg-max.jpg" /> |
- | + | <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="https://static.igem.org/mediawiki/2014/3/35/Teamfreiburg-mirja.jpg" /> | |
- | + | <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="https://static.igem.org/mediawiki/2014/e/e2/Teamfreiburg-natalie.jpg" /> | |
- | + | <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="https://static.igem.org/mediawiki/2014/b/ba/Teamfreiburg-nicole.jpg" /> |
- | + | <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="https://static.igem.org/mediawiki/2014/3/3a/Teamfreiburg-ole.jpg" /> | |
- | + | <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="https://static.igem.org/mediawiki/2014/4/43/Teamfreiburg-pascal.jpg" /> | |
- | + | <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="https://static.igem.org/mediawiki/2014/2/2d/Teamfreiburg-patrick.jpg" /> | |
- | + | <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="https://static.igem.org/mediawiki/2014/3/33/Teamfreiburg-PatrickH.jpg" /> | ||
+ | <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="https://static.igem.org/mediawiki/2014/0/09/Teamfreiburgnopic.jpg" /> |
- | + | <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="https://static.igem.org/mediawiki/2014/6/68/Teamfreiburgwignand.jpg" /> | |
- | + | <use xlink:href="#sixsider" /> | |
- | + | </g> | |
- | + | </g> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | </svg> | |
- | + | </div> | |
- | + | <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> | </html> |
Revision as of 10:22, 17 October 2014
<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>