diff --git a/Rotating Navigation/index.html b/Rotating Navigation/index.html index cbffe72..789ebf1 100644 --- a/Rotating Navigation/index.html +++ b/Rotating Navigation/index.html @@ -24,7 +24,7 @@

Click on hamburger Menu

diff --git a/ScrollProgress/index.html b/ScrollProgress/index.html new file mode 100644 index 0000000..c335368 --- /dev/null +++ b/ScrollProgress/index.html @@ -0,0 +1,126 @@ + + + + + + + + Scroll progress + + +
+

Scroll to see the Progress

+

+ 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. +

+

+ 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. +

+ + + + + diff --git a/ScrollProgress/pro.png b/ScrollProgress/pro.png new file mode 100644 index 0000000..ea3bbb7 Binary files /dev/null and b/ScrollProgress/pro.png differ diff --git a/ScrollProgress/readme.md b/ScrollProgress/readme.md new file mode 100644 index 0000000..b649b86 --- /dev/null +++ b/ScrollProgress/readme.md @@ -0,0 +1,5 @@ +# Scroll Progress + +--- + + diff --git a/ScrollProgress/script.js b/ScrollProgress/script.js new file mode 100644 index 0000000..97f911a --- /dev/null +++ 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 new file mode 100644 index 0000000..2dada6d --- /dev/null +++ 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; +}