|
|
| Line 484: |
Line 484: |
| | </svg> | | </svg> |
| | </div> | | </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 = $('.team-member-virus .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);
| |
| - |
| |
| - | }
| |
| - | $('.team-member-virus .member')
| |
| - | .each(function(){
| |
| - | // set orig-pos
| |
| - | var $this = $(this);
| |
| - | console.dir($this);
| |
| - | var transform = $this.attr('transform');
| |
| - | console.dir(transform);
| |
| - | console.log(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> |
"
