@@ Line 7: / Line 7: @@
      <link rel="stylesheet" href="https://2018.igem.org/Template:TUST_China/css/mainbackground?action=raw&ctype=text/css" />
      <style>
+.tustfoot{
+    position: absolute;
+    z-index: 99;
+    top: 272vw!important;
+    display: block;
+}
+.quan{
+    position: absolute;
+    display: block;
+    opacity: 0.9;
+    z-index: 99;
+    top: 300px;
+}
+.tustfoot{
+display:block;
+position:absolute;
+top:2100%;
+}
+#main-btn{
+            position: absolute;
+            z-index: 1;
+            width: 10%;
+            opacity: 0.7;
+            font-size: 1.1vw;
+            top: 600px;
+            left: 50%;
+            -webkit-transform: translateX(-50%);
+            -moz-transform: translateX(-50%);
+            -ms-transform: translateX(-50%);
+            -o-transform: translateX(-50%);
+            transform: translateX(-50%);
+            color: #000;
+            background-color: #FFFFCC;
+            z-index: 10;
+        }
+ #mainbackground3d {
+            position: absolute;
+            height: 800px;
+            width: 103%;
+            z-index: 9;
+        }
+   #top_title{display:none;}
+    #top_title{display:none;}
+    #content{margin:0px;padding:0px; width:100%; }
+#HQ_page p{height:auto}
          body {
-             background-color:#F5F6C9;
+             background-color:#fff;
              margin: 0;
          }
-        .mainbackground3d {
+           </style>
+<script>
-            position: absolute;
+$(function () {
-            height: 100%;
-             width: 100%;
+             var city_top = 810;
+            $('#main-btn').click(function () {
+                $('html,body').animate({scrollTop:city_top},810);
+            })
+        })
+</script>
+</head><body>
+<script type="text/javascript" src="https://2018.igem.org/Template:TUST_China/js/mainbackground?action=raw&ctype=text/javascript"></script>
+<button id="main-btn" class="btn" onclick="sild()">Read<br>More</button>
+<div id="mainbackground3d" class="mainbackground3d" style="top:-2px;">
+    <div id="output" class="mainbackground3d">
+        <div class="DNA-container" id="first">
+            <div class="wave">
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+            </div>
+        </div>
+        <div class="DNA-container" id="second">
+            <div class="wave">
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+            </div>
+        </div>
+        <div class="DNA-container" id="three">
+            <div class="wave">
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+            </div>
+        </div>
+    </div>
+    <div class="main-DNA-container">
+        <div class="first-content"> </div>
+    </div>
+</div>
+<center><div class="quan"><img src="https://static.igem.org/mediawiki/2018/2/2f/T--TUST_China--title.png" width="90%" height="auto" style="opacity: 0.9;"></div></center>
+<div>
+   <img src="https://static.igem.org/mediawiki/2018/2/29/T--TUST_China--mainzhubai.png" width="103%" style="left: -5px;top:790px;position: absolute"/>
+</div>
+<script>
+    (function(){
+        //------------------------------
+        // Mesh Properties
+        //------------------------------
+        var MESH = {
+            width: 1.2,
+            height: 1.2,
+            depth: 10,
+            segments: 16,
+            slices: 8,
+            xRange: 0.8,
+            yRange: 0.1,
+            zRange: 1.0,
+            ambient: '#170088',
+            diffuse: '#00ff3c',
+            speed: 0.002
+        };
+        //------------------------------
+        // Light Properties
+        //------------------------------
+        var LIGHT = {
+            count: 3,
+            xyScalar: 1,
+            zOffset: 100,
+            ambient: '#880066',
+            diffuse: '#FF8800',
+            speed: 0.001,
+            gravity: 1200,
+            dampening: 0.95,
+            minLimit: 10,
+            maxLimit: null,
+            minDistance: 20,
+            maxDistance: 400,
+            autopilot: false,
+            draw: true,
+            bounds: FSS.Vector3.create(),
+            step: FSS.Vector3.create(
+                Math.randomInRange(0.2, 1.0),
+                Math.randomInRange(0.2, 1.0),
+                Math.randomInRange(0.2, 1.0)
+            )
+        };
+        //------------------------------
+        // Render Properties
+        //------------------------------
+        var WEBGL = 'webgl';
+        var CANVAS = 'canvas';
+        var SVG = 'svg';
+        var RENDER = {
+            renderer: SVG
+        };
+        //------------------------------
+        // Global Properties
+        //------------------------------
+        var now, start = Date.now();
+        var center = FSS.Vector3.create();
+        var attractor = FSS.Vector3.create();
+        var mainbackground3d = document.getElementById('mainbackground3d');
+        var controls = document.getElementById('controls');
+        var output = document.getElementById('output');
+        var ui = document.getElementById('ui');
+        var renderer, scene, mesh, geometry, material;
+        var webglRenderer, canvasRenderer, svgRenderer;
+        //------------------------------
+        // Methods
+        //------------------------------
+        function initialise() {
+            createRenderer();
+            createScene();
+            createMesh();
+            createLights();
+            addEventListeners();
+            resize(mainbackground3d.offsetWidth, mainbackground3d.offsetHeight);
+            animate();
          }
-     </style>
-</head>
+        function createRenderer() {
+            webglRenderer = new FSS.WebGLRenderer();
+            canvasRenderer = new FSS.CanvasRenderer();
+            svgRenderer = new FSS.SVGRenderer();
+            setRenderer(RENDER.renderer);
+        }
+        function setRenderer(index) {
+            if (renderer) {
+                output.removeChild(renderer.element);
+            }
+            switch(index) {
+                case WEBGL:
+                    renderer = webglRenderer;
+                    break;
+                case CANVAS:
+                    renderer = canvasRenderer;
+                    break;
+                case SVG:
+                    renderer = svgRenderer;
+                    break;
+            }
+            renderer.setSize(mainbackground3d.offsetWidth, mainbackground3d.offsetHeight);
+            output.appendChild(renderer.element);
+        }
+        function createScene() {
+            scene = new FSS.Scene();
+        }
+        function createMesh() {
+            scene.remove(mesh);
+            renderer.clear();
+            geometry = new FSS.Plane(MESH.width * renderer.width, MESH.height * renderer.height, MESH.segments, MESH.slices);
+            material = new FSS.Material(MESH.ambient, MESH.diffuse);
+            mesh = new FSS.Mesh(geometry, material);
+            scene.add(mesh);
+            // Augment vertices for animation
+            var v, vertex;
+            for (v = geometry.vertices.length - 1; v >= 0; v--) {
+                vertex = geometry.vertices[v];
+                vertex.anchor = FSS.Vector3.clone(vertex.position);
+                vertex.step = FSS.Vector3.create(
+                    Math.randomInRange(0.2, 1.0),
+                    Math.randomInRange(0.2, 1.0),
+                    Math.randomInRange(0.2, 1.0)
+                );
+                vertex.time = Math.randomInRange(0, Math.PIM2);
+            }
+        }
+        function createLights() {
+            var l, light;
+            for (l = scene.lights.length - 1; l >= 0; l--) {
+                light = scene.lights[l];
+                scene.remove(light);
+            }
+            renderer.clear();
+            for (l = 0; l < LIGHT.count; l++) {
+                light = new FSS.Light(LIGHT.ambient, LIGHT.diffuse);
+                light.ambientHex = light.ambient.format();
+                light.diffuseHex = light.diffuse.format();
+                scene.add(light);
+                // Augment light for animation
+                light.mass = Math.randomInRange(0.5, 1);
+                light.velocity = FSS.Vector3.create();
+                light.acceleration = FSS.Vector3.create();
+                light.force = FSS.Vector3.create();
+                // Ring SVG Circle
+                light.ring = document.createElementNS(FSS.SVGNS, 'circle');
+                light.ring.setAttributeNS(null, 'stroke', light.ambientHex);
+                light.ring.setAttributeNS(null, 'stroke-width', '0.5');
+                light.ring.setAttributeNS(null, 'fill', 'none');
+                light.ring.setAttributeNS(null, 'r', '10');
+                // Core SVG Circle
+                light.core = document.createElementNS(FSS.SVGNS, 'circle');
+                light.core.setAttributeNS(null, 'fill', light.diffuseHex);
+                light.core.setAttributeNS(null, 'r', '4');
+            }
+        }
+        function resize(width, height) {
+            renderer.setSize(width, height);
+            FSS.Vector3.set(center, renderer.halfWidth, renderer.halfHeight);
+            createMesh();
+        }
+        function animate() {
+            now = Date.now() - start;
+            update();
+            render();
+            requestAnimationFrame(animate);
+        }
+        function update() {
+            var ox, oy, oz, l, light, v, vertex, offset = MESH.depth/2;
+            // Update Bounds
+            FSS.Vector3.copy(LIGHT.bounds, center);
+            FSS.Vector3.multiplyScalar(LIGHT.bounds, LIGHT.xyScalar);
+            // Update Attractor
+            FSS.Vector3.setZ(attractor, LIGHT.zOffset);
+            // Overwrite the Attractor position
+            if (LIGHT.autopilot) {
+                ox = Math.sin(LIGHT.step[0] * now * LIGHT.speed);
+                oy = Math.cos(LIGHT.step[1] * now * LIGHT.speed);
+                FSS.Vector3.set(attractor,
+                    LIGHT.bounds[0]*ox,
+                    LIGHT.bounds[1]*oy,
+                    LIGHT.zOffset);
+            }
+            // Animate Lights
+            for (l = scene.lights.length - 1; l >= 0; l--) {
+                light = scene.lights[l];
+                // Reset the z position of the light
+                FSS.Vector3.setZ(light.position, LIGHT.zOffset);
+                // Calculate the force Luke!
+                var D = Math.clamp(FSS.Vector3.distanceSquared(light.position, attractor), LIGHT.minDistance, LIGHT.maxDistance);
+                var F = LIGHT.gravity * light.mass / D;
+                FSS.Vector3.subtractVectors(light.force, attractor, light.position);
+                FSS.Vector3.normalise(light.force);
+                FSS.Vector3.multiplyScalar(light.force, F);
+                // Update the light position
+                FSS.Vector3.set(light.acceleration);
+                FSS.Vector3.add(light.acceleration, light.force);
+                FSS.Vector3.add(light.velocity, light.acceleration);
+                FSS.Vector3.multiplyScalar(light.velocity, LIGHT.dampening);
+                FSS.Vector3.limit(light.velocity, LIGHT.minLimit, LIGHT.maxLimit);
+                FSS.Vector3.add(light.position, light.velocity);
+            }
+            // Animate Vertices
+            for (v = geometry.vertices.length - 1; v >= 0; v--) {
+                vertex = geometry.vertices[v];
+                ox = Math.sin(vertex.time + vertex.step[0] * now * MESH.speed);
+                oy = Math.cos(vertex.time + vertex.step[1] * now * MESH.speed);
+                oz = Math.sin(vertex.time + vertex.step[2] * now * MESH.speed);
+                FSS.Vector3.set(vertex.position,
+                    MESH.xRange*geometry.segmentWidth*ox,
+                    MESH.yRange*geometry.sliceHeight*oy,
+                    MESH.zRange*offset*oz - offset);
+                FSS.Vector3.add(vertex.position, vertex.anchor);
+            }
+            // Set the Geometry to dirty
+            geometry.dirty = true;
+        }
+        function render() {
+            renderer.render(scene);
+            // Draw Lights
+            if (LIGHT.draw) {
+                var l, lx, ly, light;
+                for (l = scene.lights.length - 1; l >= 0; l--) {
+                    light = scene.lights[l];
+                    lx = light.position[0];
+                    ly = light.position[1];
+                    switch(RENDER.renderer) {
+                        case CANVAS:
+                            renderer.context.lineWidth = 0.5;
+                            renderer.context.beginPath();
+                            renderer.context.arc(lx, ly, 10, 0, Math.PIM2);
+                            renderer.context.strokeStyle = light.ambientHex;
+                            renderer.context.stroke();
+                            renderer.context.beginPath();
+                            renderer.context.arc(lx, ly, 4, 0, Math.PIM2);
+                            renderer.context.fillStyle = light.diffuseHex;
+                            renderer.context.fill();
+                            break;
+                        case SVG:
+                            lx += renderer.halfWidth;
+                            ly = renderer.halfHeight - ly;
+                            light.core.setAttributeNS(null, 'fill', light.diffuseHex);
+                            light.core.setAttributeNS(null, 'cx', lx);
+                            light.core.setAttributeNS(null, 'cy', ly);
+                            renderer.element.appendChild(light.core);
+                            light.ring.setAttributeNS(null, 'stroke', light.ambientHex);
+                            light.ring.setAttributeNS(null, 'cx', lx);
+                            light.ring.setAttributeNS(null, 'cy', ly);
+                            renderer.element.appendChild(light.ring);
+                            break;
+                    }
+                }
+            }
+        }
+        function addEventListeners() {
+            window.addEventListener('resize', onWindowResize);
+            mainbackground3d.addEventListener('click', onMouseClick);
+            mainbackground3d.addEventListener('mousemove', onMouseMove);
+        }
+        //------------------------------
+        // Callbacks
+        //------------------------------
+        function onMouseClick(event) {
+            FSS.Vector3.set(attractor, event.x, renderer.height - event.y);
+            FSS.Vector3.subtract(attractor, center);
+            LIGHT.autopilot = !LIGHT.autopilot;
+        }
+        function onMouseMove(event) {
+            FSS.Vector3.set(attractor, event.x, renderer.height - event.y);
+            FSS.Vector3.subtract(attractor, center);
+        }
+        function onWindowResize(event) {
+            resize(mainbackground3d.offsetWidth, mainbackground3d.offsetHeight);
+            render();
+        }
+        // Let there be light!
+        initialise();
+     })();
+</script>
+</body>
 </html>
+{{TUST China/foot}}

Difference between revisions of "Team:TUST China"

Latest revision as of 01:50, 18 October 2018