|
|
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> |