👁‍🗨javascript(캐러셀 만들기, 스크롤바 만들기, 케러셀에 스와이프 기능추가)

캐러셀 만들기

• 시작화면 만들기

  

<div style="overflow: hidden">
    <div class="slide-container">
      <div class="slide-box">
        <img src="car1.png">
      </div>
      <div class="slide-box">
        <img src="car2.png">
      </div>
      <div class="slide-box">
        <img src="car3.png">
      </div>
    </div>
 </div> 

.slide-container {
  width: 300vw;
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
} 

• vw 단위는 브라우저 폭에 비례한 단위입니다. 100vw는 브라우저 폭의 100%입니다.
• 이렇게 코드를 짰더니 이미지 3개가 가로로 배치됩니다.

• 최종화면 만들기

  • 2번버튼 누르면 2번사진이 슬라이드되어서 보이는 것과 같은 것이 최종화면임.
  • 어떤 html 요소를 왼쪽으로 이동시키는건 margin-left 또는 transform속성을 사용하면 됨.

.slide-container {
  width: 300vw;
  transition: all 1s;
  transform: translateX(-100vw);
} 

• 아까 만든 css파일 중 가로로 긴 박스에 transform: translateX(-100vw) 추가
• 그런데 여기서 -200vw를 주면 3번째 사진으로 넘어감
• 이걸 활용해서 3번사진까지의 캐러셀을 만들 수 있으니 참고.

• 자바스크립트 코드 만들기

  • 언제 종료화면으로 변할지 JS 코드 만들기

    $('.slide-2').on('click', function() {
    $('.slide-container').css('transform', 'translateX(-100vw)');
    });

    • 버튼2에 클릭 이벤트가 발생하면 최종화면으로 변함.

• 다음버튼, 이전버튼은 클릭횟수에 따른 조건문을 활용해서 만들 수 있음.

---

캐러셀에 스와이프 기능 만들기!!

• 기능1. 내가 드래그한 거리만큼 박스도 왼쪽으로 움직임.

  • 이동거리를 어떻게 구할까??
    • 마우스 누를 때의 X좌표에서 마우스 움직일 때의 X좌표를 빼면 나오지 않을까?

  <div>캐러셀있는곳</div>
  <script>
   $('.slide-box').eq(0).on('mousedown', function(e){
     e.clientX ← 이거랑
   });
  
   $('.slide-box').eq(0).on('mousemove', function(e){
     e.clientX ← 이거를 빼야할듯
   });
  </script>

  • 여기서 첫번째 e.clientX와 두번째 e.clientX를 빼면 이동거리인데
  • 그러나 함수 안의 변수는 범위가 있어서 함수 바깥에서 쓸 수 없음..
  • 그래서 함수 바깥에서 변수를 만들어 두고 함수끼리 변수 공유가 가능하게 하면 해결.

  <script>
   var 시작좌표 = 0;
  
   $('.slide-box').eq(0).on('mousedown', function(e){
     시작좌표 = e.clientX;
   });
  
   $('.slide-box').eq(0).on('mousemove', function(e){
     console.log(e.clientX - 시작좌표)
   });
  </script>

  • 시작좌표 라는 변수를 만들어서 초기값을 0으로 주고 마우스 클릭 시 현재 좌표를 시작좌표에 저장해둠.
  • mousemove라는 이벤트 발생 시 시작좌표 랑 현재좌표인 e.clientX를 빼면 드래그 이동거리가 나옴.

• 기능2. 손 놓으면 두번째 사진 보임(드래그 양에 따라)

  • 그러면 이제 이동거리만큼 박스도 이동하도록 코드 작성.

  <script>
   var 시작좌표 = 0;
  
   $('.slide-box').eq(0).on('mousedown', function(e){
     시작좌표 = e.clientX;
   });
  
   $('.slide-box').eq(0).on('mousemove', function(e){
     console.log(e.clientX - 시작좌표)
     $('.slide-container').css('transform', `translateX( ${e.clientX - 시작좌표}px )`)
   });
  </script>

  • translateX을 조절하면 박스가 왼쪽으로 이동했었음.
  • 그런데 여기까지 하고 나면 마우스 클릭도 안했는데 박스가 움직이고 있을텐데
  • 클릭하고나서만 박스를 이동해달라고 코드를 작성하지 않았기 때문.

  <script>
   let 시작좌표 = 0;
   let 눌렀냐 = false;
  
   $('.slide-box').eq(0).on('mousedown', function(e){
     시작좌표 = e.clientX;
     눌렀냐 = true;
   });
  
   $('.slide-box').eq(0).on('mousemove', function(e){
     if (눌렀냐 === true) {
       $('.slide-container').css('transform', `translateX( ${e.clientX - 시작좌표}px )`)
     }
   });
  </script>

  • 눌렀냐라는 전역변수를 새로 만들어주고 마우스를 클릭했을 때 그 값은 true가 되며,
  • 마우스를 움직였을 때 만약 눌럿냐라는 변수의 값이 true면 즉, 클릭이 됬다면
  • 박스를 이동시켜라 라는 의미의 코드 작성.

💥 참고사항!

• onmouse이벤트 관련 해당 이벤트들 안에서 e.clientX라는 것은 현재 마우스 위치의 X좌표를 나타냄.
• 그럼 e.clientY는 현재 마우스 위치의 Y좌표를 뜻함.

예시)

  $('.slide-box').eq(0).on('mousemove',function(e){
   console.log(e.clientX)
 })

• 지금까지는 마우스 이동거리만큼 박스 이동 기능을 구현했는데 반대로 마우스를 땠을때 이동거리가 100 이상이면 2번 사진을, 100 미만이면 1번 사진으로 돌아오도록 기능 구현을 해보려고 함.

<script>
  (생략)

  $('.slide-box').eq(0).on('mouseup', function(e){
    눌렀냐 = false;

    if (e.clientX - 시작좌표 < -100) {
      $('.slide-container').css('transform', 'translateX(-100vw)');
    } else {
      $('.slide-container').css('transform', 'translateX(0vw)');
    }
  });
</script>

---

스크롤바 만들기!

• window.addEventListener('scroll',function(){}

  • 여기서 scroll이라는 이벤트는 왼쪽에 있는 애가 스크롤 될때마다 콜백함수를 실행해준다는 의미.
  • window는 document보다 큰 의미를 갖음. 그리고 scroll은 주로 window와 사용됨.

  • window.scrollY : 유저가 얼마나 스크롤바를 내렸는지 px단위로 알려줌.
  • window.scrollX : 가로로 얼마나 스크롤했는지 알려줍니다. (가로 스크롤바가 있으면)
  • window.scrollTo(x, y) : 강제로 스크롤바를 움직일 수 있습니다.
    • 예시) window.scrollTo(0, 100) : 위에서부터 100px 위치로 스크롤
  • window.scrollBy(x, y) : 현재 위치에서부터 스크롤
    • 예시) window.scrollBy(0, 100) : 현재 위치에서부터 +100px 만큼 스크롤

• jQuery 버전은 더 간편함..

  • $(window).scrollTop() : 현재 페이지 스크롤 양을 알려줌.
  • $(window).scrollTop(100) : 페이지 강제이동도 해줌

  💥참고사항!!

  overflow: scroll : 내용물이 넘치면 스크롤바를 생성해줌.
  document.querySelector('.lorem').scrollTop : lorem이라는 클래스명을 가진 div박스 스크롤 양
  현재 페이지 스크롤은 scrollY를 쓰지만 일반 div박스 같은거에는 scrollTop를 사용.
  셀렉터.scrollHeight : div의 스크롤 가능한 실제 높이
  셀렉터.clientHeitght : 눈에 보이는 div 높이
  스크롤 양은 div의 높이와는 차이가 있는데 이유는 눈에 보이는 div박스 높이만큼은 스크롤 하지 않았기 때문.
  그렇기 때문에 div의 스크롤바 내린 양 + 눈에 보이는 div박스 높이 == div의 실제 높이

  • 예시) 스크롤바를 100px이상 내리면 로고 폰트사이즈 줄이고 100px 미만이면 다시 늘리기

    window.addEventListener('scroll',function(){
      if(window.scrollY>=100){
        document.querySelector('.navbar-brand').style.fontSize = '20px'
      }else if(window.scrollY<100){
        document.querySelector('.navbar-brand').style.fontSize = '30px'
       }       
       })

    • 스크롤 이벤트가 발생했을 때 만약 현재 스크롤바 높이가 100px이상이라면 폰트 사이즈를 20px로 하고 그렇지 않고 만약 현재 스크롤바 높이가 100px 미만이라면 폰트사이즈를 30px로 늘린다.

  • 회원약관(div안에)을 다 읽으면 alert창이 나오게끔.

    document.querySelector('.lorem').addEventListener('scroll',function(){
     const scroll양 = document.querySelector('.lorem').scrollTop
     const 실제높이 = document.querySelector('.lorem').scrollHeight
     const div높이 = document.querySelector('.lorem').clientHeight
       
    if(scroll양+div높이==실제높이){
      alert('회원약관 확인 완료')
    }
    })

    • lorem이라는 클래스 명을 가진 <div>에 스크롤 이벤트가 발생했을 때,
    • 현재 스크롤양과 눈에 보이는 박스의 높이가 실제 스크롤 가능한 높이와 같다면
    • alert 띄워줘.

❓ scroll 사용 시 주의사항

• 1. scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행됨.
  2. 바닥 체크도 여러번 중복으로 해줄 때가 있음.. 그래서 자주 사용하면 안됨.