From 92c3e204a361de824c0f14ad20953030fa704c6f Mon Sep 17 00:00:00 2001 From: suraj Date: Mon, 17 Jun 2024 00:58:46 +0530 Subject: [PATCH] dynamic background added in Gita-Storyline page --- Gita-Storyline/script.js | 73 +++++++++++++++++++++++++++++++++++ Gita-Storyline/storyline.html | 6 +++ Gita-Storyline/style.css | 54 ++++++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 Gita-Storyline/script.js create mode 100644 Gita-Storyline/style.css diff --git a/Gita-Storyline/script.js b/Gita-Storyline/script.js new file mode 100644 index 00000000..7e325fa2 --- /dev/null +++ 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); + \ No newline at end of file diff --git a/Gita-Storyline/storyline.html b/Gita-Storyline/storyline.html index f4bf1356..d30dba88 100644 --- a/Gita-Storyline/storyline.html +++ b/Gita-Storyline/storyline.html @@ -6,6 +6,7 @@ + Gita Storyline @@ -80,6 +81,7 @@ +