UI / 애플 스크롤 UI

스크롤을 내리면, 일정위치에서 이미지가 멈추다가, 밑의 이미지와 겹치기 시작하면, 점점 투명해지고, 크기가 작아진다.

html 코드

<div class="card-background">
  <div class="card-box img1">
    <img src="img/phone-card1.png" alt="" />
  </div>
  <div class="card-box">
    <img src="img/phone-card2.png" alt="" />
  </div>
  <div class="card-box">
    <img src="img/phone-card3.png" alt="" />
  </div>
</div>

css 코드

• position: sticky; top: 400px;
  • 이미지가 올라가다가 top: 400px; 지점에서 멈춘다.

.card-background {
  height: 3000px;
  margin-top: 800px;
  margin-bottom: 1600px;
}

.card-box {
  position: sticky;
  top: 400px;
  margin-top: 200px;
  transition: all 0.2s;
}

.card-box img {
  display: block;
  margin: auto;
  max-width: 80%;
}

js 코드

• 스크롤 이벤트 감지
• 0번째 카드 박스를 들고 와서 css()css 직접 변경하여, 투명도와 크기를 조절하였음
• 투명도 변경
  • 0번째 사진과 1번째 사진이 경계선에서 겹치는 지점의 스크롤탑 값을 구한다.
    • $(window).scrollTop()
    • 이때의 스크롤 탑에서는 투명도가 1이 되어야한다.
  • 0번째 사진과 1번째 사진이 완전히 겹치는 지점의 스크롤 탑 값을 구한다.
    • 이때의 스크롤 탑에서는 투명도가 0이 되어야한다.
  • 스크롤 탑이 650에서 1150으로 바뀔때, 투명도는 연속적으로 1에서 0으로 바뀌어야한다
    • 두개의 좌표 (650,1), (1150,0)을 아는 상태이므로 스크롤에 따른 투명도 일차함수를 구할 수 있다.
    • 일차함수 let opacity1 = (-1 / 500) * $(window).scrollTop() + 115 / 50;
  • css 직접 변경 할 때, key값에 일차함수의 y값을 대입한다.

$(window).on("scroll", function () {
  let opacity1 = (-1 / 500) * $(window).scrollTop() + 115 / 50;
  $(".card-box").eq(0).css("opacity", opacity1);

  if ($(window).scrollTop() >= 650 && $(window).scrollTop() <= 1150) {
    let scale1 = -0.0002 * $(window).scrollTop() + 1.13;
    $(".card-box").eq(0).css("transform", `scale(${scale1})`);
  }
});

문제점

• 윈도우 창의 크기에 따라, 이미지가 겹칠 때의 스크롤 탑의 값이 달라져서, 이미지가 완전히 겹쳐지지 않은 경우에도, 이미지가 사라지는 경우에 발생한다.

---

UI / 터치 & 드래그 이미지 슬라이드

필수 라이브러리

• 여러가지 종류의 터치를 지원한다.
• 다운받기
  • hammer.js
  • cdn버전
    • head tag안에 복붙

<script
src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88="
crossorigin="anonymous"
></script>

html코드와 css코드는 UI의 이미지 슬라이드 참고

• 이미지 슬라이드

js 코드

let 현재이미지 = 1;

let 이미지1 = document.querySelectorAll(".slide-box img")[0]
//첫번째 이미지 html 코드를 가져옴

let 매니저1 = new Hammer.Manager(이미지1);
//첫번째 이미지에 hammer.js 적용

매니저1.add(new Hammer.Pan({ threshold: 0 }));
//첫번째 이미지에 pan기능 적용
//pan 이벤트 설정할 수 있음
//pan기능이란 터치 슬라이드 인식


매니저1.on('pan',function(e){  
  if(e.deltaX < -1){
  //e.deltaX 드래그한 거리의 길이
  //왼쪽드래그하면, -값
  //오른쪽드레그하면, +값
    $(".slide-container").css("transform","translateX("+e.deltaX+"vw)")
    //드래그한 거리만큼 이미지 컨테이너 이동시킴
    if(e.isFinal && 현재이미지 === 1){
    //현재이미지가 첫번째이미지면서 마우스 드래그를 놓으면 실행
      $(".slide-container").addClass("transforming")
      //transition이 담긴 클래스를 넣는다.
      
      $(".slide-container").css("transform","translateX(-100vw)")
      //2번째 사진으로 이동
      
      setTimeout(function(){$(".slide-container").removeClass("transforming")},500)
	  //transtion 적용시간인 0.5초가 지난후 transtion속성 클래스 제거
      
      현재이미지 += 1;
      //2번째 이미지로 이동했다고 표시
    }            
  }
  
})

중요한 점

• 반드시 hammer.js적용 & 터치기능 적용을 해야지 여러가지 터치 기능을 이벤트 설정할 수 있다.

터치기능은 순수 js로 개발하기 힘들다.

• 설정해야할 이벤트리스너의 종류가 많다.

  1. 이미지에다가 touchstart, touchmove, touchend 라는 이벤트리스너를 각각 만들어줍니다. 각각 터치시작, 터치중, 터치끝에 발동되는 이벤트리스너입니다.
  2. 각각 이벤트리스너가 동작할 때 유저가 화면 터치시의 X축 좌표(clientX 라고 씀)를 출력하거나 저장해놓습니다.
  3. touchstart의 X축 좌표와 touchend의 X축 좌표를 빼서 양수가 나오면 오른쪽으로 슬라이드했구나~! 라고 판단합니다.
  4. 따라서 터치중일 때 (touchmove 발동시) 유저가 X축 좌표를 움직인 만큼 똑같이 이미지를 우측으로 움직이게 만들어줍니다. (CSS transform 속성 등 사용)
  5. 터치를 놓으면 (touchend 발동시) 이미지가 완전히 다음 이미지로 변경되게 만들어줍니다. 때에 따라 CSS transition을 추가해줍니다.

• 쌩 자바스크립트 사용시 모바일 브라우저간 호환성 이 그닥 좋지 않습니다.
  호환성 잡기도 매우 귀찮습니다.