저번에 FullPage.js와 One Page Scroll 플러그인을 비교 분석해드린 글을 올린 적이 있습니다.


http://blog.koyeseul.net/548


그 글에서 One Page Scroll의 경우 실무에서 사용할 때 특정 상황에서 충돌하는 경우가 있어 주의사항이 있다고 말씀드린 적이 있는데, 그 부분에 대해서 설명드리고자 합니다.


One Page Scroll은 그야말로 플러그인일 뿐이고, 플러그인을 실제로 적용시키기 위해서는 사용자가 임의의 제이쿼리를 생성한 js 파일을 만드는 것이 필요합니다.


따라서 다음과 같은 js 파일을 삽입했습니다.


$(document).ready(function(){

$("#main").onepage_scroll({

        sectionContainer: "section",

        responsiveFallback: 600,

        loop: false

    });

    

    $(".onepage-pagination li").hover(function(){

    $(this).find("a").animate({

    width:120,

    height:120,

    backgroundSize:120

    });

    }, function(){

    $(this).find("a").animate({

    width:65,

    height:65,

    backgroundSize:65

    });

    });

    

    page3sclickevent();

    

});



function page3sclickevent(){

$(".page .mcontent003 ul.unionsubnav li").click(function(){

    var cpimgposition = $(this).index();

   

    /*

    if(cpimgposition <= 0){

    $("#page3 .mcontent003 .divideslider img").animate({

    left:30

    }

    if(cpimgposition <= 1){

    $("#page3 .mcontent003 .divideslider img").animate({

    left:60

    }

    }

    if(cpimgposition <= 2){

    $("#page3 .mcontent003 .divideslider img").animate({

    left:90

    }

    }

    */

   

    $("#page3 .mcontent003 .divideslider img").animate({

    left: 50+cpimgposition*220

    });

   

    $("#page3 .mcontent003 .p3subcontent article").removeClass("active")

    $("#page3 .mcontent003 .p3subcontent article.contentpage"+ (cpimgposition+1) ).addClass("active");

   

    });

}


그런데 다음 js 파일에서 주석처리된 if문을 풀면, One Page Scroll 플러그인이 전혀 동작하지 않습니다. 실무에서 One Page Scroll은 페이지를 구성하는 중요한 플러그인일 가능성이 높으므로, 이 경우 플러그인이 동작하지 않게 되어 전체 페이지가 온통 일그러질 것입니다.


(위 : 정상적인 페이지의 첫화면 / 아래 : One Page Scroll 플러그인이 동작하지 않아 페이지가 일그러진 화면)






실제 이번 프로젝트에는 DOM의 일부인 .page .mcontent003 ul.unionsubnav li의 길이가 일정하지 않습니다. 그래서 정석대로라면 if문으로 페이지를 일일히 다 나눠서 left값을 주어야 했지만, 플러그인에서 충돌나는 관계로 넣지 못하여 대신 넣은 구문이 다음과 같습니다. 다만, 이 방법을 사용하면 메뉴에 위치하는 화살표가 약간씩 위치가 어긋나게 됩니다.


$("#page3 .mcontent003 .divideslider img").animate({

left: 50+cpimgposition*220

});






결론적으로 말하면 One Page Scroll 플러그인을 사용할 때에는 if문을 쓸 수 없다는 이야기가 되겠습니다.


당연히 불편하겠죠? 그러니 상황에 맞게 사용하셔야 하겠습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바