11_scrollEffect

1. 스크롤 효과를 만들어보자

1.1. 1단계-섹션1

1.1.1. 좌우이동 - css 메서드 활용

1.2. 2단계-섹션2

1.2.1. 상하이동 시간차-animate() 메서드 활용

1.3. 3단계-섹션3

1.3.1. 리빌효과-addClass() 메서드 활용

마스크효과를 구현해보자

1.4. 4단계-섹션4

1.4.1. PIP스크롤

화면안의 화면이 스크롤 되는 효과를 만들어보자

1.4.2. PIP스크롤 발전형

여러 섹션에서 사용할수 사용할수 있도록 함수를 수정한다.

위의 코드는 화면에는 보이지 않지만 버그가 있다. ['.mockup.pc', '.mockup.mobile'] 에는 단일 요소가 할당 되었으므로두개의 mockup.pc 가 추가 될 경우 각각 동작하지 않는다. 이것을 제이쿼리 객체로 변경하면 여러개 요소를 알아서 반복 처리 하기 때문에 각각 다른 이벤트를 처리할수 있다. 아래처럼 수정하자

  function pipScroll() {
    //const devices = ['.mockup.pc', '.mockup.mobile'];
    const devices = $('.mockup.pc, .mockup.mobile');
    //$.each(devices, function (i, deviceEl) {
    devices.each(function (i, deviceEl) {
      let device = $(this);
      let screen = device.find('.mask>img');

1.5. 가로 스크롤 효과