add brand slider marquee

khafidprayoga · Oct 3, 2024 · 6523d53 · 6523d53
1 parent aa69f8e
commit 6523d53
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 10 deletions.
diff --git a/dressly/bun.lockb b/dressly/bun.lockb
diff --git a/dressly/package.json b/dressly/package.json
@@ -20,6 +20,7 @@
     "@rsbuild/core": "^1.0.1",
     "@rsbuild/plugin-image-compress": "^1.0.2",
     "@rsbuild/plugin-svelte": "^1.0.1",
+    "@selemondev/svelte-marquee": "^0.0.2",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.10.0",
@@ -31,6 +32,7 @@
     "prettier": "^3.3.3",
     "svelte-check": "^4.0.1",
     "tailwindcss": "^3.4.13",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.2",
     "typescript-eslint": "^8.5.0"
   },

diff --git a/dressly/src/components/BrandSlider/BrandSlider.svelte b/dressly/src/components/BrandSlider/BrandSlider.svelte
@@ -7,6 +7,7 @@
     balenciaga,
     louisVuitton,
   } from '@brand/index';
+  import { Marquee } from '@selemondev/svelte-marquee';
 
   const brands = [
     {
@@ -34,15 +35,40 @@
       image: louisVuitton,
     },
   ];
+
+  let animateSponsor = false;
+  // Update the state based on window size
+  const updateSponsorAnimation = () => {
+    if (window.innerWidth < 640) { // 640px is the 'sm' breakpoint in Tailwind
+      animateSponsor = false;
+    } else {
+      animateSponsor = true;
+    }
+  };
+
 </script>
 
-<div id="brand-slider">
-  {#each brands as { name, image }}
-    <div class="brand-wrapper">
-      <img src={image} alt={`Brand ${name}`} class="drop-shadow-2xl" />
-    </div>
-  {/each}
-</div>
+<Marquee
+  class="gap-[3rem] [--duration:10s] [--gap:3rem] md:w-[800px] mx-auto overflow-x-hidden"
+  direction="left"
+  fade={true}
+  reverse={false}
+  pauseOnHover={true}
+  innerClassName="gap-[3rem]"
+>
+  <div id="brand-slider">
+    {#each brands as { name, image }}
+      <div class="brand-wrapper">
+        <img
+          src={image}
+          alt={`Brand ${name}`}
+          class="drop-shadow-2xl select-none"
+        />
+      </div>
+    {/each}
+  </div>
+</Marquee>
+
 
 <style lang="postcss">
   * {

diff --git a/dressly/tailwind.config.cjs b/dressly/tailwind.config.cjs
@@ -1,6 +1,11 @@
+import animate from "tailwindcss-animate";
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{html,ts,svelte}'],
+  content: [
+    './src/**/*.{html,ts,svelte}',
+		'./node_modules/@selemondev/svelte-marquee/dist/*.svelte'
+  ],
   theme: {
     extend: {
       colors: {
@@ -16,7 +21,21 @@ module.exports = {
         Lora: ['Lora', 'serif'],
         OpenSans: ['Open Sans', 'sans-serif'],
       },
+      keyframes: {
+				'marquee-left': {
+					from: { transform: 'translateX(0)' },
+					to: { transform: 'translateX(calc(-100% - var(--gap)))' }
+				},
+				'marquee-up': {
+					from: { transform: 'translateY(0)' },
+					to: { transform: 'translateY(calc(-100% - var(--gap)))' }
+				}
+			},
+			animation: {
+				'marquee-left': 'marquee-left var(--duration, 40s) linear infinite',
+				'marquee-up': 'marquee-up var(--duration, 40s) linear infinite'
+			},
     },
   },
-  plugins: [],
-};
+  plugins: [animate],
+};