211011 TIL 제이쿼리 가로스크롤, data 메소드 (학습 81일차)

Must Remeber

• 스크롤을 동작할 때 모니터는 1:1 비율이 아닌, 직사각형이기 때문에 콘텐츠의 가로, 세로 크기를 비율에 맞게 계산하기 위해 해주는 작업.

// 윈도우 가로값을 콘텐츠 가로 값으로 지정
var wt = $(window).width();
$("#container > div").width(wt);

// container 가로 크기만큼 body의 높이값 지정
var length = $("#container > div").length;
var contWidth = wt * length;
var lastSrc = 0; // 마지막 스크롤 값
$("body").height(contWidth); // container와 body가 1:1로 지정

$(window).scroll(function () {
  // 가로, 세로 비율을 지정하자
  var winW = $(window).width();
  var winH = $(window).height();
  var scr = $(window).scrollTop();

  var contW = contWidth - winW;
  var contH = contWidth - winH;
  var result = contW / contH;
  var scrResult = scr * result;

  $("#container").css({"transform":`translateX(-${scrResult}px)`});
});

• 제이쿼리 data 메소드를 사용하여 스크롤의 액션에 따라 콘텐츠를 제어할 수 있다.

// 스크롤이 멈추면 o.5초 뒤에 멈춤
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function () {
  $(".character").removeClass("on");
}, 200));