본문 바로가기

TUTORIAL


[Parallax] 패럴럭스 이미지 애니메이션1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>패럴럭스 사이드 메뉴 만들기2</title>
</head>
<body>
   <nav id="nav">
        <h1>WEB'S</h1>
        <ul>
            <li><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="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;}

#nav {overflow:hidden; position:fixed; left:0; top:0; width: 100%; background-color: rgba(255,255,255,0.6);}
#nav h1 {float:left; color: #fff; font-size:40px; padding:12px 5px 5px 20px; font-weight:900;   }
#nav ul {float:right;}
#nav ul li {display: inline;}
#nav ul li a {padding: 22px 15px 20px 15px; text-decoration: none; color: #fff; display:inline-block;}     
#nav ul li.active a {border-bottom: 3px solid #fff;}

#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 nav = $("#nav ul li");
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);
});

nav.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");
        nav.removeClass("active");
        nav.eq(0).addClass("active");
    }
    if(wScroll >= contents.eq(1).offset().top){
        dot.removeClass("active");
        dot.eq(1).addClass("active");
        nav.removeClass("active");
        nav.eq(1).addClass("active");
    }
    if(wScroll >= contents.eq(2).offset().top){
        dot.removeClass("active");
        dot.eq(2).addClass("active");
        nav.removeClass("active");
        nav.eq(2).addClass("active");
    }
    if(wScroll >= contents.eq(3).offset().top){
        dot.removeClass("active");
        dot.eq(3).addClass("active");
        nav.removeClass("active");
        nav.eq(3).addClass("active");
    }
    if(wScroll >= contents.eq(4).offset().top){
        dot.removeClass("active");
        dot.eq(4).addClass("active");
        nav.removeClass("active");
        nav.eq(4).addClass("active");
    }
    if(wScroll >= contents.eq(5).offset().top){
        dot.removeClass("active");
        dot.eq(5).addClass("active");
        nav.removeClass("active");
        nav.eq(5).addClass("active");
    }
});

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