Haroop Webagency team BICTOR

원격 및 파견 개발팀분들을 위한 하룹소속 개발자전용 빅터 오픈소스 커뮤니티입니다

이곳은 하룹 개발팀 소속 직원들에 전체 개발기술력 및 전체 평균 능력치 강화를 위한, 빅터팀 리드개발자들에 오픈소스 개발 커뮤니티 공간입니다, 만약 고객이시라면 여기를 이용해주세요.

제목
애플홈페이지같은 효과 기능 어떻게 출력시키나요?
작성자
조던
작성일
2022-05-19 11:46
조회
188
답변완료
애플홈페이지같이 스크롤을 내리면서 다양한 효과를 내고싶은데, 스크롤 횟수별, 화면 위치별로 하나하나 자바스크립트로 지정해주는거 말고 좀 더 편하게 적용할수있는 방법이 있을까요?
전체 3
  • 2022-05-19 15:02

    안녕하세요 말씀하신부분 자바스크립트 예시를 짜본다면 아래와 같습니다.

    const html = document.documentElement;
    const canvas = document.getElementById("hero-lightpass");
    const context = canvas.getContext("2d");

    const frameCount = 148;
    const currentFrame = index => (
    `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`
    )

    const preloadImages = () => {
    for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
    }
    };

    const img = new Image()
    img.src = currentFrame(1);
    canvas.width=1158;
    canvas.height=770;
    img.onload=function(){
    context.drawImage(img, 0, 0);
    }

    const updateImage = index => {
    img.src = currentFrame(index);
    context.drawImage(img, 0, 0);
    }

    window.addEventListener('scroll', () => {
    const scrollTop = html.scrollTop;
    const maxScrollTop = html.scrollHeight - window.innerHeight;
    const scrollFraction = scrollTop / maxScrollTop;
    const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount)
    );

    requestAnimationFrame(() => updateImage(frameIndex + 1))
    });

    preloadImages()

    위에 코드를 참고하시면 쉽게 작성하실수있으실거같습니다

  • 2022-05-19 15:03

    https://codepen.io/j-v-w/pen/ZEbGzyv

    여기서 실제 작동하시는부분을 확인해보실 수 있습니다.

  • 2022-05-19 15:05

    스크롤 애니메이션마다 작성할수있는 코드들이 수십만개의 경우의 수가 발생될테니....
    우선 몇가지정도 계속 해보시면서 감을 잡으시는게 중요하실거같습니다.
    다양한 케이스를 몇번만 코딩하시다보면 그렇게 머리가 깨질정도로 어렵진 않으실거에요

« 병원 환자 문의폼에 유형들 일괄선택 후 일괄업데이트 개발도 가능할까요?
공용클래스를 만들어 sql쿼리에서 배열값을 출력시키려고 합니다. »
목록보기 답글쓰기
글수정 글삭제