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

@@ Line 5: / Line 5: @@
 <style>
-canvas {
+    canvas {
-  display: block;
+        display: block;
-  vertical-align: bottom;
+        vertical-align: bottom;
-}
+    }
-/* ---- particles.js container ---- */
+    /* ---- particles.js container ---- */
-#particles-js {
-  position: absolute;
+    #particles-js {
-  height: 40%;
+        position: absolute;
-  background-color: #181630;
+        height: 400px;
-  background-image: url("https://static.igem.org/mediawiki/2018/5/5f/T--UCopenhagen--v1-iGEM-Copenhagen-square-white.png");
+        z-index: -1;
-  background-repeat: no-repeat;
+        background-color: #181630;
-  background-size: 50%;
+        background-image: url("https://static.igem.org/mediawiki/2018/5/5f/T--UCopenhagen--v1-iGEM-Copenhagen-square-white.png");
-  background-position: 50% 50%;
+        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>
 <!-- particles.js container -->
-<div class="igem_2018_team_content pageContent">
+<div class="igem_2018_team_content pageContent" id="particles-js">
-<div id="particles-js">
-</div>
 </div>
@@ Line 34: / 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: {
+                enable: true,
+                speed: 0.5,
+                direction: "top-right",
+                random: false,
+                straight: true,
+                out_mode: "out",
+                bounce: false,
+                attract: {
+                    enable: false,
+                    rotateX: 600,
+                    rotateY: 1200
+                }
+            }
+        },
+        interactivity: {
+            detect_on: "window",
+            events: {
+                onhover: {
+                    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>