웹퍼블리셔 활용 2일차 - 스크롤 예제 1 완성

컨텐츠의 갯수를 변수화

  <main>
    <section class="con"><h2>01</h2></section> <!--컨텐츠에 class 주기-->
    <section class="con"><h2>02</h2></section>
    <section class="con"><h2>03</h2></section>
    <section class="con"><h2>04</h2></section>
    <section class="con"><h2>05</h2></section>
  </main>

let num = 0;
let inter, delta;
let count = $('.con').length; // 컨텐츠의 갯수를 변수화

$(window).on('mousewheel', function (e) {
  delta = e.originalEvent.wheelDelta;
  clearTimeout(inter);
  inter = setTimeout(function () {
    if (delta < 0) {
      if (num != count-1) num++; // 페이지가 더 넘어가지 않게 하는 조건에 변수 사용
    } else {
      if (num != 0) num--;
    }

    $('main').css({
      transform: `translateY(-${100 * num}vh)`
    });
  }, 100);
});

 

제이쿼리.html

html() html안의 값을 가져오거나

html(추가) html안의 요소를 추가로 변경함

for(let i = 0; i<count; i++){
  $('aside').html('<a></a>'); // aside 태그 안에 a태그가 넣어짐
}

 

제이쿼리.append

for(let i = 0; i<count; i++){
  $('aside').append('<a></a>'); // .append를 사용 > 추가
}

 

a태그를 추가하고 페이지에 맞춰 내비게이터가 활성화 되게 하기

let num = 0;
let inter, delta;
let count = $('.con').length;
for (let i = 0; i < count; i++) {
  $('aside').append('<a></a>');
}
$('aside a').eq(num).addClass('active'); // 내비게이터 첫번째 active 태그
function playAni() { // 페이지 이동과 active 클래스 함수 선언
  $('main').css({
    transform: `translateY(-${100 * num}vh)`
  });
  $('aside a').removeClass('active');
  $('aside a').eq(num).addClass('active'); // 내비게이터 순서에 num 넣기
}
$(window).on('mousewheel', function (e) {
  delta = e.originalEvent.wheelDelta;
  clearTimeout(inter);
  inter = setTimeout(function () {
    if (delta < 0) {
      if (num != count - 1) num++;
    } else {
      if (num != 0) num--;
    }
    playAni(); // 함수 실행
  }, 100);
});

 

내비게이터를 클릭하면 페이지 이동하기

$('aside a').on('click', function(){
  num = $(this).index(); // 클릭한 a 태그의 인덱스를 받아와 num에 넣기
  playAni();
})

 

파이어폭스를 위해 속성 추가

$(window).on('mousewheel DOMMouseScroll', function (e) { // DOMMouseScroll 추가
  delta = e.originalEvent.wheelDelta;
  clearTimeout(inter);
  inter = setTimeout(function () {
    if (delta < 0) {
      if (num != count - 1) num++;
    } else {
      if (num != 0) num--;
    }
    playAni();
  }, 100);
});

 

파이어폭스는 스크롤했을 때 값이 달라서 코드 추가

  if(e.type=='mousewheel'){
    delta = e.originalEvent.wheelDelta; // 크롬 : 휠을 내리면 값이 +
  }else {
    delta = -e.originalEvent.detail; // 파이어폭스 : 휠을 내리면 detail값이 -, 앞에 -추가
  }

  delta = e.originalEvent.wheelDelta || -e.originalEvent.detail; // 이렇게도 가능

 

이벤트의 전파 차단

event.preventDeFualt();