Rename image-slider to imageSlider

thinkswell · Oct 16, 2023 · c7ae41e · c7ae41e
1 parent 1b68477
commit c7ae41e
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 0 deletions.
diff --git a/imageSlider/purnasth/index.html b/imageSlider/purnasth/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Infinite Scroll Animation - Purna</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Welcome to Nepal</h1>
+    <!-- <div class="scroller scroller-text" data-direction="right">
+      <ul class="tag-list scroller__inner">
+        <li>JavaScript</li>
+        <li>React</li>
+        <li>TailwindCSS</li>
+        <li>Next.js</li>
+        <li>TypeScript</li>
+      </ul>
+    </div>
+    <div class="scroller scroller-text" data-direction="left">
+      <ul class="tag-list scroller__inner">
+        <li>JavaScript</li>
+        <li>React</li>
+        <li>TailwindCSS</li>
+        <li>Next.js</li>
+        <li>TypeScript</li>
+      </ul>
+    </div> -->
+
+    <!-- for images -->
+    <div class="scroller" data-speed="fast">
+      <ul class="image-list scroller__inner">
+        <img
+          src="https://media.istockphoto.com/id/637696304/photo/patan.jpg?s=612x612&w=0&k=20&c=-53aSTGBGoOOqX5aoC3Hs1jhZ527v3Id_xOawHHVPpg="
+          alt="patan-durbar-square-unesco-world-heritage-site-in-kathmandu-nepal"
+        />
+        <img
+          src="https://lh3.googleusercontent.com/-SyBz68B_zf0/VL_Puyc0udI/AAAAAAAADQM/LGVSl9oJm3s/s750/boudha-1310aPJ.jpg"
+          alt="Swoyambhunath Temple"
+        />
+        <img
+          src="https://www.nationsonline.org/gallery/Nepal/Sunset-at-Pashupatinath-Temple.jpg"
+          alt="Sunset-at-Pashupatinath-Temple"
+        />
+        <img
+          src="https://c4.wallpaperflare.com/wallpaper/181/981/97/nepal-pokhara-phewa-tal-lake-wallpaper-preview.jpg"
+          alt="nepal-pokhara-phewa-tal-lake-wallpaper-preview"
+        />
+        <img
+          src="https://wallpaperaccess.com/full/1134542.jpg"
+          alt="Mountains"
+        />
+      </ul>
+    </div>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/imageSlider/purnasth/main.js b/imageSlider/purnasth/main.js
@@ -0,0 +1,20 @@
+const scrollers = document.querySelectorAll(".scroller");
+
+if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  addAnimation();
+}
+
+function addAnimation() {
+  scrollers.forEach((scroller) => {
+    scroller.setAttribute("data-animated", true);
+
+    const scrollerInner = scroller.querySelector(".scroller__inner");
+    const scrollerContent = Array.from(scrollerInner.children);
+
+    scrollerContent.forEach((item) => {
+      const duplicatedItem = item.cloneNode(true);
+      duplicatedItem.setAttribute("aria-hidden", true);
+      scrollerInner.appendChild(duplicatedItem);
+    });
+  });
+}
diff --git a/imageSlider/purnasth/style.css b/imageSlider/purnasth/style.css
@@ -0,0 +1,111 @@
+:root {
+  --clr-primary-100: #e6f6ff;
+  --clr-primary-200: #b3e0ff;
+  --clr-primary-300: #80cfff;
+  --clr-primary-400: #4db9ff;
+  --clr-primary-500: #1a9fff;
+  --clr-primary-600: #007acc;
+  --clr-primary-700: #005499;
+  --clr-primary-800: #003266;
+  --clr-primary-900: #001833;
+}
+
+body {
+  display: grid;
+  /* min-block-size: 100vh; */
+  place-content: center;
+  font-family: system-ui;
+  font-size: 1.125rem;
+  background-color: var(--clr-primary-900);
+  overflow-x: hidden;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--clr-primary-100);
+  text-align: center;
+}
+
+.tag-list {
+  margin: 0;
+  padding-inline: 0;
+  list-style: none;
+}
+.image-list {
+  padding-inline: 0;
+  /* width: clamp(300px, 100%, 1500px); */
+  max-width: 1500px;
+  width: min(100vw, 1500px);
+}
+
+.tag-list li {
+  padding: 1em;
+  background: var(--clr-primary-200);
+  border-radius: 0.5em;
+  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-700);
+}
+.image-list img {
+  width: 200px;
+  height: auto;
+  object-fit: cover;
+  border-radius: 0.5em;
+  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-700);
+  cursor: pointer;
+}
+.scroller {
+  margin: 0 auto;
+}
+
+.scroller-text {
+  max-width: 600px;
+}
+
+.scroller__inner {
+  padding-block: 1em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+}
+
+.scroller[data-animated="true"] {
+  overflow: hidden;
+  -webkit-mask: linear-gradient(
+    90deg,
+    transparent,
+    var(--clr-primary-100) 20%,
+    var(--clr-primary-100) 80%,
+    transparent
+  );
+  mask: linear-gradient(
+    90deg,
+    transparent,
+    var(--clr-primary-100) 20%,
+    var(--clr-primary-100) 80%,
+    transparent
+  );
+}
+.scroller[data-animated="true"] .scroller__inner {
+  flex-wrap: nowrap;
+  animation: scroll var(--_animation_duration, 40s)
+    var(--_animation-direction, forwards) linear infinite;
+}
+
+.scroller[data-direction="right"] {
+  --_animation-direction: reverse;
+}
+.scroller[data-direction="left"] {
+  --_animation-direction: forwards;
+}
+.scroller[data-speed="slow"] {
+  --_animation-duration: 20s;
+}
+.scroller[data-speed="fast"] {
+  --_animation-duration: 120s;
+}
+
+@keyframes scroll {
+  to {
+    transform: translate(calc(-50% - 0.5rem));
+  }
+}