|
|
(75 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | {{Vilnius-Lithuania/TopBar}}
| |
− | {{Vilnius-Lithuania/index.css}}
| |
− | {{Vilnius-Lithuania/fonts.css}}
| |
− | {{Vilnius-Lithuania/menuOverlay}}
| |
− | <html>
| |
| | | |
− | <head>
| |
− | <meta charset="utf-8">
| |
− | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
− | </head>
| |
− |
| |
− | <body>
| |
− | <section class="container" id="intro-page">
| |
− | <div id="intro-header">
| |
− | <svg width="100%" height="100%"version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
− | <path id="wave1" d="" fill="#679BF4" waveHeight="5" waveDelta="16" speed="0.21" wavePoints="6"/>
| |
− | <path id="wave2" d="" fill="#4080ED" waveHeight="35" waveDelta="20" speed="0.18" wavePoints="8"/>
| |
− | <path id="wave3" d="" fill="#2E64EC" waveHeight="65" waveDelta="18" speed="0.16" wavePoints="7"/>
| |
− | <path id="wave4" d="" fill="#2454CD" waveHeight="95" waveDelta="15" speed="0.13" wavePoints="5"/>
| |
− | <path id="wave5" d="" fill="#1A44AE" waveHeight="125" waveDelta="18" speed="0.08" wavePoints="9"/>
| |
− | <path id="wave6" d="" fill="#11348F" waveHeight="155" waveDelta="20" speed="0.13" wavePoints="6"/>
| |
− | <path id="wave7" d="" fill="#142E71" waveHeight="185" waveDelta="21" speed="0.15" wavePoints="5"/>
| |
− | <path id="wave8" d="" fill="#142455" waveHeight="215" waveDelta="23" speed="0.18" wavePoints="4"/>
| |
− | <path id="wave9" d="" fill="#131F43" waveHeight="245" waveDelta="18" speed="0.21" wavePoints="7"/>
| |
− | <path id="wave10" d="" fill="#0F162C" waveHeight="275" waveDelta="15" speed="0.18" wavePoints="10"/>
| |
− | <path id="wave11" d="" fill="#101422" waveHeight="305" waveDelta="28" speed="0.13" wavePoints="5"/>
| |
− | <path id="wave12" d="" fill="#121212" waveHeight="335" waveDelta="18" speed="0.08" wavePoints="7"/>
| |
− | </svg>
| |
− | </div>
| |
− | <div id="intro">
| |
− | <div id="text-wrapper">
| |
− | <div id="title">
| |
− | <h1>project x</h1>
| |
− | </div>
| |
− | <div id="desc-wrapper" style="width: fit-content;margin: 0 auto;">
| |
− | <div id="center-desc" style="width: -webkit-fit-content;/* margin-left: 20px; */">
| |
− | <span id="description" style="width: 129px; display: block;">Prevent</span>
| |
− | <span>.</span>
| |
− | </div>
| |
− | <span id="test-width">Prevent</span>
| |
− | </div>
| |
− | </div>
| |
− | <div id="bubbles-container">
| |
− | </div>
| |
− | </div>
| |
− | </section>
| |
− | <section class="container" id="problem-page">
| |
− | <div id="problem-header">
| |
− | <h1>problem</h1>
| |
− | </div>
| |
− | </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>
| |
− | //Set bubbles container height;
| |
− | window.onresize = setBubblesContainerHeight;
| |
− | window.addEventListener('load',function(){
| |
− | console.log('loaded')
| |
− | setBubblesContainerHeight();
| |
− | });
| |
− | 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>
| |
− |
| |
− | </html>
| |