JavaScript 패럴랙스 스크롤링 효과

4274 단어 uxdesignwebdevjavascript

JavaScript 패럴랙스 스크롤링 효과




Teachable 과정을 찾아보십시오.






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



페이지의 HTML 요소(이 경우 원 모양의 DIV)를 수정합니다.

페이지를 아래로 스크롤하면 HTML 요소를 수동으로 위로 스크롤합니다.

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

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

HTML과 CSS를 작성해봅시다.



페이지를 정규화하고 세로로 길게 만들어 스크롤 공간을 확보합니다.

body {
    overflow-x: hidden;
    width: 100vw;
    height: 300vh;
    background-size: contain;
    background-image: url('./back.png');
}


DIV 생성...

<body>
    <div class="orb"></div>
</body>


원으로 스타일을 지정할 것입니다.

.orb {
    margin: 0;
    padding: 0;
    height: 200px;
    width: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #0083FF;
    box-shadow: 0px 0px 20px 10px #0083FF;
}



자바스크립트로 넘어갑시다.



이 프로젝트에는 6개의 변수가 필요합니다.




const orb = document.querySelector('.orb'),
    ease = 0.05,
    start_position = orb.offsetTop;

let scroll_request = 0,
    total_offset = 0,
    animation_running = false;



  • orb - 이동할 HTML 요소

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

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

  • scroll_request - 페이지를 스크롤할 때 프로그램에 HTML 요소를 스크롤하도록 지시하려고 합니다
    • .

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

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

    애니메이션 루프를 시작하기 위한 로직을 구축해 봅시다.




    function animate_scroll() {
    scroll_request++;

    if (!animation_running) {
        animation_running = true;
        animation_loop();
    }
}


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

    휠을 100번 클릭하면 HTML 요소도 100번 스크롤하도록 요청해야 합니다.

    scroll_request++;


    현재 실행 중인 애니메이션 루프가 없으면 루프를 시작합니다. animation_running을 true로 전환해야 합니다.

    if (!animation_running) {
    animation_running = true;
    animation_loop();
}


    실제 애니메이션 루프를 만들어 봅시다.




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

    let difference = current_offset - total_offset;
    different *= ease;

    if (Math.abs(difference) < 0.05) {
        scroll_request = 0;

        total_offset = current_offset;
        animation_running = false;
        return;
    }

    orb.style.top = `${start_position - total_offset}px`;
    total_offset += difference;

    requestAnimationFrame(animation_loop);
}


    여기서는 4가지 주요 작업을 수행합니다(이 순서가 아님).
  • 문서의 현재 위치와 페이지/문서 상단 간의 차이를 계산합니다.

    • 페이지가 시작되는 곳.



    차이를 계산하는 방법.


  • 그 차이만큼 HTML을 이동합니다. (*차이에 **시차 효과 생성 용이성 ***이 곱해집니다.)
  • 애니메이션에 대해 다른 루프를 요청합니다.
  • 애니메이션 루프에 대한 종료 절은 차이가 0.05 미만인 경우입니다. 기본적으로 HTML 요소가 목적지에 도달한 경우입니다.



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



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



    소스 파일here을 얻을 수 있습니다.


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



    JavaScript 패럴랙스 스크롤링 효과

    ABC 174 | C - Repsept
    Python 웹 스크래핑 escrever em arquivo json

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage