masoneffect 2.0.11 → 2.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +128 -2
- package/dist/core/index.d.ts +2 -0
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/textSpin/index.d.ts +47 -0
- package/dist/core/textSpin/index.d.ts.map +1 -0
- package/dist/core/typing/index.d.ts.map +1 -1
- package/dist/count/core/index.d.ts +2 -0
- package/dist/count/core/index.d.ts.map +1 -1
- package/dist/count/core/textSpin/index.d.ts +47 -0
- package/dist/count/core/textSpin/index.d.ts.map +1 -0
- package/dist/count/core/typing/index.d.ts.map +1 -1
- package/dist/count/index.d.ts +2 -0
- package/dist/count/index.d.ts.map +1 -1
- package/dist/count/react/index.d.ts +2 -0
- package/dist/count/react/index.d.ts.map +1 -1
- package/dist/count/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/count/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/count/react/textSpin/index.d.ts +5 -0
- package/dist/count/react/textSpin/index.d.ts.map +1 -0
- package/dist/count/svelte/index.d.ts +1 -0
- package/dist/count/svelte/index.d.ts.map +1 -1
- package/dist/count/svelte/textSpin/index.d.ts +4 -0
- package/dist/count/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/count/vue/index.d.ts +1 -0
- package/dist/count/vue/index.d.ts.map +1 -1
- package/dist/count/vue/textSpin/index.d.ts +4 -0
- package/dist/count/vue/textSpin/index.d.ts.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/react/core/index.d.ts +2 -0
- package/dist/react/core/textSpin/index.d.ts +46 -0
- package/dist/react/count/core/index.d.ts +2 -0
- package/dist/react/count/core/index.d.ts.map +1 -1
- package/dist/react/count/core/textSpin/index.d.ts +47 -0
- package/dist/react/count/core/textSpin/index.d.ts.map +1 -0
- package/dist/react/count/core/typing/index.d.ts.map +1 -1
- package/dist/react/count/index.d.ts +2 -0
- package/dist/react/count/index.d.ts.map +1 -1
- package/dist/react/count/react/index.d.ts +2 -0
- package/dist/react/count/react/index.d.ts.map +1 -1
- package/dist/react/count/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/react/count/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/react/count/react/textSpin/index.d.ts +5 -0
- package/dist/react/count/react/textSpin/index.d.ts.map +1 -0
- package/dist/react/count/svelte/index.d.ts +1 -0
- package/dist/react/count/svelte/index.d.ts.map +1 -1
- package/dist/react/count/svelte/textSpin/index.d.ts +4 -0
- package/dist/react/count/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/react/count/vue/index.d.ts +1 -0
- package/dist/react/count/vue/index.d.ts.map +1 -1
- package/dist/react/count/vue/textSpin/index.d.ts +4 -0
- package/dist/react/count/vue/textSpin/index.d.ts.map +1 -0
- package/dist/react/index.cjs +2 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.mjs +1 -0
- package/dist/react/react/index.d.ts +2 -0
- package/dist/react/react/textSpin/TextSpin.d.ts +18 -0
- package/dist/react/react/textSpin/index.d.ts +4 -0
- package/dist/react/scrollFadeIn/core/index.d.ts +2 -0
- package/dist/react/scrollFadeIn/core/index.d.ts.map +1 -1
- package/dist/react/scrollFadeIn/core/textSpin/index.d.ts +47 -0
- package/dist/react/scrollFadeIn/core/textSpin/index.d.ts.map +1 -0
- package/dist/react/scrollFadeIn/core/typing/index.d.ts.map +1 -1
- package/dist/react/scrollFadeIn/index.d.ts +2 -0
- package/dist/react/scrollFadeIn/index.d.ts.map +1 -1
- package/dist/react/scrollFadeIn/react/index.d.ts +2 -0
- package/dist/react/scrollFadeIn/react/index.d.ts.map +1 -1
- package/dist/react/scrollFadeIn/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/react/scrollFadeIn/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/react/scrollFadeIn/react/textSpin/index.d.ts +5 -0
- package/dist/react/scrollFadeIn/react/textSpin/index.d.ts.map +1 -0
- package/dist/react/scrollFadeIn/svelte/index.d.ts +1 -0
- package/dist/react/scrollFadeIn/svelte/index.d.ts.map +1 -1
- package/dist/react/scrollFadeIn/svelte/textSpin/index.d.ts +4 -0
- package/dist/react/scrollFadeIn/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/react/scrollFadeIn/vue/index.d.ts +1 -0
- package/dist/react/scrollFadeIn/vue/index.d.ts.map +1 -1
- package/dist/react/scrollFadeIn/vue/textSpin/index.d.ts +4 -0
- package/dist/react/scrollFadeIn/vue/textSpin/index.d.ts.map +1 -0
- package/dist/react/svelte/index.d.ts +1 -0
- package/dist/react/svelte/textSpin/index.d.ts +3 -0
- package/dist/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/react/textSpin/core/count/index.d.ts +53 -0
- package/dist/react/textSpin/core/count/index.d.ts.map +1 -0
- package/dist/react/textSpin/core/index.d.ts +24 -0
- package/dist/react/textSpin/core/index.d.ts.map +1 -0
- package/dist/react/textSpin/core/scrollFadeIn/index.d.ts +50 -0
- package/dist/react/textSpin/core/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/react/textSpin/core/textSpin/index.d.ts +47 -0
- package/dist/react/textSpin/core/textSpin/index.d.ts.map +1 -0
- package/dist/react/textSpin/core/textToParticle/index.d.ts +103 -0
- package/dist/react/textSpin/core/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textSpin/core/typing/index.d.ts +56 -0
- package/dist/react/textSpin/core/typing/index.d.ts.map +1 -0
- package/dist/react/textSpin/core/utils/visibilityManager.d.ts +36 -0
- package/dist/react/textSpin/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/react/textSpin/index.cjs +1 -0
- package/dist/react/textSpin/index.d.ts +22 -0
- package/dist/react/textSpin/index.d.ts.map +1 -0
- package/dist/react/textSpin/index.mjs +1 -0
- package/dist/react/textSpin/index.umd.d.ts +7 -0
- package/dist/react/textSpin/index.umd.d.ts.map +1 -0
- package/dist/react/textSpin/react/MasonEffect.d.ts +32 -0
- package/dist/react/textSpin/react/MasonEffect.d.ts.map +1 -0
- package/dist/react/textSpin/react/count/Count.d.ts +19 -0
- package/dist/react/textSpin/react/count/Count.d.ts.map +1 -0
- package/dist/react/textSpin/react/count/index.d.ts +5 -0
- package/dist/react/textSpin/react/count/index.d.ts.map +1 -0
- package/dist/react/textSpin/react/index.d.ts +18 -0
- package/dist/react/textSpin/react/index.d.ts.map +1 -0
- package/dist/react/textSpin/react/scrollFadeIn/ScrollFadeIn.d.ts +19 -0
- package/dist/react/textSpin/react/scrollFadeIn/ScrollFadeIn.d.ts.map +1 -0
- package/dist/react/textSpin/react/scrollFadeIn/index.d.ts +4 -0
- package/dist/react/textSpin/react/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/react/textSpin/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/react/textSpin/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/react/textSpin/react/textSpin/index.d.ts +5 -0
- package/dist/react/textSpin/react/textSpin/index.d.ts.map +1 -0
- package/dist/react/textSpin/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/react/textSpin/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/react/textSpin/react/textToParticle/index.d.ts +4 -0
- package/dist/react/textSpin/react/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textSpin/react/typing/Typing.d.ts +18 -0
- package/dist/react/textSpin/react/typing/Typing.d.ts.map +1 -0
- package/dist/react/textSpin/react/typing/index.d.ts +4 -0
- package/dist/react/textSpin/react/typing/index.d.ts.map +1 -0
- package/dist/react/textSpin/svelte/count/index.d.ts +2 -0
- package/dist/react/textSpin/svelte/count/index.d.ts.map +1 -0
- package/dist/react/textSpin/svelte/index.d.ts +11 -0
- package/dist/react/textSpin/svelte/index.d.ts.map +1 -0
- package/dist/react/textSpin/svelte/scrollFadeIn/index.d.ts +2 -0
- package/dist/react/textSpin/svelte/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/react/textSpin/svelte/textSpin/index.d.ts +4 -0
- package/dist/react/textSpin/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/react/textSpin/svelte/textToParticle/index.d.ts +2 -0
- package/dist/react/textSpin/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textSpin/svelte/typing/index.d.ts +3 -0
- package/dist/react/textSpin/svelte/typing/index.d.ts.map +1 -0
- package/dist/react/textSpin/vue/count/index.d.ts +2 -0
- package/dist/react/textSpin/vue/count/index.d.ts.map +1 -0
- package/dist/react/textSpin/vue/index.d.ts +11 -0
- package/dist/react/textSpin/vue/index.d.ts.map +1 -0
- package/dist/react/textSpin/vue/scrollFadeIn/index.d.ts +2 -0
- package/dist/react/textSpin/vue/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/react/textSpin/vue/textSpin/index.d.ts +4 -0
- package/dist/react/textSpin/vue/textSpin/index.d.ts.map +1 -0
- package/dist/react/textSpin/vue/textToParticle/index.d.ts +2 -0
- package/dist/react/textSpin/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/react/textSpin/vue/typing/index.d.ts +4 -0
- package/dist/react/textSpin/vue/typing/index.d.ts.map +1 -0
- package/dist/react/textToParticle/core/index.d.ts +2 -0
- package/dist/react/textToParticle/core/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/textSpin/index.d.ts +47 -0
- package/dist/react/textToParticle/core/textSpin/index.d.ts.map +1 -0
- package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/react/textToParticle/index.d.ts +2 -0
- package/dist/react/textToParticle/index.d.ts.map +1 -1
- package/dist/react/textToParticle/react/index.d.ts +2 -0
- package/dist/react/textToParticle/react/index.d.ts.map +1 -1
- package/dist/react/textToParticle/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/react/textToParticle/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/react/textToParticle/react/textSpin/index.d.ts +5 -0
- package/dist/react/textToParticle/react/textSpin/index.d.ts.map +1 -0
- package/dist/react/textToParticle/svelte/index.d.ts +1 -0
- package/dist/react/textToParticle/svelte/index.d.ts.map +1 -1
- package/dist/react/textToParticle/svelte/textSpin/index.d.ts +4 -0
- package/dist/react/textToParticle/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/react/textToParticle/vue/index.d.ts +1 -0
- package/dist/react/textToParticle/vue/index.d.ts.map +1 -1
- package/dist/react/textToParticle/vue/textSpin/index.d.ts +4 -0
- package/dist/react/textToParticle/vue/textSpin/index.d.ts.map +1 -0
- package/dist/react/typing/core/index.d.ts +2 -0
- package/dist/react/typing/core/index.d.ts.map +1 -1
- package/dist/react/typing/core/textSpin/index.d.ts +47 -0
- package/dist/react/typing/core/textSpin/index.d.ts.map +1 -0
- package/dist/react/typing/core/typing/index.d.ts.map +1 -1
- package/dist/react/typing/index.cjs +1 -1
- package/dist/react/typing/index.d.ts +2 -0
- package/dist/react/typing/index.d.ts.map +1 -1
- package/dist/react/typing/index.mjs +1 -1
- package/dist/react/typing/react/index.d.ts +2 -0
- package/dist/react/typing/react/index.d.ts.map +1 -1
- package/dist/react/typing/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/react/typing/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/react/typing/react/textSpin/index.d.ts +5 -0
- package/dist/react/typing/react/textSpin/index.d.ts.map +1 -0
- package/dist/react/typing/svelte/index.d.ts +1 -0
- package/dist/react/typing/svelte/index.d.ts.map +1 -1
- package/dist/react/typing/svelte/textSpin/index.d.ts +4 -0
- package/dist/react/typing/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/react/typing/vue/index.d.ts +1 -0
- package/dist/react/typing/vue/index.d.ts.map +1 -1
- package/dist/react/typing/vue/textSpin/index.d.ts +4 -0
- package/dist/react/typing/vue/textSpin/index.d.ts.map +1 -0
- package/dist/react/vue/index.d.ts +1 -0
- package/dist/react/vue/textSpin/index.d.ts +3 -0
- package/dist/scrollFadeIn/core/index.d.ts +2 -0
- package/dist/scrollFadeIn/core/index.d.ts.map +1 -1
- package/dist/scrollFadeIn/core/textSpin/index.d.ts +47 -0
- package/dist/scrollFadeIn/core/textSpin/index.d.ts.map +1 -0
- package/dist/scrollFadeIn/core/typing/index.d.ts.map +1 -1
- package/dist/scrollFadeIn/index.d.ts +2 -0
- package/dist/scrollFadeIn/index.d.ts.map +1 -1
- package/dist/scrollFadeIn/react/index.d.ts +2 -0
- package/dist/scrollFadeIn/react/index.d.ts.map +1 -1
- package/dist/scrollFadeIn/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/scrollFadeIn/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/scrollFadeIn/react/textSpin/index.d.ts +5 -0
- package/dist/scrollFadeIn/react/textSpin/index.d.ts.map +1 -0
- package/dist/scrollFadeIn/svelte/index.d.ts +1 -0
- package/dist/scrollFadeIn/svelte/index.d.ts.map +1 -1
- package/dist/scrollFadeIn/svelte/textSpin/index.d.ts +4 -0
- package/dist/scrollFadeIn/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/scrollFadeIn/vue/index.d.ts +1 -0
- package/dist/scrollFadeIn/vue/index.d.ts.map +1 -1
- package/dist/scrollFadeIn/vue/textSpin/index.d.ts +4 -0
- package/dist/scrollFadeIn/vue/textSpin/index.d.ts.map +1 -0
- package/dist/svelte/count/index.d.ts +39 -0
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.d.ts +39 -0
- package/dist/svelte/index.mjs +422 -14
- package/dist/svelte/scrollFadeIn/index.d.ts +39 -0
- package/dist/svelte/textSpin/index.cjs +1 -0
- package/dist/svelte/textSpin/index.d.ts +313 -0
- package/dist/svelte/textSpin/index.mjs +779 -0
- package/dist/svelte/textToParticle/index.d.ts +39 -0
- package/dist/svelte/typing/index.cjs +1 -1
- package/dist/svelte/typing/index.d.ts +39 -0
- package/dist/svelte/typing/index.mjs +5 -3
- package/dist/textSpin/core/count/index.d.ts +53 -0
- package/dist/textSpin/core/count/index.d.ts.map +1 -0
- package/dist/textSpin/core/index.d.ts +24 -0
- package/dist/textSpin/core/index.d.ts.map +1 -0
- package/dist/textSpin/core/scrollFadeIn/index.d.ts +50 -0
- package/dist/textSpin/core/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/textSpin/core/textSpin/index.d.ts +47 -0
- package/dist/textSpin/core/textSpin/index.d.ts.map +1 -0
- package/dist/textSpin/core/textToParticle/index.d.ts +103 -0
- package/dist/textSpin/core/textToParticle/index.d.ts.map +1 -0
- package/dist/textSpin/core/typing/index.d.ts +56 -0
- package/dist/textSpin/core/typing/index.d.ts.map +1 -0
- package/dist/textSpin/core/utils/visibilityManager.d.ts +36 -0
- package/dist/textSpin/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/textSpin/index.cjs +1 -0
- package/dist/textSpin/index.d.ts +22 -0
- package/dist/textSpin/index.d.ts.map +1 -0
- package/dist/textSpin/index.mjs +1 -0
- package/dist/textSpin/index.umd.d.ts +7 -0
- package/dist/textSpin/index.umd.d.ts.map +1 -0
- package/dist/textSpin/react/MasonEffect.d.ts +32 -0
- package/dist/textSpin/react/MasonEffect.d.ts.map +1 -0
- package/dist/textSpin/react/count/Count.d.ts +19 -0
- package/dist/textSpin/react/count/Count.d.ts.map +1 -0
- package/dist/textSpin/react/count/index.d.ts +5 -0
- package/dist/textSpin/react/count/index.d.ts.map +1 -0
- package/dist/textSpin/react/index.d.ts +18 -0
- package/dist/textSpin/react/index.d.ts.map +1 -0
- package/dist/textSpin/react/scrollFadeIn/ScrollFadeIn.d.ts +19 -0
- package/dist/textSpin/react/scrollFadeIn/ScrollFadeIn.d.ts.map +1 -0
- package/dist/textSpin/react/scrollFadeIn/index.d.ts +4 -0
- package/dist/textSpin/react/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/textSpin/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/textSpin/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/textSpin/react/textSpin/index.d.ts +5 -0
- package/dist/textSpin/react/textSpin/index.d.ts.map +1 -0
- package/dist/textSpin/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/textSpin/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/textSpin/react/textToParticle/index.d.ts +4 -0
- package/dist/textSpin/react/textToParticle/index.d.ts.map +1 -0
- package/dist/textSpin/react/typing/Typing.d.ts +18 -0
- package/dist/textSpin/react/typing/Typing.d.ts.map +1 -0
- package/dist/textSpin/react/typing/index.d.ts +4 -0
- package/dist/textSpin/react/typing/index.d.ts.map +1 -0
- package/dist/textSpin/svelte/count/index.d.ts +2 -0
- package/dist/textSpin/svelte/count/index.d.ts.map +1 -0
- package/dist/textSpin/svelte/index.d.ts +11 -0
- package/dist/textSpin/svelte/index.d.ts.map +1 -0
- package/dist/textSpin/svelte/scrollFadeIn/index.d.ts +2 -0
- package/dist/textSpin/svelte/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/textSpin/svelte/textSpin/index.d.ts +4 -0
- package/dist/textSpin/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/textSpin/svelte/textToParticle/index.d.ts +2 -0
- package/dist/textSpin/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/textSpin/svelte/typing/index.d.ts +3 -0
- package/dist/textSpin/svelte/typing/index.d.ts.map +1 -0
- package/dist/textSpin/vue/count/index.d.ts +2 -0
- package/dist/textSpin/vue/count/index.d.ts.map +1 -0
- package/dist/textSpin/vue/index.d.ts +11 -0
- package/dist/textSpin/vue/index.d.ts.map +1 -0
- package/dist/textSpin/vue/scrollFadeIn/index.d.ts +2 -0
- package/dist/textSpin/vue/scrollFadeIn/index.d.ts.map +1 -0
- package/dist/textSpin/vue/textSpin/index.d.ts +4 -0
- package/dist/textSpin/vue/textSpin/index.d.ts.map +1 -0
- package/dist/textSpin/vue/textToParticle/index.d.ts +2 -0
- package/dist/textSpin/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/textSpin/vue/typing/index.d.ts +4 -0
- package/dist/textSpin/vue/typing/index.d.ts.map +1 -0
- package/dist/textToParticle/core/index.d.ts +2 -0
- package/dist/textToParticle/core/index.d.ts.map +1 -1
- package/dist/textToParticle/core/textSpin/index.d.ts +47 -0
- package/dist/textToParticle/core/textSpin/index.d.ts.map +1 -0
- package/dist/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/textToParticle/index.d.ts +2 -0
- package/dist/textToParticle/index.d.ts.map +1 -1
- package/dist/textToParticle/react/index.d.ts +2 -0
- package/dist/textToParticle/react/index.d.ts.map +1 -1
- package/dist/textToParticle/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/textToParticle/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/textToParticle/react/textSpin/index.d.ts +5 -0
- package/dist/textToParticle/react/textSpin/index.d.ts.map +1 -0
- package/dist/textToParticle/svelte/index.d.ts +1 -0
- package/dist/textToParticle/svelte/index.d.ts.map +1 -1
- package/dist/textToParticle/svelte/textSpin/index.d.ts +4 -0
- package/dist/textToParticle/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/textToParticle/vue/index.d.ts +1 -0
- package/dist/textToParticle/vue/index.d.ts.map +1 -1
- package/dist/textToParticle/vue/textSpin/index.d.ts +4 -0
- package/dist/textToParticle/vue/textSpin/index.d.ts.map +1 -0
- package/dist/typing/core/index.d.ts +2 -0
- package/dist/typing/core/index.d.ts.map +1 -1
- package/dist/typing/core/textSpin/index.d.ts +47 -0
- package/dist/typing/core/textSpin/index.d.ts.map +1 -0
- package/dist/typing/core/typing/index.d.ts.map +1 -1
- package/dist/typing/index.cjs +1 -1
- package/dist/typing/index.d.ts +2 -0
- package/dist/typing/index.d.ts.map +1 -1
- package/dist/typing/index.mjs +1 -1
- package/dist/typing/react/index.d.ts +2 -0
- package/dist/typing/react/index.d.ts.map +1 -1
- package/dist/typing/react/textSpin/TextSpin.d.ts +19 -0
- package/dist/typing/react/textSpin/TextSpin.d.ts.map +1 -0
- package/dist/typing/react/textSpin/index.d.ts +5 -0
- package/dist/typing/react/textSpin/index.d.ts.map +1 -0
- package/dist/typing/svelte/index.d.ts +1 -0
- package/dist/typing/svelte/index.d.ts.map +1 -1
- package/dist/typing/svelte/textSpin/index.d.ts +4 -0
- package/dist/typing/svelte/textSpin/index.d.ts.map +1 -0
- package/dist/typing/vue/index.d.ts +1 -0
- package/dist/typing/vue/index.d.ts.map +1 -1
- package/dist/typing/vue/textSpin/index.d.ts +4 -0
- package/dist/typing/vue/textSpin/index.d.ts.map +1 -0
- package/dist/vue/count/index.d.ts +39 -0
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.d.ts +39 -0
- package/dist/vue/index.mjs +318 -13
- package/dist/vue/scrollFadeIn/index.d.ts +39 -0
- package/dist/vue/textSpin/index.cjs +1 -0
- package/dist/vue/textSpin/index.d.ts +313 -0
- package/dist/vue/textSpin/index.mjs +412 -0
- package/dist/vue/textToParticle/index.d.ts +39 -0
- package/dist/vue/typing/index.cjs +1 -1
- package/dist/vue/typing/index.d.ts +39 -0
- package/dist/vue/typing/index.mjs +5 -3
- package/package.json +26 -2
|
@@ -98,6 +98,45 @@ export declare interface ScrollFadeInOptions {
|
|
|
98
98
|
onComplete?: () => void;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
+
export declare class TextSpin {
|
|
102
|
+
container: HTMLElement;
|
|
103
|
+
config: Required<Omit<TextSpinOptions, 'onStart' | 'onComplete' | 'root'>> & {
|
|
104
|
+
root: HTMLElement | null;
|
|
105
|
+
onStart: TextSpinOptions['onStart'];
|
|
106
|
+
onComplete: TextSpinOptions['onComplete'];
|
|
107
|
+
};
|
|
108
|
+
visibilityManager: VisibilityManager | null;
|
|
109
|
+
textElements: HTMLElement[];
|
|
110
|
+
randomPoints: number[];
|
|
111
|
+
hasTriggered: boolean;
|
|
112
|
+
isActive: boolean;
|
|
113
|
+
constructor(container: HTMLElement | string, options: TextSpinOptions);
|
|
114
|
+
init(): void;
|
|
115
|
+
injectStyles(): void;
|
|
116
|
+
createTextStructure(): void;
|
|
117
|
+
setupVisibilityManager(): void;
|
|
118
|
+
start(): void;
|
|
119
|
+
stop(): void;
|
|
120
|
+
reset(): void;
|
|
121
|
+
updateText(newText: string): void;
|
|
122
|
+
updateConfig(newConfig: Partial<TextSpinOptions>): void;
|
|
123
|
+
destroy(): void;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
export declare interface TextSpinOptions {
|
|
127
|
+
text: string;
|
|
128
|
+
delay?: number;
|
|
129
|
+
duration?: number;
|
|
130
|
+
randomDelay?: number;
|
|
131
|
+
threshold?: number;
|
|
132
|
+
rootMargin?: string;
|
|
133
|
+
root?: HTMLElement | null;
|
|
134
|
+
triggerOnce?: boolean;
|
|
135
|
+
enabled?: boolean;
|
|
136
|
+
onStart?: () => void;
|
|
137
|
+
onComplete?: () => void;
|
|
138
|
+
}
|
|
139
|
+
|
|
101
140
|
declare class TextToParticle {
|
|
102
141
|
container: HTMLElement;
|
|
103
142
|
config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function h(t){return"function"==typeof t}function l(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function a(t,e,i){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return n}const i=t.subscribe(...e);return i.unsubscribe?()=>i.unsubscribe():i}(e,i))}function c(t){t.parentNode&&t.parentNode.removeChild(t)}function u(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let d;function p(t){d=t}const g=[],f=[];let y=[];const b=[],m=Promise.resolve();let x=!1;function $(t){y.push(t)}const v=new Set;let C=0;function w(){if(0!==C)return;const t=d;do{try{for(;C<g.length;){const t=g[C];C++,p(t),V(t.$$)}}catch(e){throw g.length=0,C=0,e}for(p(null),g.length=0,C=0;f.length;)f.pop()();for(let t=0;t<y.length;t+=1){const e=y[t];v.has(e)||(v.add(e),e())}y.length=0}while(g.length);for(;b.length;)b.pop()();x=!1,v.clear(),p(t)}function V(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach($)}}const O=new Set;function T(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];y.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),y=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function _(t,e){-1===t.$$.dirty[0]&&(g.push(t),x||(x=!0,m.then(w)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function H(t,e,i,l,a,u,g=null,f=[-1]){const y=d;p(t);const b=t.$$={fragment:null,ctx:[],props:u,update:n,not_equal:a,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(y?y.$$.context:[])),callbacks:o(),dirty:f,skip_bound:!1,root:e.target||y.$$.root};g&&g(b.root);let m=!1;if(b.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return b.ctx&&a(b.ctx[e],b.ctx[e]=s)&&(!b.skip_bound&&b.bound[e]&&b.bound[e](s),m&&_(t,e)),i}):[],b.update(),m=!0,r(b.before_update),b.fragment=!!l&&l(b.ctx),e.target){if(e.hydrate){const t=(C=e.target,Array.from(C.childNodes));b.fragment&&b.fragment.l(t),t.forEach(c)}else b.fragment&&b.fragment.c();e.intro&&((x=t.$$.fragment)&&x.i&&(O.delete(x),x.i(v))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),$(()=>{const e=t.$$.on_mount.map(s).filter(h);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach($)}(t,e.target,e.anchor),w()}var x,v,C;p(y)}class M{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){T(this,1),this.$destroy=n}$on(t,e){if(!h(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class U{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function I(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,n=Math.floor(i/588),s=Math.floor(i%588/28),o=i%28,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],h=[];return h.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),h.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&h.push(r[o]),h}function E(t,e,i){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),s=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===n||-1===s)return t+(e||"")+(i||"");const r=44032+21*n*28+28*s+o;return String.fromCharCode(r)}function R(t){const e=[],i=[];for(let n=0;n<t.length;n++){const s=t[n],o=s.charCodeAt(0),r=e.length;if(o>=44032&&o<=55203){const t=I(s);e.push(...t),i.push({start:r,end:e.length,isHangul:!0})}else e.push(s),i.push({start:r,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:i}}class k{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=R(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.injectStyles(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-typing-styles"))return;const t=document.createElement("style");t.id="masoneffect-typing-styles",t.textContent="\n .typing-char {\n transition: opacity 0.2s ease-in;\n display: inline-block;\n }\n .typing-cursor {\n display: inline-block;\n }\n ",document.head.appendChild(t)}setupVisibilityManager(){this.visibilityManager=new U(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const s=Math.min(t-n.start,n.end-n.start);if(s<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+s);1===t.length?e+=t[0]:2===t.length?e+=E(t[0],t[1]):t.length>=3&&(e+=E(t[0],t[1],t[2]))}else s>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){const e=t.replace(new RegExp(this.escapeHtml(this.config.cursorChar)+"$"),""),i=t.endsWith(this.config.cursorChar),n=(this.container.textContent||"").replace(new RegExp(this.config.cursorChar+"$"),"");let s="";for(let r=0;r<e.length;r++){const t=e[r];s+=r>=n.length?`<span class="typing-char typing-fade-in" style="opacity: 0;">${this.escapeHtml(t)}</span>`:`<span class="typing-char" style="opacity: 1;">${this.escapeHtml(t)}</span>`}i&&(s+=`<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`),this.container.innerHTML=s;const o=this.container.querySelectorAll(".typing-fade-in");o.length>0&&requestAnimationFrame(()=>{o.forEach(t=>{t.style.opacity="1",t.classList.remove("typing-fade-in")})})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}setText(t){this.originalText=t,this.config.text=t;const e=R(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}function P(t){let e;return{c(){var i;i="div",e=document.createElement(i),u(e,"class",t[1]),u(e,"style",t[2])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[8](e)},p:n,i:n,o:n,d(i){i&&c(e),t[8](null)}}}function A(t,e,n){let s,o;a(t,effect,t=>n(10,s=t)),a(t,props,t=>n(11,o=t));let{text:r,speed:h=50,delay:l=0,enabled:c=!0,threshold:u=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:p=!1,showCursor:g=!0,cursorChar:y="|",className:b="",style:m="",onUpdate:x,onComplete:$}=o(),v=null,C=null;return i.onMount(()=>{if(!v)return;C=new k(v,{text:r,speed:h,delay:l,enabled:c,threshold:u,rootMargin:d,triggerOnce:p,showCursor:g,cursorChar:y,onUpdate:x,onComplete:$})}),i.onDestroy(()=>{C&&(C.destroy(),C=null)}),s(()=>{C&&r!==C.originalText&&C.setText(r)}),[v,b,m,function(){null==C||C.start()},function(){null==C||C.stop()},function(){null==C||C.reset()},function(t){null==C||C.setText(t)},function(){C&&(C.destroy(),C=null)},function(t){f[t?"unshift":"push"](()=>{v=t,n(0,v)})}]}module.exports=class extends M{constructor(t){super(),H(this,t,A,P,l,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}};
|
|
1
|
+
"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function h(t){return"function"==typeof t}function l(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function a(t,e,i){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return n}const i=t.subscribe(...e);return i.unsubscribe?()=>i.unsubscribe():i}(e,i))}function c(t){t.parentNode&&t.parentNode.removeChild(t)}function u(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let d;function p(t){d=t}const g=[],f=[];let y=[];const b=[],m=Promise.resolve();let x=!1;function $(t){y.push(t)}const v=new Set;let C=0;function w(){if(0!==C)return;const t=d;do{try{for(;C<g.length;){const t=g[C];C++,p(t),V(t.$$)}}catch(e){throw g.length=0,C=0,e}for(p(null),g.length=0,C=0;f.length;)f.pop()();for(let t=0;t<y.length;t+=1){const e=y[t];v.has(e)||(v.add(e),e())}y.length=0}while(g.length);for(;b.length;)b.pop()();x=!1,v.clear(),p(t)}function V(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach($)}}const O=new Set;function T(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];y.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),y=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function _(t,e){-1===t.$$.dirty[0]&&(g.push(t),x||(x=!0,m.then(w)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function H(t,e,i,l,a,u,g=null,f=[-1]){const y=d;p(t);const b=t.$$={fragment:null,ctx:[],props:u,update:n,not_equal:a,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(y?y.$$.context:[])),callbacks:o(),dirty:f,skip_bound:!1,root:e.target||y.$$.root};g&&g(b.root);let m=!1;if(b.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return b.ctx&&a(b.ctx[e],b.ctx[e]=s)&&(!b.skip_bound&&b.bound[e]&&b.bound[e](s),m&&_(t,e)),i}):[],b.update(),m=!0,r(b.before_update),b.fragment=!!l&&l(b.ctx),e.target){if(e.hydrate){const t=(C=e.target,Array.from(C.childNodes));b.fragment&&b.fragment.l(t),t.forEach(c)}else b.fragment&&b.fragment.c();e.intro&&((x=t.$$.fragment)&&x.i&&(O.delete(x),x.i(v))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),$(()=>{const e=t.$$.on_mount.map(s).filter(h);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach($)}(t,e.target,e.anchor),w()}var x,v,C;p(y)}class M{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){T(this,1),this.$destroy=n}$on(t,e){if(!h(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class U{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function I(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,n=Math.floor(i/588),s=Math.floor(i%588/28),o=i%28,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],h=[];return h.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),h.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&h.push(r[o]),h}function E(t,e,i){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),s=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===n||-1===s)return t+(e||"")+(i||"");const r=44032+21*n*28+28*s+o;return String.fromCharCode(r)}function R(t){const e=[],i=[];for(let n=0;n<t.length;n++){const s=t[n],o=s.charCodeAt(0),r=e.length;if(o>=44032&&o<=55203){const t=I(s);e.push(...t),i.push({start:r,end:e.length,isHangul:!0})}else e.push(s),i.push({start:r,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:i}}class k{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=R(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.injectStyles(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-typing-styles"))return;const t=document.createElement("style");t.id="masoneffect-typing-styles",t.textContent="\n .typing-char {\n transition: opacity 0.3s ease-in;\n display: inline-block;\n }\n .typing-cursor {\n display: inline-block;\n }\n ",document.head.appendChild(t),this.container.style.whiteSpace="pre-wrap"}setupVisibilityManager(){this.visibilityManager=new U(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const s=Math.min(t-n.start,n.end-n.start);if(s<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+s);1===t.length?e+=t[0]:2===t.length?e+=E(t[0],t[1]):t.length>=3&&(e+=E(t[0],t[1],t[2]))}else s>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){const e=t.replace(new RegExp(this.escapeHtml(this.config.cursorChar)+"$"),""),i=t.endsWith(this.config.cursorChar),n=(this.container.textContent||"").replace(new RegExp(this.config.cursorChar+"$"),"");let s="";for(let r=0;r<e.length;r++){const t=e[r],i=r>=n.length,o=" "===t?" ":this.escapeHtml(t);s+=i?`<span class="typing-char typing-fade-in" style="opacity: 0;">${o}</span>`:`<span class="typing-char" style="opacity: 1;">${o}</span>`}i&&(s+=`<span class="typing-cursor">${this.escapeHtml(this.config.cursorChar)}</span>`),this.container.innerHTML=s;const o=this.container.querySelectorAll(".typing-fade-in");o.length>0&&requestAnimationFrame(()=>{o.forEach(t=>{t.style.opacity="1",t.classList.remove("typing-fade-in")})})}escapeHtml(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}setText(t){this.originalText=t,this.config.text=t;const e=R(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}function P(t){let e;return{c(){var i;i="div",e=document.createElement(i),u(e,"class",t[1]),u(e,"style",t[2])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[8](e)},p:n,i:n,o:n,d(i){i&&c(e),t[8](null)}}}function S(t,e,n){let s,o;a(t,effect,t=>n(10,s=t)),a(t,props,t=>n(11,o=t));let{text:r,speed:h=50,delay:l=0,enabled:c=!0,threshold:u=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:p=!1,showCursor:g=!0,cursorChar:y="|",className:b="",style:m="",onUpdate:x,onComplete:$}=o(),v=null,C=null;return i.onMount(()=>{if(!v)return;C=new k(v,{text:r,speed:h,delay:l,enabled:c,threshold:u,rootMargin:d,triggerOnce:p,showCursor:g,cursorChar:y,onUpdate:x,onComplete:$})}),i.onDestroy(()=>{C&&(C.destroy(),C=null)}),s(()=>{C&&r!==C.originalText&&C.setText(r)}),[v,b,m,function(){null==C||C.start()},function(){null==C||C.stop()},function(){null==C||C.reset()},function(t){null==C||C.setText(t)},function(){C&&(C.destroy(),C=null)},function(t){f[t?"unshift":"push"](()=>{v=t,n(0,v)})}]}module.exports=class extends M{constructor(t){super(),H(this,t,S,P,l,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}};
|
|
@@ -98,6 +98,45 @@ export declare interface ScrollFadeInOptions {
|
|
|
98
98
|
onComplete?: () => void;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
+
export declare class TextSpin {
|
|
102
|
+
container: HTMLElement;
|
|
103
|
+
config: Required<Omit<TextSpinOptions, 'onStart' | 'onComplete' | 'root'>> & {
|
|
104
|
+
root: HTMLElement | null;
|
|
105
|
+
onStart: TextSpinOptions['onStart'];
|
|
106
|
+
onComplete: TextSpinOptions['onComplete'];
|
|
107
|
+
};
|
|
108
|
+
visibilityManager: VisibilityManager | null;
|
|
109
|
+
textElements: HTMLElement[];
|
|
110
|
+
randomPoints: number[];
|
|
111
|
+
hasTriggered: boolean;
|
|
112
|
+
isActive: boolean;
|
|
113
|
+
constructor(container: HTMLElement | string, options: TextSpinOptions);
|
|
114
|
+
init(): void;
|
|
115
|
+
injectStyles(): void;
|
|
116
|
+
createTextStructure(): void;
|
|
117
|
+
setupVisibilityManager(): void;
|
|
118
|
+
start(): void;
|
|
119
|
+
stop(): void;
|
|
120
|
+
reset(): void;
|
|
121
|
+
updateText(newText: string): void;
|
|
122
|
+
updateConfig(newConfig: Partial<TextSpinOptions>): void;
|
|
123
|
+
destroy(): void;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
export declare interface TextSpinOptions {
|
|
127
|
+
text: string;
|
|
128
|
+
delay?: number;
|
|
129
|
+
duration?: number;
|
|
130
|
+
randomDelay?: number;
|
|
131
|
+
threshold?: number;
|
|
132
|
+
rootMargin?: string;
|
|
133
|
+
root?: HTMLElement | null;
|
|
134
|
+
triggerOnce?: boolean;
|
|
135
|
+
enabled?: boolean;
|
|
136
|
+
onStart?: () => void;
|
|
137
|
+
onComplete?: () => void;
|
|
138
|
+
}
|
|
139
|
+
|
|
101
140
|
declare class TextToParticle {
|
|
102
141
|
container: HTMLElement;
|
|
103
142
|
config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
|
|
@@ -485,7 +485,7 @@ class Typing {
|
|
|
485
485
|
style.id = "masoneffect-typing-styles";
|
|
486
486
|
style.textContent = `
|
|
487
487
|
.typing-char {
|
|
488
|
-
transition: opacity 0.
|
|
488
|
+
transition: opacity 0.3s ease-in;
|
|
489
489
|
display: inline-block;
|
|
490
490
|
}
|
|
491
491
|
.typing-cursor {
|
|
@@ -493,6 +493,7 @@ class Typing {
|
|
|
493
493
|
}
|
|
494
494
|
`;
|
|
495
495
|
document.head.appendChild(style);
|
|
496
|
+
this.container.style.whiteSpace = "pre-wrap";
|
|
496
497
|
}
|
|
497
498
|
setupVisibilityManager() {
|
|
498
499
|
this.visibilityManager = new VisibilityManager(this.container, {
|
|
@@ -594,10 +595,11 @@ class Typing {
|
|
|
594
595
|
for (let i = 0; i < textWithoutCursor.length; i++) {
|
|
595
596
|
const char = textWithoutCursor[i];
|
|
596
597
|
const isNewChar = i >= previousTextWithoutCursor.length;
|
|
598
|
+
const displayChar = char === " " ? " " : this.escapeHtml(char);
|
|
597
599
|
if (isNewChar) {
|
|
598
|
-
html += `<span class="typing-char typing-fade-in" style="opacity: 0;">${
|
|
600
|
+
html += `<span class="typing-char typing-fade-in" style="opacity: 0;">${displayChar}</span>`;
|
|
599
601
|
} else {
|
|
600
|
-
html += `<span class="typing-char" style="opacity: 1;">${
|
|
602
|
+
html += `<span class="typing-char" style="opacity: 1;">${displayChar}</span>`;
|
|
601
603
|
}
|
|
602
604
|
}
|
|
603
605
|
if (hasCursor) {
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Count - 숫자 카운팅 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { Count } from 'masoneffect/count';
|
|
7
|
+
*/
|
|
8
|
+
import { VisibilityManager } from '../utils/visibilityManager.js';
|
|
9
|
+
export interface CountOptions {
|
|
10
|
+
targetValue: number;
|
|
11
|
+
duration?: number;
|
|
12
|
+
startValue?: number;
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
easing?: (t: number) => number;
|
|
15
|
+
threshold?: number;
|
|
16
|
+
rootMargin?: string;
|
|
17
|
+
triggerOnce?: boolean;
|
|
18
|
+
onUpdate?: (value: number) => void;
|
|
19
|
+
onComplete?: () => void;
|
|
20
|
+
}
|
|
21
|
+
export declare const easingFunctions: {
|
|
22
|
+
linear: (t: number) => number;
|
|
23
|
+
easeInQuad: (t: number) => number;
|
|
24
|
+
easeOutQuad: (t: number) => number;
|
|
25
|
+
easeInOutQuad: (t: number) => number;
|
|
26
|
+
easeOutCubic: (t: number) => number;
|
|
27
|
+
};
|
|
28
|
+
export declare class Count {
|
|
29
|
+
container: HTMLElement;
|
|
30
|
+
config: Required<Omit<CountOptions, 'onUpdate' | 'onComplete'>> & {
|
|
31
|
+
onUpdate: CountOptions['onUpdate'];
|
|
32
|
+
onComplete: CountOptions['onComplete'];
|
|
33
|
+
};
|
|
34
|
+
currentValue: number;
|
|
35
|
+
startTime: number | null;
|
|
36
|
+
animationFrameId: number | null;
|
|
37
|
+
visibilityManager: VisibilityManager | null;
|
|
38
|
+
isRunning: boolean;
|
|
39
|
+
hasTriggered: boolean;
|
|
40
|
+
constructor(container: HTMLElement | string, options: CountOptions);
|
|
41
|
+
init(): void;
|
|
42
|
+
setupVisibilityManager(): void;
|
|
43
|
+
start(): void;
|
|
44
|
+
stop(): void;
|
|
45
|
+
reset(): void;
|
|
46
|
+
updateDisplay(value: number): void;
|
|
47
|
+
formatNumber(value: number): string;
|
|
48
|
+
updateConfig(newConfig: Partial<CountOptions>): void;
|
|
49
|
+
getValue(): number;
|
|
50
|
+
destroy(): void;
|
|
51
|
+
}
|
|
52
|
+
export default Count;
|
|
53
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/count/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,eAAe;gBACd,MAAM;oBACF,MAAM;qBACL,MAAM;uBACJ,MAAM;sBACP,MAAM;CACzB,CAAC;AAEF,qBAAa,KAAK;IAChB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QAChE,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;QACnC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;KACxC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;gBAEV,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY;IAoClE,IAAI,IAAI,IAAI;IAQZ,sBAAsB,IAAI,IAAI;IAoB9B,KAAK,IAAI,IAAI;IA6Cb,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMnC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI;IA0BpD,QAAQ,IAAI,MAAM;IAKlB,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MasonEffect Core - 모든 이펙트를 export하는 메인 파일
|
|
3
|
+
*
|
|
4
|
+
* 주의: tree-shaking을 위해 각 이펙트를 직접 import하는 것을 권장합니다:
|
|
5
|
+
* - import { TextToParticle } from 'masoneffect/textToParticle'
|
|
6
|
+
* - import { Count } from 'masoneffect/count'
|
|
7
|
+
*
|
|
8
|
+
* 이 파일은 하위 호환성을 위해 제공됩니다.
|
|
9
|
+
*/
|
|
10
|
+
export { TextToParticle, default as TextToParticleDefault } from './textToParticle/index.js';
|
|
11
|
+
export type { TextToParticleOptions, Particle } from './textToParticle/index.js';
|
|
12
|
+
export { Count, default as CountDefault } from './count/index.js';
|
|
13
|
+
export type { CountOptions } from './count/index.js';
|
|
14
|
+
export { easingFunctions } from './count/index.js';
|
|
15
|
+
export { Typing, default as TypingDefault } from './typing/index.js';
|
|
16
|
+
export type { TypingOptions } from './typing/index.js';
|
|
17
|
+
export { ScrollFadeIn, default as ScrollFadeInDefault } from './scrollFadeIn/index.js';
|
|
18
|
+
export type { ScrollFadeInOptions } from './scrollFadeIn/index.js';
|
|
19
|
+
export { TextSpin, default as TextSpinDefault } from './textSpin/index.js';
|
|
20
|
+
export type { TextSpinOptions } from './textSpin/index.js';
|
|
21
|
+
export { TextToParticle as MasonEffect } from './textToParticle/index.js';
|
|
22
|
+
export type { TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
|
|
23
|
+
export { default } from './textToParticle/index.js';
|
|
24
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACvF,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAGnE,OAAO,EAAE,QAAQ,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3E,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ScrollFadeIn - 스크롤 기반 페이드 인 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { ScrollFadeIn } from 'masoneffect/scrollFadeIn';
|
|
7
|
+
*/
|
|
8
|
+
import { VisibilityManager } from '../utils/visibilityManager.js';
|
|
9
|
+
export interface ScrollFadeInOptions {
|
|
10
|
+
direction?: 'top' | 'right' | 'bottom' | 'left';
|
|
11
|
+
distance?: string;
|
|
12
|
+
duration?: number;
|
|
13
|
+
threshold?: number;
|
|
14
|
+
rootMargin?: string;
|
|
15
|
+
root?: HTMLElement | null;
|
|
16
|
+
triggerOnce?: boolean;
|
|
17
|
+
enabled?: boolean;
|
|
18
|
+
onStart?: () => void;
|
|
19
|
+
onComplete?: () => void;
|
|
20
|
+
}
|
|
21
|
+
export declare class ScrollFadeIn {
|
|
22
|
+
container: HTMLElement;
|
|
23
|
+
config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'root'>> & {
|
|
24
|
+
root: HTMLElement | null;
|
|
25
|
+
onStart: ScrollFadeInOptions['onStart'];
|
|
26
|
+
onComplete: ScrollFadeInOptions['onComplete'];
|
|
27
|
+
};
|
|
28
|
+
private easing;
|
|
29
|
+
visibilityManager: VisibilityManager | null;
|
|
30
|
+
animationFrameId: number | null;
|
|
31
|
+
startTime: number | null;
|
|
32
|
+
isRunning: boolean;
|
|
33
|
+
hasTriggered: boolean;
|
|
34
|
+
initialTransform: string;
|
|
35
|
+
targetDistance: number;
|
|
36
|
+
constructor(container: HTMLElement | string, options?: ScrollFadeInOptions);
|
|
37
|
+
init(): void;
|
|
38
|
+
parseDistance(distance: string): number;
|
|
39
|
+
setInitialPosition(): void;
|
|
40
|
+
setupVisibilityManager(): void;
|
|
41
|
+
start(): void;
|
|
42
|
+
animate(): void;
|
|
43
|
+
complete(): void;
|
|
44
|
+
reset(): void;
|
|
45
|
+
stop(): void;
|
|
46
|
+
updateConfig(newConfig: Partial<ScrollFadeInOptions>): void;
|
|
47
|
+
destroy(): void;
|
|
48
|
+
}
|
|
49
|
+
export default ScrollFadeIn;
|
|
50
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/scrollFadeIn/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAKD,qBAAa,YAAY;IACvB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC,GAAG;QAC/E,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;QACzB,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,UAAU,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;KAC/C,CAAC;IACF,OAAO,CAAC,MAAM,CAAwB;IACtC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;gBAEX,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,GAAE,mBAAwB;IAwC9E,IAAI,IAAI,IAAI;IAiBZ,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAoCvC,kBAAkB,IAAI,IAAI;IAqC1B,sBAAsB,IAAI,IAAI;IA8B9B,KAAK,IAAI,IAAI;IAeb,OAAO,IAAI,IAAI;IAmDf,QAAQ,IAAI,IAAI;IAqBhB,KAAK,IAAI,IAAI;IAMb,IAAI,IAAI,IAAI;IASZ,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,IAAI;IAmC3D,OAAO,IAAI,IAAI;CAWhB;AAGD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TextSpin - 텍스트를 개별 문자로 분리하여 랜덤하게 나타나는 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { TextSpin } from 'masoneffect/textSpin';
|
|
7
|
+
*/
|
|
8
|
+
import { VisibilityManager } from '../utils/visibilityManager.js';
|
|
9
|
+
export interface TextSpinOptions {
|
|
10
|
+
text: string;
|
|
11
|
+
delay?: number;
|
|
12
|
+
duration?: number;
|
|
13
|
+
randomDelay?: number;
|
|
14
|
+
threshold?: number;
|
|
15
|
+
rootMargin?: string;
|
|
16
|
+
root?: HTMLElement | null;
|
|
17
|
+
triggerOnce?: boolean;
|
|
18
|
+
enabled?: boolean;
|
|
19
|
+
onStart?: () => void;
|
|
20
|
+
onComplete?: () => void;
|
|
21
|
+
}
|
|
22
|
+
export declare class TextSpin {
|
|
23
|
+
container: HTMLElement;
|
|
24
|
+
config: Required<Omit<TextSpinOptions, 'onStart' | 'onComplete' | 'root'>> & {
|
|
25
|
+
root: HTMLElement | null;
|
|
26
|
+
onStart: TextSpinOptions['onStart'];
|
|
27
|
+
onComplete: TextSpinOptions['onComplete'];
|
|
28
|
+
};
|
|
29
|
+
visibilityManager: VisibilityManager | null;
|
|
30
|
+
textElements: HTMLElement[];
|
|
31
|
+
randomPoints: number[];
|
|
32
|
+
hasTriggered: boolean;
|
|
33
|
+
isActive: boolean;
|
|
34
|
+
constructor(container: HTMLElement | string, options: TextSpinOptions);
|
|
35
|
+
init(): void;
|
|
36
|
+
injectStyles(): void;
|
|
37
|
+
createTextStructure(): void;
|
|
38
|
+
setupVisibilityManager(): void;
|
|
39
|
+
start(): void;
|
|
40
|
+
stop(): void;
|
|
41
|
+
reset(): void;
|
|
42
|
+
updateText(newText: string): void;
|
|
43
|
+
updateConfig(newConfig: Partial<TextSpinOptions>): void;
|
|
44
|
+
destroy(): void;
|
|
45
|
+
}
|
|
46
|
+
export default TextSpin;
|
|
47
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textSpin/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,qBAAa,QAAQ;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC,GAAG;QAC3E,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;QACzB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACpC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;KAC3C,CAAC;IACF,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;gBAEN,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,eAAe;IAwCrE,IAAI,IAAI,IAAI;IAWZ,YAAY,IAAI,IAAI;IA6BpB,mBAAmB,IAAI,IAAI;IAmC3B,sBAAsB,IAAI,IAAI;IAyB9B,KAAK,IAAI,IAAI;IA6Bb,IAAI,IAAI,IAAI;IAYZ,KAAK,IAAI,IAAI;IAMb,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAWjC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI;IAiCvD,OAAO,IAAI,IAAI;CAUhB;AAGD,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TextToParticle - 텍스트를 파티클로 변환하는 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { TextToParticle } from 'masoneffect/textToParticle';
|
|
7
|
+
*/
|
|
8
|
+
import { VisibilityManager } from '../utils/visibilityManager.js';
|
|
9
|
+
export interface TextToParticleOptions {
|
|
10
|
+
text?: string;
|
|
11
|
+
densityStep?: number;
|
|
12
|
+
maxParticles?: number;
|
|
13
|
+
pointSize?: number;
|
|
14
|
+
ease?: number;
|
|
15
|
+
repelRadius?: number;
|
|
16
|
+
repelStrength?: number;
|
|
17
|
+
particleColor?: string;
|
|
18
|
+
fontFamily?: string;
|
|
19
|
+
fontSize?: number | null;
|
|
20
|
+
width?: number | null;
|
|
21
|
+
height?: number | null;
|
|
22
|
+
devicePixelRatio?: number | null;
|
|
23
|
+
debounceDelay?: number;
|
|
24
|
+
onReady?: (instance: TextToParticle) => void;
|
|
25
|
+
onUpdate?: (instance: TextToParticle) => void;
|
|
26
|
+
}
|
|
27
|
+
export interface Particle {
|
|
28
|
+
x: number;
|
|
29
|
+
y: number;
|
|
30
|
+
vx: number;
|
|
31
|
+
vy: number;
|
|
32
|
+
tx: number;
|
|
33
|
+
ty: number;
|
|
34
|
+
initialX?: number;
|
|
35
|
+
initialY?: number;
|
|
36
|
+
j: number;
|
|
37
|
+
}
|
|
38
|
+
export declare class TextToParticle {
|
|
39
|
+
container: HTMLElement;
|
|
40
|
+
config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
|
|
41
|
+
onReady: TextToParticleOptions['onReady'];
|
|
42
|
+
onUpdate: TextToParticleOptions['onUpdate'];
|
|
43
|
+
};
|
|
44
|
+
canvas: HTMLCanvasElement;
|
|
45
|
+
ctx: CanvasRenderingContext2D;
|
|
46
|
+
offCanvas: HTMLCanvasElement;
|
|
47
|
+
offCtx: CanvasRenderingContext2D;
|
|
48
|
+
W: number;
|
|
49
|
+
H: number;
|
|
50
|
+
DPR: number;
|
|
51
|
+
particles: Particle[];
|
|
52
|
+
mouse: {
|
|
53
|
+
x: number;
|
|
54
|
+
y: number;
|
|
55
|
+
down: boolean;
|
|
56
|
+
};
|
|
57
|
+
animationId: number | null;
|
|
58
|
+
isRunning: boolean;
|
|
59
|
+
visibilityManager: VisibilityManager | null;
|
|
60
|
+
debounceDelay: number;
|
|
61
|
+
_debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
|
|
62
|
+
_debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
|
|
63
|
+
constructor(container: HTMLElement | string, options?: TextToParticleOptions);
|
|
64
|
+
init(): void;
|
|
65
|
+
setupVisibilityManager(): void;
|
|
66
|
+
resize(): void;
|
|
67
|
+
/**
|
|
68
|
+
* 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
|
|
69
|
+
* @param fontSize 확인할 폰트 크기
|
|
70
|
+
* @param text 텍스트 (\n으로 줄바꿈 구분)
|
|
71
|
+
* @param maxWidth 최대 너비
|
|
72
|
+
* @param maxHeight 최대 높이
|
|
73
|
+
* @returns { width: number, height: number, fits: boolean }
|
|
74
|
+
*/
|
|
75
|
+
private measureTextFit;
|
|
76
|
+
/**
|
|
77
|
+
* 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
|
|
78
|
+
* 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
|
|
79
|
+
*/
|
|
80
|
+
private findOptimalFontSize;
|
|
81
|
+
buildTargets(): void;
|
|
82
|
+
makeParticle(): Particle;
|
|
83
|
+
initParticles(): void;
|
|
84
|
+
scatter(): void;
|
|
85
|
+
morph(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
|
|
86
|
+
_morphInternal(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
|
|
87
|
+
update(): void;
|
|
88
|
+
animate(): void;
|
|
89
|
+
start(): void;
|
|
90
|
+
stop(): void;
|
|
91
|
+
setupEventListeners(): void;
|
|
92
|
+
removeEventListeners(): void;
|
|
93
|
+
handleResize(): void;
|
|
94
|
+
handleMouseMove(e: MouseEvent): void;
|
|
95
|
+
handleMouseLeave(): void;
|
|
96
|
+
handleMouseDown(): void;
|
|
97
|
+
handleMouseUp(): void;
|
|
98
|
+
updateConfig(newConfig: Partial<TextToParticleOptions>): void;
|
|
99
|
+
_updateConfigInternal(newConfig: Partial<TextToParticleOptions>): void;
|
|
100
|
+
destroy(): void;
|
|
101
|
+
}
|
|
102
|
+
export default TextToParticle;
|
|
103
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,EAAE,MAAM,CAAC;CACX;AAoBD,qBAAa,cAAc;IACzB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC,CAAC,GAAG;QACxF,OAAO,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;QAC1C,QAAQ,EAAE,qBAAqB,CAAC,UAAU,CAAC,CAAC;KAC7C,CAAC;IACF,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,wBAAwB,CAAC;IAC9B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,wBAAwB,CAAC;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAG,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3F,sBAAsB,EAAG,CAAC,SAAS,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;gBAEjE,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,GAAE,qBAA0B;IA4EhF,IAAI,IAAI,IAAI;IAUZ,sBAAsB,IAAI,IAAI;IAY9B,MAAM,IAAI,IAAI;IAsCd;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAgCtB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAmC3B,YAAY,IAAI,IAAI;IAuGpB,YAAY,IAAI,QAAQ;IAiBxB,aAAa,IAAI,IAAI;IAcrB,OAAO,IAAI,IAAI;IAiBf,KAAK,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,GAAG,IAAI;IAM3E,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,GAAG,IAAI;IAuBpF,MAAM,IAAI,IAAI;IAqDd,OAAO,IAAI,IAAI;IAMf,KAAK,IAAI,IAAI;IAMb,IAAI,IAAI,IAAI;IAQZ,mBAAmB,IAAI,IAAI;IAQ3B,oBAAoB,IAAI,IAAI;IAQ5B,YAAY,IAAI,IAAI;IAIpB,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAMpC,gBAAgB,IAAI,IAAI;IAIxB,eAAe,IAAI,IAAI;IAIvB,aAAa,IAAI,IAAI;IAKrB,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI;IAK7D,qBAAqB,CAAC,SAAS,EAAE,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI;IAQtE,OAAO,IAAI,IAAI;CAWhB;AAGD,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typing - 타이핑 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { Typing } from 'masoneffect/typing';
|
|
7
|
+
*/
|
|
8
|
+
import { VisibilityManager } from '../utils/visibilityManager.js';
|
|
9
|
+
export interface TypingOptions {
|
|
10
|
+
text: string;
|
|
11
|
+
speed?: number;
|
|
12
|
+
delay?: number;
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
threshold?: number;
|
|
15
|
+
rootMargin?: string;
|
|
16
|
+
triggerOnce?: boolean;
|
|
17
|
+
showCursor?: boolean;
|
|
18
|
+
cursorChar?: string;
|
|
19
|
+
onUpdate?: (text: string) => void;
|
|
20
|
+
onComplete?: () => void;
|
|
21
|
+
}
|
|
22
|
+
export declare class Typing {
|
|
23
|
+
container: HTMLElement;
|
|
24
|
+
config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
|
|
25
|
+
onUpdate: TypingOptions['onUpdate'];
|
|
26
|
+
onComplete: TypingOptions['onComplete'];
|
|
27
|
+
};
|
|
28
|
+
textUnits: string[];
|
|
29
|
+
charUnitRanges: Array<{
|
|
30
|
+
start: number;
|
|
31
|
+
end: number;
|
|
32
|
+
isHangul: boolean;
|
|
33
|
+
}>;
|
|
34
|
+
currentIndex: number;
|
|
35
|
+
displayedText: string;
|
|
36
|
+
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
37
|
+
visibilityManager: VisibilityManager | null;
|
|
38
|
+
isRunning: boolean;
|
|
39
|
+
hasTriggered: boolean;
|
|
40
|
+
originalText: string;
|
|
41
|
+
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
42
|
+
init(): void;
|
|
43
|
+
private injectStyles;
|
|
44
|
+
setupVisibilityManager(): void;
|
|
45
|
+
private buildTextFromUnits;
|
|
46
|
+
start(): void;
|
|
47
|
+
typeNext(): void;
|
|
48
|
+
stop(): void;
|
|
49
|
+
reset(): void;
|
|
50
|
+
updateDisplay(text: string): void;
|
|
51
|
+
private escapeHtml;
|
|
52
|
+
setText(newText: string): void;
|
|
53
|
+
destroy(): void;
|
|
54
|
+
}
|
|
55
|
+
export default Typing;
|
|
56
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAyFD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IA6CnE,IAAI,IAAI,IAAI;IAWZ,OAAO,CAAC,YAAY;IAuBpB,sBAAsB,IAAI,IAAI;IAmB9B,OAAO,CAAC,kBAAkB;IAgD1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAuChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAiDjC,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
|
|
3
|
+
* 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
|
|
4
|
+
*/
|
|
5
|
+
export interface VisibilityManagerOptions {
|
|
6
|
+
threshold?: number;
|
|
7
|
+
rootMargin?: string;
|
|
8
|
+
root?: HTMLElement | null;
|
|
9
|
+
onVisible?: () => void;
|
|
10
|
+
onHidden?: () => void;
|
|
11
|
+
}
|
|
12
|
+
export declare class VisibilityManager {
|
|
13
|
+
private container;
|
|
14
|
+
private options;
|
|
15
|
+
private intersectionObserver;
|
|
16
|
+
private visibilityChangeHandler;
|
|
17
|
+
private isVisible;
|
|
18
|
+
private isPageVisible;
|
|
19
|
+
constructor(container: HTMLElement, options?: VisibilityManagerOptions);
|
|
20
|
+
private setupIntersectionObserver;
|
|
21
|
+
private setupPageVisibility;
|
|
22
|
+
/**
|
|
23
|
+
* 현재 요소가 화면에 보이는지 확인
|
|
24
|
+
*/
|
|
25
|
+
getIsVisible(): boolean;
|
|
26
|
+
/**
|
|
27
|
+
* 옵션 업데이트
|
|
28
|
+
*/
|
|
29
|
+
updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
|
|
30
|
+
/**
|
|
31
|
+
* 리소스 정리
|
|
32
|
+
*/
|
|
33
|
+
destroy(): void;
|
|
34
|
+
}
|
|
35
|
+
export default VisibilityManager;
|
|
36
|
+
//# sourceMappingURL=visibilityManager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"visibilityManager.d.ts","sourceRoot":"","sources":["../../../../src/core/utils/visibilityManager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,oBAAoB,CAA8B;IAC1D,OAAO,CAAC,uBAAuB,CAAsB;IACrD,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,aAAa,CAAU;gBAEnB,SAAS,EAAE,WAAW,EAAE,OAAO,GAAE,wBAA6B;IAkB1E,OAAO,CAAC,yBAAyB;IAuCjC,OAAO,CAAC,mBAAmB;IA+B3B;;OAEG;IACH,YAAY,IAAI,OAAO;IAIvB;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,IAAI;IAWlE;;OAEG;IACH,OAAO,IAAI,IAAI;CAUhB;AAED,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,"t",{value:!0});class t{constructor(t,s={}){this.container=t,this.options={threshold:s.threshold??.1,rootMargin:s.rootMargin??"0px",root:s.root??null,onVisible:s.onVisible,onHidden:s.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)s.target===this.container&&(s.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}class s{constructor(t,s){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");if(!s.text)throw new Error("Text is required");this.config={text:s.text,delay:s.delay??.2,duration:s.duration??.6,randomDelay:s.randomDelay??2,threshold:s.threshold??.1,rootMargin:s.rootMargin??"0px",root:s.root??null,triggerOnce:s.triggerOnce??!1,enabled:s.enabled??!0,onStart:s.onStart||null,onComplete:s.onComplete||null},this.visibilityManager=null,this.textElements=[],this.randomPoints=[],this.hasTriggered=!1,this.isActive=!1,this.init()}init(){this.injectStyles(),this.createTextStructure(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-textspin-styles"))return;const t=document.createElement("style");t.id="masoneffect-textspin-styles",t.textContent=`\n .masoneffect-textspin {\n display: inline-block;\n }\n .masoneffect-textspin-char {\n display: inline-block;\n opacity: 0;\n transform: rotateY(90deg);\n transition: opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out;\n }\n .masoneffect-textspin-char.active {\n opacity: 1;\n transform: rotateY(0deg);\n }\n .masoneffect-textspin-char.space {\n width: 0.25em;\n }\n `,document.head.appendChild(t)}createTextStructure(){this.container.innerHTML="",this.textElements=[],this.randomPoints=[];const t=this.config.text.split("");t.forEach(()=>{this.randomPoints.push(Math.random())}),t.forEach((t,s)=>{const i=document.createElement("span");i.className="masoneffect-textspin-char"," "===t?(i.classList.add("space"),i.innerHTML=" "):i.textContent=t,this.container.appendChild(i),this.textElements.push(i)}),this.container.classList.add("masoneffect-textspin")}setupVisibilityManager(){this.visibilityManager=new t(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1))}})}start(){if(this.isActive)return;this.isActive=!0,this.config.onStart&&this.config.onStart(),this.textElements.forEach((t,s)=>{const i=this.config.delay+this.randomPoints[s]*this.config.randomDelay;t.style.transitionDelay=`${i}s`,requestAnimationFrame(()=>{t.classList.add("active")})});const t=this.config.delay+this.config.randomDelay+this.config.duration;setTimeout(()=>{this.config.onComplete&&this.config.onComplete()},1e3*t)}stop(){this.isActive&&(this.isActive=!1,this.textElements.forEach(t=>{t.classList.remove("active"),t.style.transitionDelay=""}))}reset(){this.stop(),this.hasTriggered=!1}updateText(t){this.config.text=t,this.createTextStructure(),this.isActive&&this.start()}updateConfig(t){const s=this.isActive;this.stop(),this.config={...this.config,...t,text:t.text??this.config.text,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},void 0!==t.text&&this.createTextStructure(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),s&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.innerHTML="",this.container.classList.remove("masoneffect-textspin")}}exports.TextSpin=s,exports.default=s;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MasonEffect - 메인 엔트리 포인트
|
|
3
|
+
*
|
|
4
|
+
* 주의: tree-shaking을 위해 각 이펙트를 직접 import하는 것을 권장합니다:
|
|
5
|
+
* - import { TextToParticle } from 'masoneffect/textToParticle'
|
|
6
|
+
* - import { Count } from 'masoneffect/count'
|
|
7
|
+
*
|
|
8
|
+
* 이 파일은 하위 호환성을 위해 제공됩니다.
|
|
9
|
+
*/
|
|
10
|
+
export { TextToParticle, MasonEffect } from './core/index.js';
|
|
11
|
+
export type { TextToParticleOptions, MasonEffectOptions, Particle } from './core/index.js';
|
|
12
|
+
export { Count } from './core/index.js';
|
|
13
|
+
export type { CountOptions } from './core/index.js';
|
|
14
|
+
export { easingFunctions } from './core/index.js';
|
|
15
|
+
export { Typing } from './core/index.js';
|
|
16
|
+
export type { TypingOptions } from './core/index.js';
|
|
17
|
+
export { ScrollFadeIn } from './core/index.js';
|
|
18
|
+
export type { ScrollFadeInOptions } from './core/index.js';
|
|
19
|
+
export { TextSpin } from './core/index.js';
|
|
20
|
+
export type { TextSpinOptions } from './core/index.js';
|
|
21
|
+
export { default } from './core/index.js';
|
|
22
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
|