Merge pull request #1737 from Skb08/suraj

Add Dynamic Background to Gita Storyline Page
akshitagupta15june · Jul 15, 2024 · d9155fc · d9155fc
2 parents 01b9ebf + 92c3e20
commit d9155fc
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/Gita-Storyline/script.js b/Gita-Storyline/script.js
@@ -0,0 +1,73 @@
+particlesJS("particles-js", {
+    particles: {
+      number: { value: 350, density: { enable: true, value_area: 1000 } },
+      color: { value: "#ffffff" },
+      shape: {
+        type: "circle",
+        stroke: { width: 0, color: "#000000" },
+        polygon: { nb_sides: 5 },
+        image: { src: "img/github.svg", width: 100, height: 100 }
+      },
+      opacity: {
+        value: 1,
+        random: true,
+        anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
+      },
+      size: {
+        value: 3,
+        random: true,
+        anim: { enable: false, speed: 8, size_min: 0.3, sync: false }
+      },
+      line_linked: {
+        enable: false,
+        distance: 150,
+        color: "#ffffff",
+        opacity: 0.4,
+        width: 1
+      },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "bottom",
+        random: true,
+        straight: false,
+        out_mode: "out",
+        bounce: false,
+        attract: { enable: false, rotateX: 600, rotateY: 600 }
+      }
+    },
+    interactivity: {
+      detect_on: "window",
+      events: {
+        onhover: { enable: true, mode: "bubble" },
+        onclick: { enable: true, mode: "repulse" },
+        resize: true
+      },
+      modes: {
+        grab: { distance: 400, line_linked: { opacity: 1 } },
+        bubble: { distance: 250, size: 0, duration: 2, opacity: 0, speed: 3 },
+        repulse: { distance: 270, duration: 0.4 },
+        push: { particles_nb: 4 },
+        remove: { particles_nb: 2 }
+      }
+    },
+    retina_detect: true
+  });
+  var count_particles, stats, update;
+  stats = new Stats();
+  stats.setMode(0);
+  stats.domElement.style.position = "absolute";
+  stats.domElement.style.left = "0px";
+  stats.domElement.style.top = "0px";
+  document.body.appendChild(stats.domElement);
+  count_particles = document.querySelector(".js-count-particles");
+  update = function () {
+    stats.begin();
+    stats.end();
+    if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
+      count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
+    }
+    requestAnimationFrame(update);
+  };
+  requestAnimationFrame(update);
+
diff --git a/Gita-Storyline/storyline.html b/Gita-Storyline/storyline.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="storyline.css" />
   <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="style.css">
   <title>Gita Storyline</title>
   <link rel="icon" type="image/x-icon" href="/Images/New_Logo_2.png" />
 </head>
@@ -80,6 +81,7 @@
 </style>
 
 <body>
+  <div id="particles-js"></div> <!-- particlejs used -->
   <header>
     <nav style="z-index: 10000; padding-left: 40px; padding-right: 40px"
       class="nav bg-gray-950 text-white flex justify-between items-center py-2">
@@ -217,6 +219,10 @@
     });
   </script>
   <script src="storyline.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <!-- stats.js lib -->
+    <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
+    <script src="Script.js"></script>
 </body>
 
 </html>
diff --git a/Gita-Storyline/style.css b/Gita-Storyline/style.css
@@ -0,0 +1,54 @@
+body {
+    margin: 0;
+    font: normal 75% Arial, Helvetica, sans-serif;
+  }
+  canvas {
+    display: block;
+    /* vertical-align: bottom; */
+  } 
+  /* ---- particles.js container ---- */
+
+  #particles-js {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+    /* background-image: url('background2.jpg'); */
+    /* opacity: 0.92; */
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+  } 
+
+
+  /* ---- stats.js ---- */
+  .count-particles {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    width: 80px;
+    color: #13e8e9;
+    font-size: 2em;
+    text-align: left;
+    text-indent: 4px;
+    line-height: 14px;
+    padding-bottom: 2px;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bold;
+  }
+  .js-count-particles {
+    font-size: 1.1em;
+  }
+  #stats,
+  .count-particles {
+    /* -webkit-user-select: none; */
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+  #stats {
+    border-radius: 3px 3px 0 0;
+    overflow: hidden;
+  }
+  .count-particles {
+    border-radius: 0 0 3px 3px;
+  }
+