React Parallax Scrolling 웹 디자인 솔루션

React Parallax Scrolling 웹 디자인 솔루션

Teachable 과정을 찾아보십시오.

우리가 작업하고 있는 일반적인 솔루션은 다음과 같습니다.

우리는 HOC(Higher Order Component)를 생성할 것입니다.

JSX 요소를 사용하는 함수입니다.

전. highOrderFunction()

그런 다음 JSX 구성 요소를 반환합니다.

전. ParallaxComponent

그런 다음 다음과 같이 페이지에 렌더링합니다.

시차의 논리는 다음과 같습니다.

페이지에 JSX 요소를 고정할 것입니다(이 경우 원 모양의 DIV).

페이지를 아래로 스크롤하면 JSX 요소가 위로 스크롤됩니다.

요소를 수동으로 위로 스크롤하므로 이동 속도를 제어할 수 있습니다.

이것은 우리의 시차 효과를 만듭니다.

화면에 JSX를 표시해 보겠습니다.

간단한 'div'.

return (
    <div>
        <img src="./back.png" alt="" />
        <div style={styles.obj}></div>
    </div>
);

원으로 스타일을 지정하겠습니다.

obj: {
    margin: 0,
    padding: 0,
    height: '200px',
    width: '200px',
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    borderRadius: '50%',
    backgroundColor: '#0083FF',
    boxShadow: '0px 0px 20px 10px #0083FF'
}

Higher-Order Component를 작성해 봅시다.

시차 애니메이션을 구현하려면 6개의 변수가 필요합니다.

JSXElement - HOC에 전달하는 JSX 요소

start_position - 문서/페이지 상단을 기준으로 이 요소가 시작되는 위치(y 위치)

ease - 페이지와 관련하여 JSX 요소 스크롤 속도를 제어합니다

.

last_offset - 전체적으로 얼마나 위 또는 아래로 스크롤했는지 추적합니다

.

animation_running - requestAnimationFrame() 루프를 시작하고 중지하는 데 사용합니다

.

5가지 주요 단계.

참조를 만듭니다.

const ref = React.createRef();

해당 참조를 복제본에 추가하는 동안 JSX 요소를 복제합니다.

const JSXElementWithRef = React.cloneElement(
    JSXElement,
    { ...JSXElement.props, ref: ref },
)

새 JSX 구성 요소를 클래스 구성 요소의 상태로 저장합니다.

this.setState({
    ease: _weight,
    WrappedJSXElement: JSXElementWithRef
}, () => {
    this.setState({ start_position: ref.current.offsetTop }, () => {
        this.wrappedJSXElement = ref;
        document.addEventListener("scroll", this.animate_scroll);
    });
});

HOC 파일에서 새 구성 요소를 렌더링합니다.

render() {
    return (
        <Fragment>
            {this.state.WrappedJSXElement}
        </Fragment>
    )
}

애니메이션 루프의 로직을 구축합니다.

페이지를 스크롤할 때마다 JSX 요소를 스크롤하려고 합니다.

휠을 100번 클릭하면 JSX 요소도 100번 스크롤하라는 요청을 입력해야 합니다.

animate_scroll = () => {
    if (!this.animation_running) {
        this.animation_running = true;
        requestAnimationFrame(this.animation_loop);
    }
}

실제 애니메이션 루프...

animation_loop = () => {
    let current_offset = window.pageYOffset;

    let difference = current_offset - this.last_offset;
    difference *= this.state.ease;

    if (Math.abs(difference) < 0.05) {
        this.last_offset = current_offset;
        this.animation_running = false;
        return;
    }

    this.wrappedJSXElement.current.style.top = `${this.state.start_position - this.last_offset}px`;

    this.last_offset += difference;

    requestAnimationFrame(this.animation_loop);
}

여기서는 4가지 주요 작업을 수행합니다(이 순서가 아님).

문서의 현재 위치와 페이지/문서 상단 간의 차이를 계산합니다.

페이지가 시작되는 곳.



차이를 계산하는 방법.

그 차이만큼 JSX 요소를 이동합니다. (*차이에 **시차 효과 생성 용이성 ***이 곱해집니다.)

애니메이션에 대해 다른 루프를 요청합니다.

애니메이션 루프에 대한 종료 절은 차이가 0.05 미만인 경우입니다. 기본적으로 JSX 요소가 목적지에 도달한 경우입니다.

모든 유형의 JSX 요소에 대해 이 논리를 사용할 수 있습니다.

DIV, 단락, 범위, 이미지...

소스 파일here을 가져올 수 있습니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

React Parallax Scrolling 웹 디자인 솔루션