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;
+ }
+