Merge pull request #4 from selemondev/fix/mask-image

fix: mask-image property
selemondev · Feb 13, 2024 · ff5d873 · ff5d873
2 parents df3d59f + 650ab25
commit ff5d873
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 56 deletions.
diff --git a/src/lib/Marquee.svelte b/src/lib/Marquee.svelte
@@ -7,11 +7,10 @@
 	export let fade: boolean = true;
 	export let innerClassName: string = '';
 	export let numberOfCopies: number = 2;
-
 </script>
 
 <div
-{...$$restProps}
+	{...$$restProps}
 	class={cn('group flex gap-[1rem] overflow-hidden', {
 		'flex-row': direction === 'left',
 		'flex-col': direction !== 'left',
@@ -23,14 +22,14 @@
 				}, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`
 			: 'none'
 	};
-        webkit-mask-image: ${
-					fade
-						? `linear-gradient(${
-								direction === 'left' ? 'to right' : 'to bottom'
-							}, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`
-						: 'none'
-				};
-      `}
+	  -webkit-mask-image: ${
+			fade
+				? `linear-gradient(${
+						direction === 'left' ? 'to right' : 'to bottom'
+					}, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`
+				: 'none'
+		};
+	  `}
 >
 	{#each Array(numberOfCopies).fill(0) as _, i (i)}
 		<div
@@ -48,43 +47,3 @@
 		</div>
 	{/each}
 </div>
-
-<!-- <div
-	bind:this={marqueeElement}
-	class={cn('group flex gap-[1rem] overflow-hidden', {
-		'flex-row': direction === 'left',
-		'flex-col': direction !== 'left',
-	})}
-	style={`
-        maskImage: ${
-					fade
-						? `linear-gradient(${
-								direction === 'left' ? 'to right' : 'to bottom'
-							}, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`
-						: 'none'
-				};
-        WebkitMaskImage: ${
-					fade
-						? `linear-gradient(${
-								direction === 'left' ? 'to right' : 'to bottom'
-							}, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`
-						: 'none'
-				};
-      `}
->
-	{#each Array(numberOfCopies).fill(0) as _, i (i)}
-		<div
-			class={cn(
-				'flex justify-around gap-[1rem] [--gap:1rem] shrink-0',
-				direction === 'left'
-					? 'animate-marquee-left flex-row'
-					: 'animate-marquee-up flex-col',
-				pauseOnHover && 'group-hover:[animation-play-state:paused]',
-				reverse && 'direction-reverse',
-				innerClassName
-			)}
-		>
-			<slot />
-		</div>
-	{/each}
-</div> -->
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import Card from '../components/Card.svelte';
 	import { Marquee } from '$lib/index.js';
-	import GithubIcon from "../components/icons/GithubIcon.svelte"
+	import GithubIcon from '../components/icons/GithubIcon.svelte';
 	import { CodeBlock } from 'svhighlight';
 	import 'highlight.js/styles/base16/dracula.css';
-	
+
 	interface TestimonialProps {
 		name: string;
 		title: string;
@@ -51,7 +51,7 @@
 	let installCmd = `npm install @selemondev/svelte-marquee`;
 
 	const localImportSnippet = `import { Marquee } from "@selemondev/svelte-marquee";
-import "@selemondev/svelte-marquee/dist/style.css"`;
+import "@selemondev/svelte-marquee/dist/style.css";`;
 
 	const fadeCodeSnippet = `<Marquee fade={true}>
   <div>Content 1</div>
@@ -88,8 +88,11 @@ import "@selemondev/svelte-marquee/dist/style.css"`;
 </script>
 
 <svelte:head>
-  <title>Svelte Marquee Component</title>
-  <meta name="description" content="A Beautiful Marquee component for Svelte ✨" />
+	<title>Svelte Marquee Component</title>
+	<meta
+		name="description"
+		content="A Beautiful Marquee component for Svelte ✨"
+	/>
 </svelte:head>
 
 <div class="w-screen min-h-screen bg-stone-100/90">
@@ -343,4 +346,4 @@ import "@selemondev/svelte-marquee/dist/style.css"`;
 			/>
 		</div>
 	</div>
-</div>
+</div>