Difference between revisions of "Team:UCopenhagen/Test/Particlejs"

@@ Line 1: / Line 1: @@
-{{UCopenhagen}}
+{{UCopenhagen/Main}}
 <html>
-</div>
-</div>
 <style>
-/* ---- particles.js container ---- */
+    canvas {
-#particles-js {
+        display: block;
-  position: absolute;
+        vertical-align: bottom;
-  width: 100%;
+    }
-  height: 40%;
-  margin-top: -60px;
+    /* ---- particles.js container ---- */
-  background-color: #181630;
-  background-image: url("https://static.igem.org/mediawiki/2018/5/5f/T--UCopenhagen--v1-iGEM-Copenhagen-square-white.png");
+    #particles-js {
-  background-repeat: no-repeat;
+        position: absolute;
-  background-size: 50%;
+        height: 400px;
-  background-position: 50% 50%;
+        z-index: -1;
-}
+        background-color: #181630;
+        background-image: url("https://static.igem.org/mediawiki/2018/5/5f/T--UCopenhagen--v1-iGEM-Copenhagen-square-white.png");
+        background-repeat: no-repeat;
+        background-size: 60%;
+        background-position: 50% 50%;
+    }
+    @media only screen and (max-width: 1000px) {
+        #particles-js {
+            position: absolute;
+            height: 400px;
+            margin-top: 47px;
+            z-index: -1;
+            background-color: #181630;
+            background-image: url("https://static.igem.org/mediawiki/2018/5/58/T--UCopenhagen--v1-Logo-text-black.png");
+            background-repeat: no-repeat;
+            background-size: 70%;
+            background-position: 50% 50%;
+        }
+    }
 </style>
-<div class="igem_2018_team_content pageContent">
 <!-- particles.js container -->
-<div id="particles-js"></div>
+<div class="igem_2018_team_content pageContent" id="particles-js">
 </div>
@@ Line 30: / Line 49: @@
 <script>
-particlesJS("particles-js", {
+    particlesJS("particles-js", {
-  particles: {
+        particles: {
-    number: { value: 150, density: { enable: true, value_area: 800 } },
+            number: {
-    color: { value: "#ffffff" },
+                value: 150,
-    shape: {
+                density: {
-      type: "circle",
+                    enable: true,
-      stroke: { width: 0, color: "#000000" },
+                    value_area: 800
-      polygon: { nb_sides: 5 },
+                }
-      image: { src: "", width: 100, height: 100 }
+            },
-    },
+            color: {
-    opacity: {
+                value: "#ffffff"
-      value: 0.4,
+            },
-      random: true,
+            shape: {
-      anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
+                type: "circle",
-    },
+                stroke: {
-    size: {
+                    width: 0,
-      value: 3,
+                    color: "#000000"
-      random: true,
+                },
-      anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
+                polygon: {
-    },
+                    nb_sides: 5
-    line_linked: {
+                },
-      enable: false,
+                image: {
-      distance: 150,
+                    src: "",
-      color: "#ffffff",
+                    width: 100,
-      opacity: 0.4,
+                    height: 100
-      width: 1
+                }
-    },
+            },
-    move: {
+            opacity: {
-      enable: true,
+                value: 0.4,
-      speed: 0.5,
+                random: true,
-      direction: "top-right",
+                anim: {
-      random: false,
+                    enable: false,
-      straight: true,
+                    speed: 1,
-      out_mode: "out",
+                    opacity_min: 0.1,
-      bounce: false,
+                    sync: false
-      attract: { enable: false, rotateX: 600, rotateY: 1200 }
+                }
-    }
+            },
-  },
+            size: {
-  interactivity: {
+                value: 3,
-    detect_on: "canvas",
+                random: true,
-    events: {
+                anim: {
-      onhover: { enable: true, mode: "bubble" },
+                    enable: false,
-      onclick: { enable: true, mode: "repulse" },
+                    speed: 40,
-      resize: true
+                    size_min: 0.1,
-    },
+                    sync: false
-    modes: {
+                }
-      grab: { distance: 400, line_linked: { opacity: 0 } },
+            },
-      bubble: { distance: 300, size: 0, duration: 2, opacity: 8, speed: 3 },
+            line_linked: {
-      repulse: { distance: 200, duration: 0.4 },
+                enable: false,
-      push: { particles_nb: 4 },
+                distance: 150,
-      remove: { particles_nb: 2 }
+                color: "#ffffff",
-    }
+                opacity: 0.4,
-  },
+                width: 1
-  retina_detect: true
+            },
-});
+            move: {
-var count_particles, stats, update;
+                enable: true,
-stats = new Stats();
+                speed: 0.5,
-stats.setMode(0);
+                direction: "top-right",
-stats.domElement.style.position = "absolute";
+                random: false,
-stats.domElement.style.left = "0px";
+                straight: true,
-stats.domElement.style.top = "0px";
+                out_mode: "out",
-document.body.appendChild(stats.domElement);
+                bounce: false,
-count_particles = document.querySelector(".js-count-particles");
+                attract: {
-update = function() {
+                    enable: false,
-  stats.begin();
+                    rotateX: 600,
-  stats.end();
+                    rotateY: 1200
-  if (window.pJSDom[0].pJS.particles) {
+                }
-    if (window.pJSDom[0].pJS.particles.array) {
+            }
-    count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
+        },
-     }
+        interactivity: {
-  }
+            detect_on: "window",
-  requestAnimationFrame(update);
+            events: {
-};
+                onhover: {
-requestAnimationFrame(update);
+                    enable: true,
+                    mode: "bubble"
+                },
+                onclick: {
+                    enable: true,
+                    mode: "repulse"
+                },
+                resize: true
+            },
+            modes: {
+                grab: {
+                    distance: 400,
+                    line_linked: {
+                        opacity: 0
+                    }
+                },
+                bubble: {
+                    distance: 300,
+                    size: 0,
+                    duration: 2,
+                    opacity: 8,
+                    speed: 3
+                },
+                repulse: {
+                    distance: 200,
+                    duration: 0.4
+                },
+                push: {
+                    particles_nb: 4
+                },
+                remove: {
+                    particles_nb: 2
+                }
+            }
+        },
+        retina_detect: true
+     });
 </script>