svelte-aid v0.0.11
Download
npm i svelte-aid
Import
import { Image, Copy } from 'svelte-aid'
Image
Alternative to default img, loads images from opacity 0 and hides if broken
Required arguments:
src
Optional arguments:
srcMobile
for a mobile version of the img (default as src)
alt
like html alt
classes
like css class
loading
like html loading (default is lazy
, can change to eager
)
Examples
<Image src={"https://picsum.photos/1000"} alt={"random image"} classes={"object-cover rounded-md w-96"}>
CopyText
A button to copy text on click
Required arguments:
text
is the text to copy on click
Optional arguments:
useText
boolean to use animation of text (default false, will animate a check icon)
onCopyText
if useText true - the text itself
colorActive
the color on hover and animate (default blue)
color
(default black)
Examples
<CopyText text={"this text will be copied"} useText={true} onCopyText={"Nice!"} color={"red"} colorActive={"green"} />
Ticker
A horizontally running ticker
Required arguments:
items
an array of strings to animate
Optional arguments:
duration
in seconds (default 10s
)
durationMobile
in seconds (default 20s
)
classWrapper
css classes for the wrapper (default absolute
, useful for position fixed and background color and padding)
classParent
css classes for the parent of items (default space-x-6
)
classChild
css classes for individual item (default inline-block
)
Examples
<Ticker
classChild={"text-xl text-white uppercase inline-block"}
classParent={"space-x-10"}
classWrapper={"fixed bottom-0 p-5 bg-black"}
duration={"15s"}
/>
Scroller
Link scroller with animated active images
Required gsap:
<svelte:head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollToPlugin.min.js"></script>
</svelte:head>
Optional arguments:
export let items = [
{
text: "1",
img: "https://picsum.photos/1000/201",
link: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
},
{
text: "2",
img: "https://picsum.photos/1000/202",
link: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
},
{
text: "3",
img: "https://picsum.photos/1000/203",
link: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
},
];
export let parentClass: string = "py-7 md:py-10";
export let textClass: string = "";
export let wrapperClass: string = "";