Video Scrolling

[boseong-kang]

import type { ComponentType } from "react"
import { useEffect } from "react"
import { useScroll, useTransform } from "framer-motion"

export function videoScrollProgress(Component): ComponentType {
    const SCROLL_START = 0 // Scroll position when animation starts
    const SCROLL_DISTANCE = 600 // Scroll distance after which animation ends
    const SCROLL_END = SCROLL_START + SCROLL_DISTANCE

    return (props) => {
        // useScroll() returns the current scroll position
        const { scrollY } = useScroll()

        // Calculate the scroll progress from 0 to 1
        const progress = useTransform(
            scrollY,
            [SCROLL_START, SCROLL_END],
            [0, 1]
        )

        // Pass the progress as a prop to the original component
        return <Component {...props} progress={progress} />
    }

[dongwoodev]

import type { ComponentType } from "react"
import { useEffect } from "react"
import { useScroll, useTransform } from "framer-motion"

export function videoScrollProgress(Component): ComponentType {
    const SCROLL_START = 0 // Scroll position when animation starts
    const SCROLL_DISTANCE = 600 // Scroll distance after which animation ends
    const SCROLL_END = SCROLL_START + SCROLL_DISTANCE

    return (props) => {
        // useScroll() returns the current scroll position
        const { scrollY } = useScroll()

        // Calculate the scroll progress from 0 to 1
        const progress = useTransform(
            scrollY,
            [SCROLL_START, SCROLL_END],
            [0, 1]
        )

        // Pass the progress as a prop to the original component
        return <Component {...props} progress={progress} />
    }

리액트가 자바스크립트의 라이브러리라서 javascript로 인식해야합니다

[dongwoodev]

카카오톡 공유 API 차이

• 카카오톡 공유 API : 친구 또는 대화 목록에 메세지
• 카카오톡 메시지 API : 친구 목록에 있는 친구만 개인적으로 메시지

한번 해보자

1. 애플리케이션 페이지에서 템플릿을 만든다.