sveltescrolltypewriter
v1.0.4
Published
This package allows you to create a typewriter than starts when observed hasslefree!
Downloads
22
Readme
Svelte Scroll Typewriter
This package allows you to create a typewriter than starts when observed hasslefree!
How to use:
Prerequisites:
- Simply download the package with
npm i sveltescrolltypewriter
- Import it into the file which is required with
import SvelteScrollTypewriter from SvelteScrollTypewriter
The use:
A requirements are two variables in the script tag being:
let furthestScrolled = 0;
let scroll = 0;
$: if (scroll > furthestScrolled) {
furthestScrolled = scroll;
}
The following tag somewhere in the file:
<svelte:window bind:scrollY={scroll} />
and for each typewriter, specific variables for binding, such as:
let typewriter1;
let height1;
In your onMount function, place the following:
onMount(() => {
height1 = typewriter1.getBoundingClientRect().top - 300;
// do this for every height, eg height2, height3 etc.
});
Then, place the following wherever desired. HEIGHT is a placeholder for the height variable, and PHRASE is a placeholder for your custom phrase:
<div bind:this={typewriter1}>
<Typewriter
height={height1}
{furthestScrolled}
phrase="PHRASE"
/>
</div>
Options:
auto: boolean
- This optional property specifies whether the typewriter should start automatically or not
height: integer
- This optional property specifies the distance from the top of the DOM and the typewriter in pixels
furthestScrolled: integer
- This optional property specifies the furthest distance that has been scrolled to in pixels
phrase: string
- This mandatory property specifies the phrase that will be dispayed in the typewriter
fontSize: integer
- This optional property specifies the font size for the text
I apologise for the bloat, but the package works.
There is no stylign attatched to the typewriter, just plain text
Thank you for using my package :)