728x90
반응형
닷메뉴_ active 값에 변화주기
<html 마크업>
css reset
#header css편집
h1 편집
#contents css 편집
#dot css 편집
active 활성화
<script>
닷을 클릭하면 해당페이지로 넘어간다.
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>닷메뉴_active값에 변화주기</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header id="header">
<h1>WEB'S</h1>
</header>
<div id="dot">
<ul>
<li class="active"><a href="#"><em>menu1</em></a></li>
<li><a href="#"><em>menu2</em></a></li>
<li><a href="#"><em>menu3</em></a></li>
<li><a href="#"><em>menu4</em></a></li>
<li><a href="#"><em>menu5</em></a></li>
<li><a href="#"><em>menu6</em></a></li>
</ul>
</div>
<div id="contents">
<div id="div1"><h2>우아한 성공은 없다</h2></div>
<div id="div2"><h2>기회는 바로 옆에 있다</h2></div>
<div id="div3"><h2>현실을 외면하지 말자</h2></div>
<div id="div4"><h2>공부는 우리 삶의 우선적 요소다</h2></div>
<div id="div5"><h2>기회가 없으면 만들면 된다.</h2></div>
<div id="div6"><h2>모든 일은 스스로 해결하라</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const dot = $("#dot>ul>li");
const cont = $("#contents>div")
dot.click(function(e){
e.preventDefault();
let target = $(this);
let index = target.index();
let section = cont.eq(index);
let offset = section.offset().top;
$("html,body").animate({scrollTop:offset},600);
});
$(window).scroll(function(e){
e.preventDefault();
let wScroll = $(this).scrollTop();
// 스크롤된 페이지가 0페이지 탑값 보다 크거나 같으면
if(wScroll >= cont.eq(0).offset().top){
// 기존 닷의 액티브값을 지우고
dot.removeClass("active");
// 0번째 닷에 액티브값을 추가한다.
dot.eq(0).addClass("active");
}
if(wScroll >= cont.eq(1).offset().top){
dot.removeClass("active");
dot.eq(1).addClass("active");
}
if(wScroll >= cont.eq(2).offset().top){
dot.removeClass("active");
dot.eq(2).addClass("active");
}
if(wScroll >= cont.eq(3).offset().top){
dot.removeClass("active");
dot.eq(3).addClass("active");
}
if(wScroll >= cont.eq(4).offset().top){
dot.removeClass("active");
dot.eq(4).addClass("active");
}
if(wScroll >= cont.eq(5).offset().top){
dot.removeClass("active");
dot.eq(5).addClass("active");
}
});
</script>
</body>
</html><css>
@charset "utf-8";
*{
padding: 0;
margin: 0;
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
#header{}
#header h1{
width: 100%;
height: 60px;
background-color: rgba(255, 255, 255, 0.5);
position: fixed;
left: 0;
top: 0;
text-align: center;
line-height: 60px;
}
#dot{
position: fixed;
/* 위치 배치 */
top: 50%;
right: 20px;
transform: translateY(-50%);
}
#dot ul{}
#dot ul li{
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.3);
margin: 10px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255,255,255,0);
transition: all 0.5s;
/* a의 기준점 */
position: relative;
}
#dot ul li a{
background-color: rgba(255, 255, 255,1);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
transition: all 0.5s;
}
#dot ul li.active{
/* shadow 거리를 넣어주어 크기를 키울 수 있다. */
box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
}
#dot ul li.active a{
/* active 되어있다는 표시넣기 */
transform: scale(0.4);
}
/* em 숨겨주기 */
#dot ul li em{font-size: 0;line-height: 0;text-indent: -99999px; width: 0;height: 0;}
#contents{}
#contents>div{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#contents>div>h2{
font-size: 5vw;
color: #fff;
text-shadow: 2px 2px 5px #bbb;
}
#div1{background-color: lightblue;}
#div2{background-color: lightpink;}
#div3{background-color: lavenderblush;}
#div4{background-color: lightgray;}
#div5{background-color: lightsalmon;}
#div6{background-color: lightseagreen;}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 68_ 하이시네마 탭메뉴_02 (0) | 2023.07.07 |
|---|---|
| 비주얼 스튜디오 코드 67_ 하이시네마 탭메뉴 (0) | 2023.07.06 |
| 비주얼 스튜디오 코드 65_파노라마 회사 소개 (0) | 2023.07.05 |
| 비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03 (0) | 2023.07.05 |
| 비주얼 스튜디오 코드 63_ parallax07 (0) | 2023.07.05 |