본문 바로가기

TUTORIAL


패럴랙스 기본 배우기

02. 패럴랙스 배우기 - Menu

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Parallax</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i'" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <style>
        /* reset */
        * {margin:0; padding:0; font-family: 'Lato';}
        li {list-style: none;}
        a {text-decoration: none;}
        
        /* nav */
        #nav {position: fixed; left: 0; top: 0; width: 100%; background-color: rgba(255,255,255,0.3);}
        #nav h1 {float: left; color: #fff; font-size: 40px; padding: 5px 5px 5px 15px; font-family: 'Abel' }
        #nav ul {float: right; padding-right: 10px; }
        #nav ul li {display: inline; }
        #nav ul li a {display: inline-block; padding: 20px 15px; color: #fff; font-weight: bold; font-family: 'Abel'; text-transform: capitalize;}
        #nav ul li.active a {color: #000;}
        
        /* contents */
        #contents {text-align: center; color: #fff;}
        #contents > div {height: 100vh; line-height: 100vh;}
        #contents > div h2 {font-size: 90px; font-weight: 100; text-transform: uppercase;}
        #contents > div h2 strong {font-weight: 700; font-style: italic;}
        
        /* section */
        #section1 {background:radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); }
        #section2 {background:radial-gradient(ellipse farthest-corner at center top, #cbf49a, #1ea623);}
        #section3 {background:radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);}
        #section4 {background:radial-gradient(ellipse farthest-corner at center bottom, #6beace, #2e9aa4);}
        #section5 {background:radial-gradient(ellipse farthest-corner at center bottom, #69d2fb 0%, #20438E 100%);}
        #section6 {background:radial-gradient(ellipse farthest-corner at center top, #6CEBCF 0%, #38a7aa 100%);}
    </style>
</head>
<body>
    <nav id="nav">
        <h1>WEB'S</h1>
        <ul>
            <li class="active"><a href="#section1">menu1</a></li>
            <li><a href="#section2">menu2</a></li>
            <li><a href="#section3">menu3</a></li>
            <li><a href="#section4">menu4</a></li>
            <li><a href="#section5">menu5</a></li>
            <li><a href="#section6">menu6</a></li>
        </ul>
    </nav>

    <div id="contents">
        <div id="section1"><h2>Time is <strong>gold</strong></h2></div>
        <div id="section2"><h2>Seeing is <strong>believing</strong></h2></div>
        <div id="section3"><h2>Asking costs <strong>nothing</strong></h2></div>
        <div id="section4"><h2><strong>Better</strong> is to bow than break</h2></div>
        <div id="section5"><h2><strong>Habit</strong> is second nature</h2></div>
        <div id="section6"><h2>Pain past is <strong>pleasure</strong></h2></div>
    </div>
    
    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        var nav = $("#nav ul li");
        var cont = $("#contents > div");

        nav.click(function(e){
            e.preventDefault();
            var target = $(this);
            var index = target.index();
            //alert(index);
            var section = cont.eq(index);
            var offset = section.offset().top;
            $("html,body").animate({ scrollTop:offset },600,"easeInBounce");
        });

        $(window).scroll(function(){
            var wScroll = $(this).scrollTop();
            
            if(wScroll >= cont.eq(0).offset().top){
                nav.removeClass("active");
                nav.eq(0).addClass("active");
            }
            if(wScroll >= cont.eq(1).offset().top){
                nav.removeClass("active");
                nav.eq(1).addClass("active");
            }
            if(wScroll >= cont.eq(2).offset().top){
                nav.removeClass("active");
                nav.eq(2).addClass("active");
            }
            if(wScroll >= cont.eq(3).offset().top){
                nav.removeClass("active");
                nav.eq(3).addClass("active");
            }
            if(wScroll >= cont.eq(4).offset().top){
                nav.removeClass("active");
                nav.eq(4).addClass("active");
            }
            if(wScroll >= cont.eq(5).offset().top){
                nav.removeClass("active");
                nav.eq(5).addClass("active");
            }
        });
    </script>
</body>
</html>




<nav id="nav">
    <h1>WEB'S</h1>
    <ul>
        <li class="active"><a href="#section1">menu1</a></li>
        <li><a href="#section2">menu2</a></li>
        <li><a href="#section3">menu3</a></li>
        <li><a href="#section4">menu4</a></li>
        <li><a href="#section5">menu5</a></li>
        <li><a href="#section6">menu6</a></li>
    </ul>
</nav>

<div id="contents">
    <div id="section1"><h2>Time is <strong>gold</strong></h2></div>
    <div id="section2"><h2>Seeing is <strong>believing</strong></h2></div>
    <div id="section3"><h2>Asking costs <strong>nothing</strong></h2></div>
    <div id="section4"><h2><strong>Better</strong> is to bow than break</h2></div>
    <div id="section5"><h2><strong>Habit</strong> is second nature</h2></div>
    <div id="section6"><h2>Pain past is <strong>pleasure</strong></h2></div>
</div>




<style>
    /* reset */
    * {margin:0; padding:0; font-family: 'Lato';}
    li {list-style: none;}
    a {text-decoration: none;}

    /* nav */
    #nav {position: fixed; left: 0; top: 0; width: 100%; background-color: rgba(255,255,255,0.3);}
    #nav h1 {float: left; color: #fff; font-size: 40px; padding: 5px 5px 5px 15px; font-family: 'Abel' }
    #nav ul {float: right; padding-right: 10px; }
    #nav ul li {display: inline; }
    #nav ul li a {display: inline-block; padding: 20px 15px; color: #fff; font-weight: bold; font-family: 'Abel'; text-transform: capitalize;}
    #nav ul li.active a {color: #000;}

    /* contents */
    #contents {text-align: center; color: #fff;}
    #contents > div {height: 100vh; line-height: 100vh;}
    #contents > div h2 {font-size: 90px; font-weight: 100; text-transform: uppercase;}
    #contents > div h2 strong {font-weight: 700; font-style: italic;}

    /* section */
    #section1 {background:radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); }
    #section2 {background:radial-gradient(ellipse farthest-corner at center top, #cbf49a, #1ea623);}
    #section3 {background:radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);}
    #section4 {background:radial-gradient(ellipse farthest-corner at center bottom, #6beace, #2e9aa4);}
    #section5 {background:radial-gradient(ellipse farthest-corner at center bottom, #69d2fb 0%, #20438E 100%);}
    #section6 {background:radial-gradient(ellipse farthest-corner at center top, #6CEBCF 0%, #38a7aa 100%);}
</style>




<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    var nav = $("#nav ul li");
    var cont = $("#contents > div");

    nav.click(function(e){
        e.preventDefault();
        var target = $(this);
        var index = target.index();
        //alert(index);
        var section = cont.eq(index);
        var offset = section.offset().top;
        $("html,body").animate({ scrollTop:offset },600,"easeInBounce");
    });

    $(window).scroll(function(){
        var wScroll = $(this).scrollTop();

        if(wScroll >= cont.eq(0).offset().top){
            nav.removeClass("active");
            nav.eq(0).addClass("active");
        }
        if(wScroll >= cont.eq(1).offset().top){
            nav.removeClass("active");
            nav.eq(1).addClass("active");
        }
        if(wScroll >= cont.eq(2).offset().top){
            nav.removeClass("active");
            nav.eq(2).addClass("active");
        }
        if(wScroll >= cont.eq(3).offset().top){
            nav.removeClass("active");
            nav.eq(3).addClass("active");
        }
        if(wScroll >= cont.eq(4).offset().top){
            nav.removeClass("active");
            nav.eq(4).addClass("active");
        }
        if(wScroll >= cont.eq(5).offset().top){
            nav.removeClass("active");
            nav.eq(5).addClass("active");
        }
    });
</script>




[Parallax] 02. 패럴럭스 배우기 - Menu 연동

패럴럭스 사이트를 만들기 위한 기본 예제와 메뉴를 연동하는 방법입니다.

완성
광고


tags

  • geon 2018.11.18 23:32 댓글주소 수정/삭제 댓글쓰기

    http://testbox01.dothome.co.kr/parallax/parallax2.html
    완성 재미있어요 '' !

  • 휘댕 2019.02.10 20:16 댓글주소 수정/삭제 댓글쓰기

    안녕하세요 ~ 좋은 강의 감사합니다 ㅎㅎ
    근데 if 문에서 왜 else if 는 안 먹히는 건가요 ? ㅠ ㅠ

  • 휘댕 2019.02.10 23:28 댓글주소 수정/삭제 댓글쓰기

    오 답변 정말 빠ㅏ르시네요 ㅎㅎ
    음, 완성 소스 그대로 복붙해서 if 구문만 if else if ..... else 로 바꾸었는데 작동이 안되네요 ㅠ ㅠ
    어떤게 문제일까요 ..ㅠㅠ

  • 휘댕 2019.02.21 16:35 댓글주소 수정/삭제 댓글쓰기

    무엇에 쓰려고 하려하기보단 그냥 궁금해서요 ㅋㅋㅋ
    그리고 ifififif 보단 좀 더 if ~ else if ~ else 로 끝나는게 .. 더 안정적? 이라고 해야하나 뭐 어쨌든 제 느낌이요 ㅎㅎ

    반응형 사이트(2019) 완강하고 다시 와서 평온~한 마음으로 다시 보니 눈에 보이네요 왜 안되었는지 ㅠ ㅠ
    else if(wScroll >= cont.eq(2).offset().top && wScroll < cont.eq(3).offset().top)

  • 휘댕 2019.02.21 16:36 댓글주소 수정/삭제 댓글쓰기

    항상 감사하게 생각하면서 잘 배우고 있습니다 ~^0^!
    패럴랙스 다음 강의 기다리면서 복습 좀 해보려구용 !