Must Remeber
- 스크롤을 동작할 때 모니터는 1:1 비율이 아닌, 직사각형이기 때문에 콘텐츠의 가로, 세로 크기를 비율에 맞게 계산하기 위해 해주는 작업.
var wt = $(window).width();
$("#container > div").width(wt);
var length = $("#container > div").length;
var contWidth = wt * length;
var lastSrc = 0;
$("body").height(contWidth);
$(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 메소드를 사용하여 스크롤의 액션에 따라 콘텐츠를 제어할 수 있다.
clearTimeout($.data(this, "scrollCheck"));
$.data(this, "scrollCheck", setTimeout(function () {
$(".character").removeClass("on");
}, 200));