2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

jquery 스크롤 이벤트 제어 채택완료

굼떠
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 4,456
답변 1
목록
Copy 


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가 안되네요 

#javascript

답변 1개

채택된 답변
+20 포인트

다음을 참고하셔서 원하시는 형식으로 가공하시면 가능하지 않을까 합니다.

Copy 


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)));

}
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고