jquery 스크롤 이벤트 제어

jquery 스크롤 이벤트 제어

QA

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)));
}
답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT