자바스크립트 + 제이쿼리 입문 day 9

자바스크립트 + 제이쿼리 입문 day 9

---

 

휠보다 대세는 scroll이다 ! 

 

$(window).on('scroll', function(){}) // 이벤트를 발생시키는 방법

 

 

이미지를 넣고 

 

 

// $('body').prepend('<div class=""></div>');  // prepend = 앞부분에 추가 , append = 뒤쪽에 추가
      $("body").append('<div class="scroll"></div>');

      let imgs = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"];
      let imgTag = "";
      $.each(imgs, function (key, url) {
        imgTag += `<img src="../day6/img/${url}">`;
      });

      $(".scroll").html(imgTag);

 

상단으로부터 위치를 알아내고 

 

// 상단으로부터 위치를 알아내기

      let  offset = [];
      $(".scroll img").each(function (key, value) {
        $(".scroll img")
          .eq(key)
          .on("load", function () {


            offset.push($(".scroll img").eq(key).offset().top);
          });
      });

 

 

숨기고 -> 스크롤을 하는 시점에 사용하자 

 

 

이미지 스크롤에 따라 다른 명령을 수행할 수 있는 함수 구현 

 

$(window).on("scroll", function (e) {
        // 명령할 대상자 위치값 
        // 스크롤 값 
        $('.scroll img').each(function (key, value) {
            if ($(window).scrollTop() > offset[key]){
               console.log(key+"이미지 명령 주세요!")
            }
        }   ) 
        });

 

 

스크롤로 인한 위치 변경에 따른 다른 명령 수행 가능 구현 코드 전체 

 

    <script>
      // $('body').prepend('<div class=""></div>');  // prepend = 앞부분에 추가 , append = 뒤쪽에 추가
      $("body").append('<div class="scroll"></div>');

      let imgs = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"];
      let imgTag = "";
      $.each(imgs, function (key, url) {
        imgTag += `<img src="../day6/img/${url}">`;
      });

      $(".scroll").html(imgTag);

      // 상단으로부터 위치를 알아내기

      let  offset = [];
      $(".scroll img").each(function (key, value) {
        $(".scroll img")
          .eq(key)
          .on("load", function () {
            offset.push($(".scroll img").eq(key).offset().top);
          });
      });

      //   $(".scroll").html('<img src="../day6/img/05.jpg">');

      $(window).on("scroll", function (e) {
        // 명령할 대상자 위치값 
        // 스크롤 값 
        $('.scroll img').each(function (key, value) {
            if ($(window).scrollTop() > offset[key]){
               console.log(key+"이미지 명령 주세요!")
            }
        }   ) 
        });
        
    </script>

 

 

css를 통해 animation 효과 넣기 

 

    <style>
        .scroll img{
            opacity: 0;
            transition: .5s;
            transform: translateX(-90%);
        }
        .scroll img.active{
            opacity: 1;
            transform: translateX(0%);
        }
    </style>

 

 

header를 만들어보자 

 

 <!-- 스크롤의 위치와 상관 없이 방향을 올리면 header가 띄게 하는 것이 로직이다  -->
    <header>
      <nav>
        <a href="#">menu 01</a>
        <a href="#">menu 02</a>
        <a href="#">menu 03</a>
      </nav>
    </header>

    <style>
        header{
            position:fixed; left:0; top:0;
            width:100%; background-color: rgba(0,0,0,0.6);
            text-align:center;
            padding: 20px 0;
        }

        header a{
            color : #fff;
        }

    </style>

 

 

스크롤 위치와 상관없이 방향을 위로 올리면 

헤더가 변하는 것을 구현해보자. 

 

 header.active{transform: translateY(-100%);}

헤더에 active를 넣어주는 시점에 y값을 -100% 줄인다 => 사라진다 

 

올라가고 내려가고 로직을 상태를 통해 구현 

<script>
        let pos = {y:0, y2:0, state:true}
        $(window).on('scroll', function(){

            pos.y = $(window).scrollTop();

            // if (y>y2){ 
            //     pos.state= true;
            // } else {
            //     // up 상태 
            //     pos.state= false;
            // }

            pos.state = pos.y>pos.y2 ?  true : false;

            pos.y2 = pos.y;

            if (pos.state){
                $('header').addClass('active');
            } else {
                $('header').removeClass('active');
            }

        })
    </script>

 

 

 

스크롤시 num 값이 하나씩 올라가도록 구현 

 

let num = 0;
      let play;
      $(window).on("scroll", function () {
        clearTimeout(play);
        play = setTimeout(function () {
          num++;
          console.log(num);
        }, 200);
      });

 

시간을 주어서 메모리에서 다음 실행을 기다리도록 만들고 clear로 해당 값을 실행시켜 대기 값들을 죽인다 

console.log 위에서 실행이 되고 있기 때문에 

한번은 실행된다 .