본문 바로가기

TUTORIAL


[Parallax] 패럴럭스 닷 메뉴 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Parallax</title>
</head>
<body>
    <div id="dot">
        <ul>
            <li class="active"><a href="#section1"><span>Intro</span></a></li>
            <li><a href="#section2"><span>Skill</span></a></li>
            <li><a href="#section3"><span>Website</span></a></li>
            <li><a href="#section4"><span>Work</span></a></li>
            <li><a href="#section5"><span>About</span></a></li>
            <li><a href="#section6"><span>Contact</span></a></li>
        </ul>
    </div>
    
    <div id="contents">
        <div id="section1">Think different</div>
        <div id="section2">Raise Your Head</div>
        <div id="section3">The Life is only once</div>
        <div id="section4">I must do what I want to do</div>
        <div id="section5">Time is Life itself</div>
        <div id="section6">There is no destiny</div>
    </div>
</body>
</html>
* {margin:0; padding:0;}
li {list-style: none;}
#dot {position: fixed; right: 40px; top: 50%; transform:translatey(-50%);}
#dot li {width:17px; height: 17px; background-color: rgba(0,0,0,0.51);; border-radius:50%; margin: 16px 7px;}
#dot li a {color: #fff; text-decoration: none; padding: 8px 15px 5px 15px; position:relative;  }
#dot li a span {opacity:0; position: absolute; right:35px; top:-1px; background-color: rgba(0,0,0,0.51); padding: 7px 10px 5px 10px; transition: all 0.3s ease; border-radius:2px;}
#dot li a span:after {content:''; position:absolute; right:-7px; top:8px; 
    border-left: 7px solid rgba(0,0,0,0.51);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
#dot li.active {background-color: rgba(0,0,0,0.71);}
#dot li.active a span {opacity: 1; right:25px; }

#contents {text-align: center; font-size: 80px; color:#fff; font-family: 'Open Sans', sans-serif; font-weight: 800; text-transform: uppercase;}
#contents > div {height: 100vh; line-height: 100vh;}
#section1 {background: linear-gradient(180deg, #B066FE, #63E2FF);}
#section2 {background: linear-gradient(180deg, #D4145A, #FBB03B);}
#section3 {background: linear-gradient(180deg, #009245, #FCEE21);}
#section4 {background: linear-gradient(180deg, #662D8C, #ED1E79);}
#section5 {background: linear-gradient(180deg, #ED1C24, #FCEE21);}
#section6 {background: linear-gradient(180deg, #a18cd1, #fbc2eb);}    
var dot = $("#dot ul li");
var contents = $("#contents > div");

dot.click(function(e){
    e.preventDefault();
    var target = $(this);                   
    var index = target.index();   
    var section = contents.eq(index);      
    var offset = section.offset().top;  
    $("html, body").animate({ scrollTop:offset},400);
});


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

    if(wScroll >= contents.eq(0).offset().top){
        dot.removeClass("active");
        dot.eq(0).addClass("active");
    }
    if(wScroll >= contents.eq(1).offset().top){
        dot.removeClass("active");
        dot.eq(1).addClass("active");
    }
    if(wScroll >= contents.eq(2).offset().top){
        dot.removeClass("active");
        dot.eq(2).addClass("active");
    }
    if(wScroll >= contents.eq(3).offset().top){
        dot.removeClass("active");
        dot.eq(3).addClass("active");
    }
    if(wScroll >= contents.eq(4).offset().top){
        dot.removeClass("active");
        dot.eq(4).addClass("active");
    }
    if(wScroll >= contents.eq(5).offset().top){
        dot.removeClass("active");
        dot.eq(5).addClass("active");
    }
});

[수업] 기업 사이트 따라하기1