티스토리 뷰

유료강의/국비지원

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

2021bong 2021. 10. 13. 19:41 
<!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">
  <title>Document</title>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/2-1.scroll.js"></script>
</head>
<body>
  <style>
    body {
      margin: 0;
    }
    section {
      height: 100vh;
    }
    section:nth-of-type(odd){
      background-color: #ddd;
    }
  </style>
  <main>
    <section>1</section>
    <section>2</section>
    <section>3</section>
  </main>
</body>
</html>

 

scroll 이벤트

$(window).on('scroll', function(){ // 마우스가 없는 디바이스를 위해서 scroll 이벤트 사용
  console.log(0); // 한번 스크롤을 내리면 여러번의 이벤트가 발생
});

 

$('body').height(5000);

$(window).on('scroll', function(){ 
  clearTimeout(inter)
  inter = setTimeout(function(){
  }, 50); // scroll 이벤트에 텀을 줘서 한번씩만 일어나게 하기
});

 

scroll의 위치 알아내기

$(window).on('scroll', function(){ 
  clearTimeout(inter)
  inter = setTimeout(function(){
    console.log(
      $(window).scrollTop(), // scroll을 발생시켰을 때 위치 값(scroll최상단과 bar사이의 거리)
      $(window).height() // 브라우저의 height값
      $(document).height() // html문서의 height값
    );
  }, 50);
});

 

<body>태그는 기본으로 margin: 8px;을 가지고 있음

 

활용

'scroll이 브라우저 height를 넘어가면'을 조건으로 다양한 것들을 구현 가능

$(window).on('scroll', function(){ 
  clearTimeout(inter)
  inter = setTimeout(function(){
    console.log(
      $(window).scrollTop() > $(window).height() // 조건으로 활용가능
    );
  }, 50);
});

 

컨텐츠의 위치

.offset().top

상단으로부터 얼마나 떨어져 있는지의 값

let section = $('section').eq(1).offset().top; // 해당 컨텐츠가 브라우저 최상단으로부터 얼마나 떨어져 있는지 알아내기
$(window).on('scroll', function(){ 
    if ($(window).scrollTop() > section) {
      console.log('section2'); // scroll이 section2의 시작 지점보다 크면 찍힘
    }
});

 

콘텐츠가 조금이라도 나오자마자 찍히도록 바꾸기

컨텐츠의 위치 - 브라우저 높이

let section = $('section').eq(1).offset().top - $(window).height();

 

.each()

반복문과 같은 기능을 함

// 제이쿼리
$('선택자').each()

// 바닐라 자바스크립트
선택자.forEach()

 

<!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">
  <title>Document</title>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/2-1.scroll.js"></script>
</head>
<body>
  <style>
    body {
      margin: 0;
    }
    section {
      height: 100vh;
    }
    section:nth-of-type(odd){
      background-color: #ddd;
    }
    section.active{
      font-weight: 800;
    }
    aside {
      position: fixed;
      right: 5%;
      bottom: 5%;
      width: 100px;
      height: 100px;
      background: red;
      opacity: 0;
      transition: 0.5s;
      transform: translateY(200%);
    }
    aside.active{
      opacity: 1;
      transform: translateY(0);
    }
    aside a {
      color: #fff;
    }
  </style>
  <main>
    <section>1</section>
    <section>2</section>
    <section>3</section>
  </main>
  <aside><a href="#">TOP</a></aside>
</body>
</html>

 

<aside>가 스크롤에 따라 나타났다 사라졌다 하기

$(window).on('scroll', function () {
  bar = $(window).scrollTop();
  height = $(window).height();
  $('section').each(function (i) {
    section = $('section').eq(i).offset().top - height;
    if (bar > section) { // 스크롤을 내리면 나타나기
      $('aside').addClass('active'); 
    } else { // 맨 위로 올라오면 사라지기
      $('aside').removeClass('active'); 
    }
  })
});

 

변수를 위에 먼저 선언하고 값을 할당하지 않고

스크롤 함수 안에서 값 할당

> 선언까지 가져오면 스크롤할때마다 변수를 선언하는 것임

 

스크롤에 따라 컨텐츠가 스슥 올라오게 하기

<!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">
  <title>Document</title>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/2-1.scroll.js"></script>
</head>
<body>
  <style>
    body {
      margin: 0;
    }
    .sec-01 figure{
      margin: 0;
      padding-top: 300px;
      transition: 1s;
      transform: translateY(50%);
      opacity: 0;
    }
    .sec-01 figure.active{
      transform: translateY(0%);
      opacity: 1;
    }
    section {
      min-height: 100vh;
    }
    section:nth-of-type(odd){
      background-color: #ddd;
    }
    section.active{
      font-weight: 800;
    }
    aside {
      position: fixed;
      right: 5%;
      bottom: 5%;
      width: 100px;
      height: 100px;
      background: red;
      opacity: 0;
      transition: 0.5s;
      transform: translateY(200%);
    }
    aside.active{
      opacity: 1;
      transform: translateY(0);
    }
    aside a {
      color: #fff;
    }
  </style>
  <main>
    <section class="sec-01">
      <figure>
        <img src="../img/img-01.jpg">
      </figure>
      <figure>
        <img src="../img/img-02.jpg">
      </figure>
      <figure>
        <img src="../img/img-03.jpg">
      </figure>
      <figure>
        <img src="../img/img-04.jpg">
      </figure>
      <figure>
        <img src="../img/img-05.jpg">
      </figure>
    </section>
    <section>2</section>
    <section>3</section>
  </main>
  <aside><a href="#">TOP</a></aside>
</body>
</html>

 

이미지가 스슥 올라오게 할 지점 설정

let image = $('.sec-01 figure');

$(window).on('scroll', function () {
  if (bar > image.eq(0).offset().top) { // figure가 브라우저 상단에 닿았을 때
    
  }
});

 

스슥 올라오게 active클래스 주기

$(window).on('scroll', function () {
  image.each(function(i){
    if (bar > image.eq(i).offset().top) {
    image.eq(i).addClass('active');
    }
  });
});

 

스크롤이 멋대로 되는 것을 막기위해 설정

$(window).scrollTop(0);
728x90
저작자표시

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

웹퍼블리셔 활용 5일차 - 폼 예제 1, 2  (0) 2021.10.18
웹퍼블리셔 활용 4일차 - 스크롤 예제 3, 제이쿼리UI  (0) 2021.10.14
웹퍼블리셔 활용 2일차 - 스크롤 예제 1 완성  (0) 2021.10.12
웹퍼블리셔 활용 1일차 - 스크롤 예제 1  (0) 2021.10.07
웹퍼블리셔 기본 10일차 - 문자열 함수  (0) 2021.10.06
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
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
글 보관함