Template:CSS/EPFL bottom

From 2014.igem.org

(Difference between revisions)
 
(7 intermediate revisions not shown)
Line 2: Line 2:
<!-- SPONSORS -->
<!-- SPONSORS -->
<div id="contactSection">
<div id="contactSection">
-
<div class="span6"><h1 class="cntr">Sponsors</h1>
+
<div><h1 class="cntr">Sponsors</h1></div>
-
<p>They are supporting us</p></div>
+
   <div class="container">
   <div class="container">
     <div class="row">
     <div class="row">
Line 23: Line 22:
-
     <div class="span8 copyright"> <div class="pull-left"><a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/5/58/IGEM_basic_logo_white.png" width="80"></a></div>
+
     <div class="copyright"> <div class="pull-left"><a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/5/58/IGEM_basic_logo_white.png" width="80"></a></div>
<p>Copyright &copy; iGEM EPFL 2014. All Rights Reserved</p></div>
<p>Copyright &copy; iGEM EPFL 2014. All Rights Reserved</p></div>
   </div>
   </div>
Line 35: Line 34:
-
<a href="#" class="go-top" ><i class="icon-arrow-up"></i></a>
+
<a href="#" class="go-top" ><i class="glyphicon glyphicon-arrow-up"></i></a>
Line 42: Line 41:
<script src="https://2014.igem.org/Template:JS/EPFL_scrollto?action=raw&ctype=text/javascript"></script>
<script src="https://2014.igem.org/Template:JS/EPFL_scrollto?action=raw&ctype=text/javascript"></script>
<script src="https://2014.igem.org/Template:JS/EPFL_easing?action=raw&ctype=text/javascript"></script>
<script src="https://2014.igem.org/Template:JS/EPFL_easing?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2014.igem.org/Template:JS/EPFL_konami?action=raw&ctype=text/javascript"></script>
<script src="https://2014.igem.org/Template:JS/EPFL_default?action=raw&ctype=text/javascript"></script>
<script src="https://2014.igem.org/Template:JS/EPFL_default?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2014.igem.org/Template:JS/EPFL_lightbox?action=raw&ctype=text/javascript"></script>
<script type="text/javascript">
<script type="text/javascript">
Line 51: Line 52:
     interval: 7000
     interval: 7000
   });
   });
-
 
-
  var SCREEN_WIDTH = 388;
 
-
  var SCREEN_HEIGHT = 220;
 
-
 
-
  var MAX_SCREEN_WIDTH = 388;
 
-
  var MAX_SCREEN_HEIGHT = 220;
 
-
 
-
  var MAX_IMG_WIDTH = 1129;
 
-
  var MAX_IMG_HEIGHT = 427;
 
-
   
 
-
  var canvas;
 
-
  var context;
 
-
  var particle;
 
-
  var img;
 
-
 
 
-
  var mouseX = (window.innerWidth - SCREEN_WIDTH);
 
-
  var mouseY = (window.innerHeight - SCREEN_HEIGHT);
 
-
 
 
-
  init();
 
-
 
-
  function init() {
 
-
 
-
    canvas = document.getElementById('biopad');
 
-
 
-
    img = document.getElementById('slide1');
 
-
   
 
-
    if (canvas && canvas.getContext) {
 
-
      context = canvas.getContext('2d');
 
-
     
 
-
      // Register event listeners
 
-
      canvas.addEventListener('mousemove', documentMouseMoveHandler, false);
 
-
      canvas.addEventListener('touchstart', canvasTouchStartHandler, false);
 
-
      canvas.addEventListener('touchmove', canvasTouchMoveHandler, false);
 
-
      window.addEventListener('resize', windowResizeHandler, false);
 
-
     
 
-
      createParticles();
 
-
     
 
-
      windowResizeHandler();
 
-
     
 
-
      setInterval( loop, 1000 / 60 );
 
-
    }
 
-
  }
 
-
 
-
  function createParticles() {
 
-
      particle = {
 
-
        position: { x: mouseX, y: mouseY },
 
-
        size: 5,
 
-
        speed: 0.05,
 
-
        targetSize: 3,
 
-
        fillColor: '#ffff66',
 
-
      };
 
-
     
 
-
  }
 
-
 
-
  function documentMouseMoveHandler(event) {
 
-
 
-
    pos = canvas.getBoundingClientRect();
 
-
    mouseX = event.clientX - pos.left;
 
-
    mouseY = event.clientY - pos.top;
 
-
 
-
    // fix mouse Y
 
-
  }
 
-
 
 
-
 
-
  function canvasTouchStartHandler(event) {
 
-
    if(event.touches.length == 1) {
 
-
 
-
      pos = canvas.getBoundingClientRect();
 
-
      mouseX = event.touches[0].pageX - pos.left;
 
-
      mouseY = event.touches[0].pageY - pos.top;
 
-
 
-
      event.preventDefault();
 
-
 
-
    }
 
-
  }
 
-
 
 
-
  function canvasTouchMoveHandler(event) {
 
-
    if(event.touches.length == 1) {
 
-
 
-
      pos = canvas.getBoundingClientRect();
 
-
      event.preventDefault();
 
-
 
-
      mouseX = event.touches[0].pageX - pos.left;
 
-
      mouseY = event.touches[0].pageY - pos.top;
 
-
    }
 
-
  }
 
-
 
 
-
 
-
  function windowResizeHandler() {
 
-
 
-
    imgPos = img.getBoundingClientRect();
 
-
 
-
    ratioW = imgPos.width / MAX_IMG_WIDTH;
 
-
    ratioH = imgPos.height / MAX_IMG_HEIGHT;
 
-
 
-
    SCREEN_WIDTH = parseInt(MAX_SCREEN_WIDTH * ratioW);
 
-
    SCREEN_HEIGHT = parseInt(MAX_SCREEN_HEIGHT * ratioH);
 
-
   
 
-
    canvas.width = SCREEN_WIDTH;
 
-
    canvas.height = SCREEN_HEIGHT;
 
-
 
-
 
-
    canvas.style.position = 'absolute';
 
-
    canvas.style.left = parseInt((imgPos.right - canvas.width) - 48 * ratioW) + 'px';
 
-
    canvas.style.top = parseInt(90 * ratioH) + 'px';
 
-
  }
 
-
 
-
  function loop() {
 
-
     
 
-
    // Fade out the lines slowly by drawing a rectangle over the entire canvas
 
-
    context.fillStyle = 'rgba(203,225,229,0.2)';
 
-
    //context.fillStyle = 'rgba(0,0,0,0.05)';
 
-
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 
-
         
 
-
    var lp = { x: particle.position.x, y: particle.position.y };
 
-
       
 
-
    // Apply position
 
-
    particle.position.x = mouseX;
 
-
    particle.position.y = mouseY;
 
-
   
 
-
    // Limit to screen bounds
 
-
    particle.position.x = Math.max( Math.min( particle.position.x, SCREEN_WIDTH ), 0 );
 
-
    particle.position.y = Math.max( Math.min( particle.position.y, SCREEN_HEIGHT ), 0 );
 
-
   
 
-
   
 
-
    context.beginPath();
 
-
    context.fillStyle = particle.fillColor;
 
-
    context.strokeStyle = particle.fillColor;
 
-
    context.lineWidth = particle.size;
 
-
    context.moveTo(lp.x, lp.y);
 
-
    context.lineTo(particle.position.x, particle.position.y);
 
-
    context.stroke();
 
-
    context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);
 
-
    context.fill();
 
-
   
 
-
  }
 
-
 
   });
   });

Latest revision as of 19:01, 14 October 2014

Sponsors

Copyright © iGEM EPFL 2014. All Rights Reserved

Retrieved from "http://2014.igem.org/Template:CSS/EPFL_bottom"