From 1b684771c4aedd4cbff6c56564184052c257465f Mon Sep 17 00:00:00 2001 From: Purna Shrestha Date: Sun, 15 Oct 2023 23:16:20 +0545 Subject: [PATCH 1/4] [feat]: Add an infinite image slider issue #954 --- image-slider/purnasth/index.html | 58 ++++++++++++++++ image-slider/purnasth/main.js | 20 ++++++ image-slider/purnasth/style.css | 111 +++++++++++++++++++++++++++++++ 3 files changed, 189 insertions(+) create mode 100644 image-slider/purnasth/index.html create mode 100644 image-slider/purnasth/main.js create mode 100644 image-slider/purnasth/style.css diff --git a/image-slider/purnasth/index.html b/image-slider/purnasth/index.html new file mode 100644 index 000000000..423806eb9 --- /dev/null +++ b/image-slider/purnasth/index.html @@ -0,0 +1,58 @@ + + + + + + Infinite Scroll Animation - Purna + + + +

Welcome to Nepal

+ + + +
+ +
+ + + + diff --git a/image-slider/purnasth/main.js b/image-slider/purnasth/main.js new file mode 100644 index 000000000..3f0fab3ec --- /dev/null +++ b/image-slider/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/image-slider/purnasth/style.css b/image-slider/purnasth/style.css new file mode 100644 index 000000000..04a5b93ce --- /dev/null +++ b/image-slider/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)); + } +} From c7ae41eaf56eda2da3a338969dc260e635d495b5 Mon Sep 17 00:00:00 2001 From: Purna Shrestha Date: Mon, 16 Oct 2023 09:15:37 +0545 Subject: [PATCH 2/4] Rename image-slider to imageSlider --- imageSlider/purnasth/index.html | 58 +++++++++++++++++ imageSlider/purnasth/main.js | 20 ++++++ imageSlider/purnasth/style.css | 111 ++++++++++++++++++++++++++++++++ 3 files changed, 189 insertions(+) create mode 100644 imageSlider/purnasth/index.html create mode 100644 imageSlider/purnasth/main.js create mode 100644 imageSlider/purnasth/style.css diff --git a/imageSlider/purnasth/index.html b/imageSlider/purnasth/index.html new file mode 100644 index 000000000..423806eb9 --- /dev/null +++ b/imageSlider/purnasth/index.html @@ -0,0 +1,58 @@ + + + + + + Infinite Scroll Animation - Purna + + + +

Welcome to Nepal

+ + + +
+
    + patan-durbar-square-unesco-world-heritage-site-in-kathmandu-nepal + Swoyambhunath Temple + Sunset-at-Pashupatinath-Temple + nepal-pokhara-phewa-tal-lake-wallpaper-preview + Mountains +
+
+ + + + diff --git a/imageSlider/purnasth/main.js b/imageSlider/purnasth/main.js new file mode 100644 index 000000000..3f0fab3ec --- /dev/null +++ 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 new file mode 100644 index 000000000..04a5b93ce --- /dev/null +++ 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)); + } +} From 4d898002ae8b17162840903002d6203d6edd019f Mon Sep 17 00:00:00 2001 From: Purna Shrestha Date: Mon, 16 Oct 2023 09:45:50 +0545 Subject: [PATCH 3/4] Delete image-slider directory --- image-slider/purnasth/index.html | 58 ---------------- image-slider/purnasth/main.js | 20 ------ image-slider/purnasth/style.css | 111 ------------------------------- 3 files changed, 189 deletions(-) delete mode 100644 image-slider/purnasth/index.html delete mode 100644 image-slider/purnasth/main.js delete mode 100644 image-slider/purnasth/style.css diff --git a/image-slider/purnasth/index.html b/image-slider/purnasth/index.html deleted file mode 100644 index 423806eb9..000000000 --- a/image-slider/purnasth/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - Infinite Scroll Animation - Purna - - - -

Welcome to Nepal

- - - -
-
    - patan-durbar-square-unesco-world-heritage-site-in-kathmandu-nepal - Swoyambhunath Temple - Sunset-at-Pashupatinath-Temple - nepal-pokhara-phewa-tal-lake-wallpaper-preview - Mountains -
-
- - - - diff --git a/image-slider/purnasth/main.js b/image-slider/purnasth/main.js deleted file mode 100644 index 3f0fab3ec..000000000 --- a/image-slider/purnasth/main.js +++ /dev/null @@ -1,20 +0,0 @@ -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/image-slider/purnasth/style.css b/image-slider/purnasth/style.css deleted file mode 100644 index 04a5b93ce..000000000 --- a/image-slider/purnasth/style.css +++ /dev/null @@ -1,111 +0,0 @@ -: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)); - } -} From 5ab4cbd5bd0fef2ae57a32e5ba19617ed686848b Mon Sep 17 00:00:00 2001 From: Purna Shrestha Date: Mon, 16 Oct 2023 23:18:49 +0545 Subject: [PATCH 4/4] Rename imageSlider to ImageSlider --- imageSlider/purnasth/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/imageSlider/purnasth/index.html b/imageSlider/purnasth/index.html index 423806eb9..4240137fc 100644 --- a/imageSlider/purnasth/index.html +++ b/imageSlider/purnasth/index.html @@ -3,7 +3,7 @@ - Infinite Scroll Animation - Purna + Infinite Scroll Animation - Purna Shrestha