added a new project scroll-Animation

pulkit-30 · Sep 12, 2021 · 68d6165 · 68d6165
1 parent 597d721
commit 68d6165
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 1 deletion.
diff --git a/Rotating Navigation/index.html b/Rotating Navigation/index.html
@@ -24,7 +24,7 @@ <h1>Click on hamburger Menu</h1>
 
     <footer>
       <div>Credit: <a href="https://github.com/pulkit-30">PULKIT GUPTA</a></div>
-      <div>Date: 1 /08/ 2020</div>
+      <div>Date: 1 /08/ 2021</div>
     </footer>
   </body>
   <script src="./Script.js"></script>

diff --git a/ScrollProgress/index.html b/ScrollProgress/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scroll progress</title>
+  </head>
+  <body>
+    <div class="scroll_box"></div>
+    <h1>Scroll to see the Progress</h1>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aut at,
+      consequuntur ea eveniet suscipit reiciendis omnis nostrum blanditiis
+      temporibus sed a molestiae voluptatem cum, quidem neque. Deserunt vitae
+      molestias et maiores blanditiis cupiditate fugit dolor fuga totam quis
+      non, nihil architecto modi pariatur dignissimos ad distinctio, aspernatur
+      ut accusantium quod sint hic qui molestiae. Quo sunt obcaecati laboriosam
+      iusto est corrupti esse ipsa ipsum quidem, rem incidunt ducimus veritatis?
+      Doloribus perferendis assumenda nesciunt magnam accusantium totam in ab ut
+      reiciendis, laudantium non quia iure, aspernatur autem. Quia nulla iusto
+      placeat autem quae accusamus laudantium accusantium, aspernatur fugiat sit
+      ullam hic atque totam quos ipsum optio sequi dignissimos id. Laborum
+      fugiat molestias incidunt debitis delectus commodi beatae exercitationem
+      nulla, totam aut, maiores expedita mollitia dignissimos sit, maxime omnis.
+      Quasi molestias dolorem, id quod voluptatum illo facere molestiae enim,
+      aliquid voluptatibus deleniti quam temporibus laborum laboriosam officia,
+      reiciendis quisquam omnis veniam incidunt. Labore, distinctio architecto
+      repellendus officiis velit, iusto natus non incidunt, accusamus quasi
+      doloribus laboriosam dolor cupiditate. Numquam aut dolore nulla at
+      eligendi quia, repudiandae quae eaque ut nobis earum ad eius voluptates
+      laboriosam porro? Odio magnam voluptate quia temporibus cumque iste hic
+      expedita quam ad laboriosam quis consequuntur excepturi officia
+      perspiciatis facilis eaque suscipit odit dolorum exercitationem aperiam
+      ex, dicta praesentium blanditiis tempora? Aspernatur facilis facere totam
+      odit reiciendis deserunt mollitia recusandae incidunt, voluptatum porro
+      est unde ullam, inventore earum. Quo magnam laborum, id, at quasi
+      laboriosam asperiores, delectus unde doloribus quod maxime veniam tempore
+      adipisci error expedita? Ullam voluptatibus illo, facilis est reiciendis
+      ducimus aut, nihil quia neque sapiente eveniet eos ut sunt in culpa eum
+      adipisci odio cupiditate! Nulla deleniti unde dignissimos sed? Ipsa
+      voluptatibus deleniti quos hic id nisi veniam quod maxime, ipsum ipsam
+      rerum cumque nostrum quae reprehenderit sequi architecto? Nesciunt eius
+      sint reprehenderit repudiandae. Reprehenderit repellat ipsum asperiores
+      illum ut eveniet architecto ducimus omnis placeat fuga. Fugit laboriosam
+      officia qui eaque similique minus aliquam magnam, maiores iure odit
+      ducimus. Cupiditate nulla voluptatibus beatae omnis, odit obcaecati sint
+      repellendus velit non totam? Sequi corrupti eaque, iste culpa delectus
+      placeat nulla. Eius quas optio deleniti autem molestiae inventore sint.
+      Veritatis ab enim nisi saepe? Optio fugit quibusdam sequi nobis accusamus
+      est illo tenetur unde autem tempora inventore quasi natus vero,
+      necessitatibus, suscipit sed in voluptatem dolorum ullam? Vero ducimus
+      sunt laborum neque adipisci corrupti ullam quia a inventore dolores
+      consequuntur mollitia iste similique maxime, accusamus placeat amet
+      dolorem sed eum nesciunt nulla molestiae ipsam quas alias. Dicta corporis
+      deleniti tenetur voluptatem, sit ut beatae impedit eveniet minima quo
+      exercitationem esse eum cumque unde porro qui illo officia quaerat!
+      Inventore libero ipsa consequatur repellendus laborum dignissimos, illum,
+      illo error quae quaerat minus qui nulla voluptatum saepe, laudantium
+      quidem culpa maxime labore ratione? A fugit quaerat perspiciatis amet
+      quisquam laborum veniam alias eveniet at molestiae, eaque eos similique
+      eum, optio rerum provident neque. Eveniet, quod. Repellendus facere veniam
+      sit quod inventore similique doloremque, culpa incidunt iure quidem!
+      Ratione dicta dolorum quia quam porro nobis totam, expedita inventore
+      facilis.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo reprehenderit
+      recusandae magnam facere cupiditate natus dicta esse inventore ullam
+      repudiandae ipsam fugiat quibusdam tempora illo et voluptas nostrum, vero
+      rem iste consectetur in! Error, quia exercitationem dolores mollitia
+      eligendi temporibus, cumque, quod ullam iure minus possimus laboriosam
+      obcaecati at ipsam deleniti esse! Inventore dignissimos rem voluptates
+      facilis deserunt dolorum ratione officia tempora officiis sunt? Natus eos
+      et explicabo, laudantium ab possimus fugit iusto non rerum magnam ipsa
+      corporis soluta expedita repellat laborum, est voluptas sed repudiandae
+      aspernatur sequi voluptatibus saepe iste? Possimus placeat pariatur
+      doloremque vitae deserunt nam maiores quaerat, illum quo quia debitis,
+      minus quae dignissimos mollitia ea aliquam qui. Quaerat, consequatur
+      nesciunt quod delectus, cupiditate dicta soluta quisquam vitae reiciendis
+      minima, repellendus ipsa commodi ad deleniti laborum corporis iste! Porro
+      maxime earum nihil, atque ratione quidem temporibus vero! Fugit temporibus
+      iure officia laudantium! Minus accusantium doloribus porro, voluptatem
+      fugiat nisi! Vero ex non temporibus sequi. Blanditiis ad officiis ratione
+      eveniet, iure in, ipsum quo voluptatem aspernatur similique voluptatibus
+      dolor veritatis, dicta voluptas cum id quidem labore aliquid! Aspernatur,
+      debitis nam, omnis nihil, provident in suscipit impedit atque modi
+      laudantium voluptate nostrum inventore? Placeat consequatur aspernatur
+      sunt voluptatem est inventore accusamus ducimus excepturi eius ab aliquid
+      quae eligendi consectetur cupiditate totam, enim, illo deleniti deserunt.
+      Esse sapiente, facilis minus alias corrupti vel repellendus eligendi saepe
+      excepturi exercitationem iure assumenda praesentium reiciendis voluptatum
+      suscipit soluta et quis dolor ipsum voluptas culpa quidem placeat?
+      Voluptas quam aperiam ex maxime accusantium aspernatur, quae illum beatae
+      eius doloremque ullam, doloribus veritatis earum placeat error harum
+      laborum quas voluptates culpa alias illo, facilis dolor est? Ratione eius
+      harum dolorum doloribus dignissimos. Recusandae inventore laudantium,
+      doloremque maxime reprehenderit nulla aliquid quis blanditiis quam vel
+      adipisci ipsam commodi molestias ipsum aspernatur ullam eveniet odit
+      labore quaerat ducimus facere libero maiores id? Harum, quos debitis.
+      Voluptas cupiditate temporibus libero ex, ullam recusandae, natus,
+      voluptates deleniti cum alias quisquam qui pariatur sint iusto illum
+      voluptate quam tempora! Accusamus, fuga perferendis? Perspiciatis quia
+      quas architecto et voluptatum, odit numquam maxime ducimus asperiores
+      delectus alias error quasi nemo fugiat laboriosam obcaecati at rerum eum
+      mollitia natus dolorum nam atque a. Dolores sit amet obcaecati nulla
+      aperiam vero, voluptatibus alias sunt iste est, quia voluptates eius nobis
+      facilis id corporis. Harum, laborum sunt. Eligendi, cum. Dolorem
+      consectetur sequi harum modi nobis sed error doloribus architecto, placeat
+      voluptatem similique itaque voluptate reprehenderit officia minus eligendi
+      iusto dolores. Consequatur alias sequi quae amet ea facere veritatis fugit
+      minima consequuntur porro, aperiam beatae ut ab adipisci, suscipit natus
+      ipsum nam dignissimos quisquam nobis perferendis sint ad? Perspiciatis
+      reprehenderit officiis fuga numquam accusantium cumque voluptatem,
+      repudiandae magnam recusandae provident velit quaerat culpa, facere
+      molestiae voluptates! Modi autem unde incidunt sequi reprehenderit.
+    </p>
+
+    <footer>
+      <div>Credit: <a href="https://github.com/pulkit-30">PULKIT GUPTA</a></div>
+      <div>Date: 12/09/ 2021</div>
+    </footer>
+  </body>
+  <script src="./script.js"></script>
+</html>
diff --git a/ScrollProgress/pro.png b/ScrollProgress/pro.png
diff --git a/ScrollProgress/readme.md b/ScrollProgress/readme.md
@@ -0,0 +1,5 @@
+# Scroll Progress
+
+---
+
+<img src="./pro.png">
diff --git a/ScrollProgress/script.js b/ScrollProgress/script.js
@@ -0,0 +1,9 @@
+window.addEventListener("scroll", () => {
+  const screen = window.screen.availHeight;
+  const total_height = document.body.scrollHeight - screen;
+  console.log(total_height);
+  console.log(screen);
+  document.querySelector(".scroll_box").style.width = `${
+    (window.scrollY / total_height) * 100
+  }%`;
+});
diff --git a/ScrollProgress/style.css b/ScrollProgress/style.css
@@ -0,0 +1,33 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  background-color: #112031;
+  font-family: sans-serif;
+  text-align: center;
+  color: white;
+}
+h1 {
+  color: white;
+  margin: 30px auto;
+}
+p {
+  width: 80vw;
+
+  margin: 50px auto;
+  line-height: 2;
+  font-size: 25px;
+}
+.scroll_box {
+  position: sticky;
+  width: 10%;
+  top: 0;
+  height: 10px;
+  background-color: #ffffff;
+  border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -o-border-radius: 2px;
+}