|
|
| (82 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>
| |
| − | //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" },
| |
| − | resize: false
| |
| − | },
| |
| − | 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>
| |
