티스토리 뷰

유료강의/국비지원

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

2021bong 2021. 10. 7. 19:41

배울 내용

 

event (touch, scroll, wheel, drag)

> 이런 이벤트들은 api를 활용할 수 있음

디바이스 최적화가 돼서 아주 잘 나오기 때문에 쓰는 것을 추천

 

string 제어

> 기본이 됨! form 제어할 때 도움이 됨

 

form 제어

> id pw 체크

 

storage

 

matchMedia(반응형)

 

ajax(xml, json)

 

canvas

.on

여러 이벤트에 걸쳐서 사용

동적인 이벤트에 사용함

$(window).on('mousewheel',function(){ // 마우스 휠을 돌리면
  console.log('yup') // 콘솔에 해당 내용을 출력
});

 

mousewheel

scroll하면 페이지가 맞춰서 넘어가게 하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/1-1.wheel.js"></script>
  <title>Document</title>
</head>
<body>
  <main>
    <section class="con"><h2>01</h2></section>
    <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>
  <aside class="indi">
  </aside>
  <style>
    ::-webkit-scrollbar{display: none}
    main{
      color: #d1bebe;
      transform: translateY(0);
      transition: .7s;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
    section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    section:nth-of-type(even){
      background-color: #d1bebe;
      color: #fff;
    }
    h2 {
      font-size: 5em;
    }
    .indi {
      position: fixed;
      right: 5%;
      top: 50%;
      transform: translateX(-50%);
    }
    .indi a{
      width: 15px;
      height: 15px;
      border: solid 2px #A69797;
      display: block;
      margin: 10px 0;
      border-radius: 10px;
    }
    .indi a.active{
     background-color: #A69797;
    }
  </style>
</body>
</html>

 

    main{
      color: #d1bebe;
      transform: translateY(0);
      transition: .7s;
      position: absolute; /*마우스휠을 해도 스크롤이 안 사라짐*/
      left: 0;
      top: 0;
      width: 100%;
    }

 

    main{
      color: #d1bebe;
      transform: translateY(0);
      transition: .7s;
      position: fixed; /*마우스 휠을 하면 스크롤이 사라짐. 컨텐츠가 떴으니까*/
      left: 0;
      top: 0;
      width: 100%;
    }

 

스크롤 감추기

::-webkit-scrollbar{display: none}
/*position: absolute일 때*/

 

let num = 0;
$(window).on('mousewheel', function(){ // 마우스휠을 돌릴 때
  num++;
  $('main').css({
    transform: `translateY(-${100 * num}vh)` // Y축을 변경시켜서 페이지가 올라가게 하기
  });
});

 

mousewheel과 scroll은 자꾸 여러번 발생함

그래서 이벤트를 한번만 일어나게 하기위해 아래 메소드를 사용

setTimeout()

clearTimeout()

let num = 0;
let inter;
$(window).on('mousewheel', function () {
  clearTimeout(inter);
  inter = setTimeout(function () {
    $('main').css({
      transform: `translateY(-${100 * num}vh)`
    });
  }, 100)
});

 

5페이지 이상 못 내려가게 하기

let num = 0;
let inter;
$(window).on('mousewheel', function () {
  clearTimeout(inter);
  inter = setTimeout(function () {
    if (num != 4) {
      num++;
    }
    $('main').css({
      transform: `translateY(-${100 * num}vh)`
    });
  }, 100)
});

 

이벤트 정보 확인하기

$(window).on('mousewheel', function (e) {
console.log(e)
});
// 찍어보고 디테일 값 가져오기
  
$(window).on('mousewheel', function (e) {
console.log(e.originalEvent.wheelDelta);
}
// 이 값을 사용할 것임

콘솔창에 originalEvent > deltaY: 100 와 wheelDelta: -120 값을 확인

wheelDelta가 휠을 아래로 돌리면 음수

휠을 위로 돌리면 양수

> 브라우저마다 값이 달라서 숫자값은 중요하지 않음

 

가이드 문서를 보고 사용해서 값을 받아서 사용가능!

 

 

let num = 0;
let inter, delta;
$(window).on('mousewheel', function (e) {
  delta = e.originalEvent.wheelDelta; // 마우스 휠 값 받아오기
  clearTimeout(inter);
  inter = setTimeout(function () {
    if (delta < 0) { // 스크롤을 올리는지 내리는지 알아내기
      if (num != 4) num++; // 5페이지 이상 내려가지 않게 하기
    } else {
      if (num != 0) num--; // 1페이지 이상 올라가지 않게 하기
    }
    $('main').css({
      transform: `translateY(-${100 * num}vh)` // 휠 방향에 따라서 값을 변경하기
    });
  }, 100);
});

 

 

728x90
저작자표시

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 활용 3일차 - 스크롤 예제 2  (0) 2021.10.13
웹퍼블리셔 활용 2일차 - 스크롤 예제 1 완성  (0) 2021.10.12
웹퍼블리셔 기본 10일차 - 문자열 함수  (0) 2021.10.06
웹퍼블리셔 기본 9일차 - 브라우저 메소드  (0) 2021.10.05
웹퍼블리셔 기본 8일차 - js파일 로드, 자주 쓰는 제이쿼리 메소드  (0) 2021.09.30
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함