- Parallax
- Parallax - 패럴럭스 사이트 인트로
- Parallax - 패럴럭스 기본 틀 만들기
- Parallax - 패럴럭스 기본 = 메뉴 연동하기
- Parallax - 패럴럭스 닷 메뉴 만들기
- Parallax - 패럴럭스 메뉴 + 닷 메뉴 만들기
- Parallax - 패럴럭스 메뉴 고정시키기
- Parallax - 패럴럭스 메뉴 숨기기
- Parallax - 패럴럭스 사이드 메뉴 만들기
- Parallax - 패럴럭스 사이드 메뉴 만들기2
- Parallax - 패럴럭스 마우스 오버 메뉴 만들기
- Parallax - 패럴럭스 반응형 메뉴 만들기
- Parallax - 패럴럭스 텍스트 애니메이션1
- Parallax - 패럴럭스 텍스트 애니메이션2
- Parallax - 패럴럭스 텍스트 애니메이션3
- Parallax - 패럴럭스 텍스트 애니메이션4
- Parallax - 패럴럭스 이미지 애니메이션1
- Parallax - 패럴럭스 이미지 애니메이션2
- Parallax - 패럴럭스 이미지 애니메이션3
- Parallax - 패럴럭스 이미지 애니메이션4
[Parallax] 패럴럭스 닷 메뉴 만들기
이번에는 일반적인 메뉴가 아닌 오른쪽이나 왼쪽에 사이드처럼 나오는 닷 메뉴를 만들겠습니다. 이 부분도 패럴럭스 기본 = 메뉴 연동하기랑 다를게 없습니다. 단지 메뉴 스타일만 CSS로 변경 시켜줄 뿐 기본 원리는 같습니다.
완성
<!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");
}
});