Difference between revisions of "Team:Vilnius-Lithuania/test/index.html"

Line 1: Line 1:
 
{{Vilnius-Lithuania/TopBar}}
 
{{Vilnius-Lithuania/TopBar}}
−
{{Vilnius-Lithuania/index.css}}
 
−
{{Vilnius-Lithuania/fonts.css}}
 
 
{{Vilnius-Lithuania/menuOverlay}}
 
{{Vilnius-Lithuania/menuOverlay}}
 
<html>
 
<html>
Line 8: Line 6:
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/fonts.css&action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/index.css&action=raw&ctype=text/css" />
 
</head>
 
</head>
  
Line 33: Line 33:
 
                       <h1>project x</h1>
 
                       <h1>project x</h1>
 
             </div>
 
             </div>
−
             <div id="desc-wrapper" style="width: fit-content;margin: 0 auto;">
+
             <div id="desc-wrapper">
−
                       <div id="center-desc" style="width: -webkit-fit-content;/* margin-left: 20px; */">
+
                       <div id="center-desc" style="width: -webkit-fit-content;">
−
                                 <span id="description" style="width: 129px; display: block;">Prevent</span>
+
                                 <span id="description">Prevent</span>
 
                                 <span>.</span>
 
                                 <span>.</span>
 
                       </div>
 
                       </div>
Line 49: Line 49:
 
                     <h1>problem</h1>
 
                     <h1>problem</h1>
 
         </div>
 
         </div>
−
    </section>
+
</section>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/particles.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/particles.js&action=raw&ctype=text/javascript"></script>
−
<script>
+
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/intro.js&action=raw&ctype=text/javascript"></script>
−
//Set bubbles container height;
+
−
window.onresize = setBubblesContainerHeight;
+
−
window.addEventListener('load',function(){
+
−
setTimeout(setBubblesContainerHeight,2000);
+
−
});
+
−
function setBubblesContainerHeight(){
+
−
  var waveTop = document.getElementById("wave12").getBoundingClientRect().top;
+
−
  document.getElementById("bubbles-container").style.height = "calc(100vh - " + waveTop + "px)";
+
−
}
+
−
//Bubbles
+
−
particlesJS("bubbles-container", {
+
−
  particles: {
+
−
    number: { value: 100, density: { enable: true, value_area: 1200 } },
+
−
    color: { value: "#121212" },
+
−
    shape: {
+
−
      type: "circle",
+
−
      stroke: {
+
−
        width: 0.25,
+
−
        color: "#f5f5f5"
+
−
      }
+
−
    },
+
−
    opacity: {
+
−
      value: 0.3,
+
−
      random: true
+
−
    },
+
−
    size: {
+
−
      value: 11.837237977805179,
+
−
      random: true
+
−
    },
+
−
    line_linked: {
+
−
      enable: false
+
−
    },
+
−
    move: {
+
−
      enable: true,
+
−
      speed: 0.7,
+
−
      direction: "top",
+
−
      random: true,
+
−
      straight: false,
+
−
      out_mode: "out",
+
−
      bounce: false,
+
−
      attract: { enable: false, rotateX: 600, rotateY: 600 }
+
−
    }
+
−
  },
+
−
  interactivity: {
+
−
    detect_on: "canvas",
+
−
    events: {
+
−
      onhover: { enable: false },
+
−
      onclick: { enable: true, mode: "push" },
+
−
      onresize: {enable: true}
+
−
    },
+
−
    modes: {
+
−
      push: {
+
−
        particles_nb: 6
+
−
      }
+
−
    }
+
−
  },
+
−
  retina_detect: true
+
−
});
+
−
 
+
−
//Text change
+
−
$("#test-width").html("Prevent");
+
−
$("#description").width($("#test-width").width());
+
−
console.log(document.getElementById("description").style.width);
+
−
var text = ["Treat", "Prevent","Detect"];
+
−
var counter = 0;
+
−
var elem = $("#description");
+
−
elem.html("Detect");
+
−
setInterval(change, 3000);
+
−
function change() {
+
−
    elem.fadeOut(function(){
+
−
        elem.html(text[counter]);
+
−
        counter++;
+
−
        if(counter >= text.length) { counter = 0; }
+
−
        elem.fadeIn();
+
−
    });
+
−
}
+
−
 
+
−
// Waves
+
−
var container = document.body;
+
−
var width = 1920
+
−
var height = container.offsetHeight;
+
−
 
+
−
var waveWidth = 1920
+
−
 
+
−
var points = [];
+
−
 
+
−
function calculateWavePoints(factor, wave) {
+
−
  var points = [];
+
−
  var wavePoints = parseInt(wave.getAttribute("wavepoints"));
+
−
  var speed = parseFloat(wave.getAttribute("speed"))
+
−
  var waveDelta = parseInt(wave.getAttribute("wavedelta"));
+
−
  var waveHeight = parseInt(wave.getAttribute("waveheight"))
+
−
  for (var i = 0; i <= wavePoints; i++) {
+
−
    var x = i/wavePoints * waveWidth;
+
−
    var sinSeed = (factor + (i + i % wavePoints)) * speed * 100;
+
−
    var sinHeight = Math.sin(sinSeed / 100) * waveDelta;
+
−
    var yPos = Math.sin(sinSeed / 100) * sinHeight  + waveHeight;
+
−
    points.push({x: x, y: yPos});
+
−
  }
+
−
  return points;
+
−
}
+
−
 
+
−
function buildPath(points) {
+
−
  var SVGString = 'M ' + points[0].x + ' ' + points[0].y;
+
−
 
+
−
  var cp0 = {
+
−
    x: (points[1].x - points[0].x) / 2,
+
−
    y: (points[1].y - points[0].y) + points[0].y + (points[1].y - points[0].y)
+
−
  };
+
−
 
+
−
  SVGString += ' C ' + cp0.x + ' ' + cp0.y + ' ' + cp0.x + ' ' + cp0.y + ' ' + points[1].x + ' ' + points[1].y;
+
−
 
+
−
  var prevCp = cp0;
+
−
  var inverted = -1;
+
−
 
+
−
  for (var i = 1; i < points.length-1; i++) {
+
−
    var cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
+
−
    var cp1 = {
+
−
      x: (points[i].x - prevCp.x) + points[i].x,
+
−
      y: (points[i].y - prevCp.y) + points[i].y
+
−
    };
+
−
 
+
−
    SVGString += ' C ' + cp1.x + ' ' + cp1.y + ' ' + cp1.x + ' ' + cp1.y + ' ' + points[i+1].x + ' ' + points[i+1].y;
+
−
    prevCp = cp1;
+
−
    inverted = -inverted;
+
−
  };
+
−
 
+
−
  SVGString += ' L ' + width + ' ' + height;
+
−
  SVGString += ' L 0 ' + height + ' Z';
+
−
  return SVGString;
+
−
}
+
−
 
+
−
var lastUpdate;
+
−
var totalTime = 0;
+
−
 
+
−
function tick() {
+
−
  var now = window.Date.now();
+
−
 
+
−
  if (lastUpdate) {
+
−
    var elapsed = (now-lastUpdate) / 1000;
+
−
    lastUpdate = now;
+
−
 
+
−
    totalTime += elapsed;
+
−
   
+
−
    var factor = totalTime*Math.PI;
+
−
    var waves = document.querySelectorAll("path");
+
−
for(let wave of waves){
+
−
    wave.setAttribute('d', buildPath(calculateWavePoints(factor, wave)));
+
−
}
+
−
  } else {
+
−
    lastUpdate = now;
+
−
  }
+
−
 
+
−
  window.requestAnimationFrame(tick);
+
−
};
+
−
tick();
+
−
 
+
−
 
+
−
 
+
−
</script>
+
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 10:46, 26 July 2020

project x

Prevent .
Prevent

problem