jquery 스크롤 이벤트 제어
본문
var isVisible0 = false;
var isVisible1 = false;
var isVisible2 = false;
var isVisible3 = false;
var isVisible4 = false;
var isVisible5 = false;
var isVisible6 = false;
var isVisible7 = false;
var isVisible8 = false;
var isVisible9 = false;
$(window).on('scroll',function() {
if (checkVisible($('.sec02'))&&!isVisible0) {
$(".sec02 h4").addClass("slideUp");
$(".sec02 h2").addClass("slideUp");
$(".sec02 ul > li:last-child > *").addClass("slideLeft");
isVisible0=true;
} else if (checkVisible($('.sec03 .num'))&&!isVisible1) {
$(".sec03 .wrap > *").addClass("slideUp");
isVisible1=true;
} else if (checkVisible($('.sec04'))&&!isVisible2) {
$(".sec04 .wrap li > .num").addClass("slideUp");
$(".sec04 .wrap li > h3").addClass("slideRight");
$(".sec04 .wrap li > .vt_line").addClass("slideRight");
$(".sec04 .wrap li > h5").addClass("slideRight");
$(".sec04 .wrap li.img").addClass("scale");
isVisible2=true;
} else if (checkVisible($('.sec05 ul'))&&!isVisible3) {
$(".sec05 li:first-child > *").addClass("slideUp");
$(".sec05 li:last-child").addClass("show");
$(".sec05 li:last-child .xi-caret-up").addClass("arrowUp");
$(".sec05 li:last-child .xi-caret-down").addClass("arrowDown");
isVisible3=true;
} else if (checkVisible($('.sec06'))&&!isVisible4) {
dial3();
$(".sec06 .wrap li:first-child > *").addClass("slideDown");
$(".sec06 .cont > ul > li img").addClass("rolling");
isVisible4=true;
} else if (checkVisible($('.sec07 h3'))&&!isVisible5) {
$(".sec07 .wrap ul li:first-child > *").addClass("slideRight");
$(".sec07 .wrap ul li > div").addClass("scale2");
$(".sec07 .wrap ul li > .vs").addClass("scale2");
$(".sec07 .wrap ul li strong").addClass("blink");
isVisible5=true;
} else if (checkVisible($('.sec08 .swiper-wrapper'))&&!isVisible6) {
$(".sec08 .wrap > *").addClass("slideDown");
isVisible6=true;
} else if (checkVisible($('.sec09 h4'))&&!isVisible7) {
$(".sec09 .wrap > h3").addClass("slideDown");
$(".sec09 .wrap > h4").addClass("slideDown");
$(".sec09 .wrap > .before").addClass("slideDown");
$(".sec09 .wrap .arrow i").addClass("blink");
$(".sec09 .wrap > .before .cont > *").addClass("slideLeft");
isVisible7=true;
} else if (checkVisible($('.sec09 .after'))&&!isVisible8) {
$(".sec09 .wrap > .after").addClass("slideDown");
$(".sec09 .wrap > .after .cont > *").addClass("slideLeft");
isVisible8=true;
} else if (checkVisible($('.sec10 > *'))&&!isVisible9) {
$(".sec10 > h3").addClass("slideDown");
$(".sec10 > h4").addClass("slideDown");
$(".sec10 > *:last-child()").addClass("slideDown");
$(".sec10 .cont h4 span").addClass("bounce");
$(".sec10 .cont img").addClass("rolling");
isVisible9=true; }
});
function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
스크롤 이벤트를 주어 특정 섹션 접근 시 클래스가 추가되도록 적용하였습니다.
몇몇 섹션에서 롤링 이미지 같은 부분이 있다보니
전체적으로 섹션이 실행(?) 되다보면 사이트 전체적으로 버퍼링이 생기는데
섹션에서 벗어 날 경우 추가된 클래스를 제거하고 다시 그 섹션에 도달 시 다시 클래스를 추가할 방법이 있을까요?
다음 섹션에서 removeClass를 주니 다시 그섹션 도달시에는 addClass가 안되네요
답변 1
다음을 참고하셔서 원하시는 형식으로 가공하시면 가능하지 않을까 합니다.
var isVisible0 = false;
var isVisible1 = false;
var isVisible2 = false;
var isVisible3 = false;
var isVisible4 = false;
var isVisible5 = false;
var isVisible6 = false;
var isVisible7 = false;
var isVisible8 = false;
var isVisible9 = false;
$(window).on('scroll', function() {
if (checkVisible($('.sec02')) && !isVisible0) {
$(".sec02 h4").addClass("slideUp");
$(".sec02 h2").addClass("slideUp");
$(".sec02 ul > li:last-child > *").addClass("slideLeft");
isVisible0 = true;
} else if (!checkVisible($('.sec02')) && isVisible0) {
$(".sec02 h4").removeClass("slideUp");
$(".sec02 h2").removeClass("slideUp");
$(".sec02 ul > li:last-child > *").removeClass("slideLeft");
isVisible0 = false;
} else if (checkVisible($('.sec03 .num')) && !isVisible1) {
$(".sec03 .wrap > *").addClass("slideUp");
isVisible1 = true;
} else if (!checkVisible($('.sec03 .num')) && isVisible1) {
$(".sec03 .wrap > *").removeClass("slideUp");
isVisible1 = false;
}
// Repeat the above pattern for other sections...
});
function checkVisible(elm, eval) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
답변을 작성하시기 전에 로그인 해주세요.
