masoneffect 2.0.5 → 2.0.6

package/dist/vue/scrollFadeIn/index.mjs

@@ -0,0 +1,447 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
+class VisibilityManager {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      onVisible: options.onVisible,
+      onHidden: options.onHidden
+    };
+    this.intersectionObserver = null;
+    this.visibilityChangeHandler = null;
+    this.isVisible = false;
+    this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
+    this.setupIntersectionObserver();
+    this.setupPageVisibility();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      this.isVisible = true;
+      if (this.isPageVisible && this.options.onVisible) {
+        this.options.onVisible();
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            if (this.isPageVisible && this.options.onVisible) {
+              this.options.onVisible();
+            }
+          } else {
+            this.isVisible = false;
+            if (this.options.onHidden) {
+              this.options.onHidden();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.options.threshold,
+        rootMargin: this.options.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  setupPageVisibility() {
+    if (typeof document === "undefined") return;
+    this.visibilityChangeHandler = () => {
+      const wasVisible = this.isPageVisible;
+      this.isPageVisible = !document.hidden;
+      if (document.hidden) {
+        if (this.options.onHidden) {
+          this.options.onHidden();
+        }
+      } else if (wasVisible !== this.isPageVisible) {
+        if (this.isVisible && this.options.onVisible) {
+          this.options.onVisible();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    if (document.hidden && this.isVisible) {
+      if (this.options.onHidden) {
+        this.options.onHidden();
+      }
+    }
+  }
+  /**
+   * 현재 요소가 화면에 보이는지 확인
+   */
+  getIsVisible() {
+    return this.isVisible && this.isPageVisible;
+  }
+  /**
+   * 옵션 업데이트
+   */
+  updateOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    this.setupIntersectionObserver();
+  }
+  /**
+   * 리소스 정리
+   */
+  destroy() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+  }
+}
+const easingFunctions = {
+  easeOutCubic: (t) => --t * t * t + 1
+};
+class ScrollFadeIn {
+  // 계산된 거리 (px)
+  constructor(container, options = {}) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.config = {
+      direction: options.direction ?? "bottom",
+      distance: options.distance ?? "50px",
+      duration: options.duration ?? 800,
+      easing: options.easing ?? easingFunctions.easeOutCubic,
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      triggerOnce: options.triggerOnce ?? false,
+      enabled: options.enabled ?? true,
+      onStart: options.onStart || null,
+      onComplete: options.onComplete || null
+    };
+    this.visibilityManager = null;
+    this.animationFrameId = null;
+    this.startTime = null;
+    this.isRunning = false;
+    this.hasTriggered = false;
+    this.initialTransform = "";
+    this.targetDistance = 0;
+    this.init();
+  }
+  init() {
+    const computedStyle = window.getComputedStyle(this.container);
+    this.initialTransform = computedStyle.transform !== "none" ? computedStyle.transform : this.container.style.transform || "";
+    this.targetDistance = this.parseDistance(this.config.distance);
+    this.setInitialPosition();
+    this.setupVisibilityManager();
+  }
+  parseDistance(distance) {
+    const match = distance.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);
+    if (!match) {
+      const num = parseFloat(distance) || 50;
+      return num;
+    }
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    switch (unit) {
+      case "px":
+        return value;
+      case "rem":
+      case "em":
+        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        return value * fontSize;
+      case "%":
+        const rect = this.container.getBoundingClientRect();
+        const dimension = this.config.direction === "top" || this.config.direction === "bottom" ? rect.height : rect.width;
+        return value / 100 * dimension;
+      case "vh":
+        return value / 100 * window.innerHeight;
+      case "vw":
+        return value / 100 * window.innerWidth;
+      default:
+        return value;
+    }
+  }
+  setInitialPosition() {
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance;
+        break;
+      case "right":
+        translateX = this.targetDistance;
+        break;
+      case "bottom":
+        translateY = this.targetDistance;
+        break;
+      case "left":
+        translateX = -this.targetDistance;
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = "0";
+    this.container.style.transition = "none";
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          this.start();
+        }
+      },
+      onHidden: () => {
+        if (!this.config.triggerOnce && this.isRunning) {
+          this.reset();
+        }
+      }
+    });
+  }
+  start() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.startTime = performance.now();
+    if (this.config.onStart) {
+      this.config.onStart();
+    }
+    this.container.style.transition = "none";
+    this.animate();
+  }
+  animate() {
+    if (!this.isRunning) return;
+    const currentTime = performance.now();
+    const elapsed = currentTime - (this.startTime || 0);
+    const progress = Math.min(elapsed / this.config.duration, 1);
+    const easedProgress = this.config.easing(progress);
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance * (1 - easedProgress);
+        break;
+      case "right":
+        translateX = this.targetDistance * (1 - easedProgress);
+        break;
+      case "bottom":
+        translateY = this.targetDistance * (1 - easedProgress);
+        break;
+      case "left":
+        translateX = -this.targetDistance * (1 - easedProgress);
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = String(easedProgress);
+    if (progress < 1) {
+      this.animationFrameId = requestAnimationFrame(() => this.animate());
+    } else {
+      this.complete();
+    }
+  }
+  complete() {
+    this.isRunning = false;
+    if (this.initialTransform && this.initialTransform !== "none") {
+      this.container.style.transform = this.initialTransform;
+    } else {
+      this.container.style.transform = "";
+    }
+    this.container.style.opacity = "1";
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    if (this.config.onComplete) {
+      this.config.onComplete();
+    }
+  }
+  reset() {
+    this.stop();
+    this.hasTriggered = false;
+    this.setInitialPosition();
+  }
+  stop() {
+    this.isRunning = false;
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasRunning = this.isRunning;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      easing: newConfig.easing ?? this.config.easing,
+      onStart: newConfig.onStart ?? this.config.onStart,
+      onComplete: newConfig.onComplete ?? this.config.onComplete
+    };
+    if (newConfig.distance) {
+      this.targetDistance = this.parseDistance(this.config.distance);
+    }
+    this.setInitialPosition();
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0) {
+      if (this.visibilityManager) {
+        this.visibilityManager.destroy();
+        this.visibilityManager = null;
+      }
+      this.setupVisibilityManager();
+    }
+    if (wasRunning && this.config.enabled) {
+      this.start();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
+    }
+    this.container.style.transform = this.initialTransform || "";
+    this.container.style.opacity = "";
+    this.container.style.transition = "";
+  }
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ScrollFadeIn",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    direction: { default: "bottom" },
+    distance: { default: "50px" },
+    duration: { default: 800 },
+    easing: { type: Function, default: () => (t) => t },
+    threshold: { default: 0.1 },
+    rootMargin: { default: "0px" },
+    triggerOnce: { type: Boolean, default: false },
+    enabled: { type: Boolean, default: true },
+    onStart: { type: Function, default: null },
+    onComplete: { type: Function, default: null }
+  },
+  emits: ["start", "complete"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const container = ref(null);
+    let instance = null;
+    const init = () => {
+      if (!container.value) return;
+      const options = {
+        direction: props.direction,
+        distance: props.distance,
+        duration: props.duration,
+        easing: props.easing,
+        threshold: props.threshold,
+        rootMargin: props.rootMargin,
+        triggerOnce: props.triggerOnce,
+        enabled: props.enabled,
+        onStart: () => {
+          if (props.onStart) props.onStart();
+          emit("start");
+        },
+        onComplete: () => {
+          if (props.onComplete) props.onComplete();
+          emit("complete");
+        }
+      };
+      instance = new ScrollFadeIn(container.value, options);
+    };
+    watch(
+      () => [
+        props.direction,
+        props.distance,
+        props.duration,
+        props.easing,
+        props.threshold,
+        props.rootMargin,
+        props.triggerOnce,
+        props.enabled
+      ],
+      () => {
+        if (instance) {
+          instance.updateConfig({
+            direction: props.direction,
+            distance: props.distance,
+            duration: props.duration,
+            easing: props.easing,
+            threshold: props.threshold,
+            rootMargin: props.rootMargin,
+            triggerOnce: props.triggerOnce,
+            enabled: props.enabled,
+            onStart: () => {
+              if (props.onStart) props.onStart();
+              emit("start");
+            },
+            onComplete: () => {
+              if (props.onComplete) props.onComplete();
+              emit("complete");
+            }
+          });
+        }
+      }
+    );
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    __expose({
+      start: () => {
+        if (instance) instance.start();
+      },
+      stop: () => {
+        if (instance) instance.stop();
+      },
+      reset: () => {
+        if (instance) instance.reset();
+      },
+      updateConfig: (config) => {
+        if (instance) instance.updateConfig(config);
+      },
+      destroy: () => {
+        if (instance) {
+          instance.destroy();
+          instance = null;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        class: normalizeClass(__props.className),
+        style: normalizeStyle(__props.style)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/vue/textToParticle/index.d.ts

@@ -36,13 +36,15 @@ export declare interface CountOptions {
     onComplete?: () => void;
 }
 
-export declare const easingFunctions: {
+declare const easingFunctions: {
     linear: (t: number) => number;
     easeInQuad: (t: number) => number;
     easeOutQuad: (t: number) => number;
     easeInOutQuad: (t: number) => number;
     easeOutCubic: (t: number) => number;
 };
+export { easingFunctions }
+export { easingFunctions as scrollFadeInEasingFunctions }
 
 export declare interface Particle {
     x: number;
@@ -56,6 +58,47 @@ export declare interface Particle {
     j: number;
 }
 
+export declare class ScrollFadeIn {
+    container: HTMLElement;
+    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'easing'>> & {
+        easing: (t: number) => number;
+        onStart: ScrollFadeInOptions['onStart'];
+        onComplete: ScrollFadeInOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    animationFrameId: number | null;
+    startTime: number | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    initialTransform: string;
+    targetDistance: number;
+    constructor(container: HTMLElement | string, options?: ScrollFadeInOptions);
+    init(): void;
+    parseDistance(distance: string): number;
+    setInitialPosition(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    animate(): void;
+    complete(): void;
+    reset(): void;
+    stop(): void;
+    updateConfig(newConfig: Partial<ScrollFadeInOptions>): void;
+    destroy(): void;
+}
+
+export declare interface ScrollFadeInOptions {
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    distance?: string;
+    duration?: number;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
 declare class TextToParticle {
     container: HTMLElement;
     config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {

package/dist/vue/typing/index.d.ts

@@ -36,13 +36,15 @@ export declare interface CountOptions {
     onComplete?: () => void;
 }
 
-export declare const easingFunctions: {
+declare const easingFunctions: {
     linear: (t: number) => number;
     easeInQuad: (t: number) => number;
     easeOutQuad: (t: number) => number;
     easeInOutQuad: (t: number) => number;
     easeOutCubic: (t: number) => number;
 };
+export { easingFunctions }
+export { easingFunctions as scrollFadeInEasingFunctions }
 
 export declare interface Particle {
     x: number;
@@ -56,6 +58,47 @@ export declare interface Particle {
     j: number;
 }
 
+export declare class ScrollFadeIn {
+    container: HTMLElement;
+    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'easing'>> & {
+        easing: (t: number) => number;
+        onStart: ScrollFadeInOptions['onStart'];
+        onComplete: ScrollFadeInOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    animationFrameId: number | null;
+    startTime: number | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    initialTransform: string;
+    targetDistance: number;
+    constructor(container: HTMLElement | string, options?: ScrollFadeInOptions);
+    init(): void;
+    parseDistance(distance: string): number;
+    setInitialPosition(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    animate(): void;
+    complete(): void;
+    reset(): void;
+    stop(): void;
+    updateConfig(newConfig: Partial<ScrollFadeInOptions>): void;
+    destroy(): void;
+}
+
+export declare interface ScrollFadeInOptions {
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    distance?: string;
+    duration?: number;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
 declare class TextToParticle {
     container: HTMLElement;
     config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with Tree-shaking support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -26,6 +26,11 @@
       "require": "./dist/typing/index.cjs",
       "types": "./dist/typing/index.d.ts"
     },
+    "./scrollFadeIn": {
+      "import": "./dist/scrollFadeIn/index.mjs",
+      "require": "./dist/scrollFadeIn/index.cjs",
+      "types": "./dist/scrollFadeIn/index.d.ts"
+    },
     "./react": {
       "import": "./dist/react/index.mjs",
       "require": "./dist/react/index.cjs",
@@ -46,6 +51,11 @@
       "require": "./dist/react/typing/index.cjs",
       "types": "./dist/react/typing/index.d.ts"
     },
+    "./react/scrollFadeIn": {
+      "import": "./dist/react/scrollFadeIn/index.mjs",
+      "require": "./dist/react/scrollFadeIn/index.cjs",
+      "types": "./dist/react/scrollFadeIn/index.d.ts"
+    },
     "./vue": {
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs",
@@ -66,6 +76,11 @@
       "require": "./dist/vue/typing/index.cjs",
       "types": "./dist/vue/typing/index.d.ts"
     },
+    "./vue/scrollFadeIn": {
+      "import": "./dist/vue/scrollFadeIn/index.mjs",
+      "require": "./dist/vue/scrollFadeIn/index.cjs",
+      "types": "./dist/vue/scrollFadeIn/index.d.ts"
+    },
     "./svelte": {
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.cjs",
@@ -85,21 +100,28 @@
       "import": "./dist/svelte/typing/index.mjs",
       "require": "./dist/svelte/typing/index.cjs",
       "types": "./dist/svelte/typing/index.d.ts"
+    },
+    "./svelte/scrollFadeIn": {
+      "import": "./dist/svelte/scrollFadeIn/index.mjs",
+      "require": "./dist/svelte/scrollFadeIn/index.cjs",
+      "types": "./dist/svelte/scrollFadeIn/index.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && node scripts/generate-react-types.js",
+    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:vue:scrollFadeIn && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && npm run build:svelte:scrollFadeIn && node scripts/generate-react-types.js",
     "build:vue": "vite build --config vite.config.vue.mjs",
     "build:vue:textToParticle": "vite build --config vite.config.vue.textToParticle.mjs",
     "build:vue:count": "vite build --config vite.config.vue.count.mjs",
     "build:vue:typing": "vite build --config vite.config.vue.typing.mjs",
+    "build:vue:scrollFadeIn": "vite build --config vite.config.vue.scrollFadeIn.mjs",
     "build:svelte": "vite build --config vite.config.svelte.mjs",
     "build:svelte:textToParticle": "vite build --config vite.config.svelte.textToParticle.mjs",
     "build:svelte:count": "vite build --config vite.config.svelte.count.mjs",
     "build:svelte:typing": "vite build --config vite.config.svelte.typing.mjs",
+    "build:svelte:scrollFadeIn": "vite build --config vite.config.svelte.scrollFadeIn.mjs",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",
@@ -112,6 +134,8 @@
     "particles",
     "morphing",
     "count",
+    "scroll-fade-in",
+    "scroll-reveal",
     "canvas",
     "react",
     "vue",