피엘바이오

Plbio

원페이지 웹사이트 작업물.
svg 애니메이션을 위해 코드펜 소스를 참고하여 일러스트 작업.

JAVASCRIPT


    <script> 
    window.addEventListener("scroll",function(){

        let sctop = window.scrollY;

        if(sctop >= visheight)
        {
            header.classList.add("on");

        }
        else if(sctop < visheight)
        {
            header.classList.remove("on");
        }

    });

    let num=0;

    mobile_btn.addEventListener("click",function(e){
        e.preventDefault();
        mobile_menu.classList.toggle("on");

        console.log(num);
        num+=1;

        if(num%2 == 1) //클릭했을 때
        {
            header.classList.add("on");
        }
        else
        {
            header.classList.remove("on");
        }


    });

  
   //for 구문 생략
   
    gnb_li[i].addEventListener("click",function(e){

        e.preventDefault();

        window.scrollTo(
        {
            top:divarray[i].offsetTop,
            left:0,
            behavior : "smooth"
        });
    });

     mgnb_li_a[i].addEventListener("click",function(e){

        e.preventDefault();

        window.scrollTo(
        {
            top:divarray[i].offsetTop,
            left:0,
            behavior : "smooth"
        });
    });
    
    
    window.addEventListener("scroll",function(){

        for(let i=0; i<gnb_li_a.length; i++)
        {
            gnb_li_a[i].classList.remove("on");
        }

        let sctop = window.scrollY;
        console.log(sctop);
        if(sctop >= divarray[0].offsetTop && sctop < divarray[1].offsetTop)
        {
            gnb_li_a[0].classList.add("on");
        }
        else if(sctop >= divarray[1].offsetTop && sctop < maptop-50)
        {
            gnb_li_a[1].classList.add("on");

        }
        else if(sctop >= maptop-50)
        {
            gnb_li_a[2].classList.add("on");

        }

    });
</script>   

돌아가기