Haroop Webagency team BICTOR

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

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

제목
이미지 특정영역 스크롤 뒤에 다음 섹션으로 처리
작성자
코알라
작성일
2022-05-27 10:52
조회
202
답변완료
안녕하세요 현재 앱 본사 홈페이지 관련 질문입니다.
이미지 특정영역 스크롤 뒤 다음 섹션으로 넘어가게끔 처리를 해야되는데

@keyframes bictormove{
from{top:~~~~~}
to{top:~~~~~~~;backgorund~~~~~~~~~}
}

이런식으로 bictormove라는 키프레임을 짠뒤에 이것을 css로 애니메이션 처리를 하였습니다.
그리고 스크롤액션 뒤에 이 bictormove가 실행되게끔 짰는데

다음 섹션으로 내리는 처리를, 전체 엘리먼트를 아예 내려버리는 방법을 썼는데
이게 보이는 시야도 함께 내려야 하는데, 엘리멘트만 내려가네요..ㅠ
전체까지 내려가게끔 해야되는데.....ㅠㅠ

제가 너무 어렵게 접근하는것일까요?ㅠㅠ 아니면 화면 자체가 키프레임을 설정한곳을 따라가게끔(?)
이런식으로 구현하려면 어떻게 해야할까요?ㅠ
전체 1

  • 2022-05-27 13:07

    안녕하세요 키프레임을 잡아서 내리면, 해당 부분에 엘리먼트가 움직이고
    화면이 움직이는것은 아닙니다. 접근법을 다르게 하셔야 할거같아요.
    우선 풀페이지 플러그인을 설치후 아래 소스를 입력해보시면

    div id="fullpage"
    div class="section"Section 1 /div
    div class="section"
    div class="slide" Slide 2.1 /div
    div class="slide" Slide 2.2 /div
    div class="slide" Slide 2.3 /div
    /div>
    div class="section">Section 3 /div
    /div

    new fullpage('#fullpage', {
    waterEffect: true,
    waterEffectOptions: [...],
    onLeave: function(origin, destination, direction){
    console.log("Leaving section" + origin.index);
    },
    navigation: true
    });

    페이지들이 하나하나 움직이고 구현이 되실겁니다.

    자세한 사항은 아래에 링크를 확인해보시고 소스를 짜보시면 되실거같아요
    https://github.com/alvarotrigo/fullPage.js
    https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Water-Effect