728x90
반응형
화면이 이동하면서 글자들이 나오는 액션
html 마크업
css 편집
#contents css 편집
#header css 편집
#nav css 편집
dot 위치시키기
dot 모양 만들기
**parallax를 사용하지 않아도 링크를 걸면 해당 화면에 페이지로 이동하는 것을 볼 수 있다.
<script>
화면이 이동하면서 글자들이 나오는 액션
각div에 show를 넣어주어야한다.
<script>
스크롤 200만큼 내려주면 글자가 나타난다.
나머지 h2도 show를 넣어준다.
반응형일 경우에는 퍼센티지로 설정해주는 것이 좋다.
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화면이 이동하면서 글자들이 나오는 액션</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header id="header">
<h1>WEB'S</h1>
</header>
<nav id="dot">
<ul>
<li class="active"><a href="#section1"><em>menu1</em></a></li>
<li><a href="#section2"><em>menu2</em></a></li>
<li><a href="#section3"><em>menu3</em></a></li>
<li><a href="#section4"><em>menu4</em></a></li>
<li><a href="#section5"><em>menu5</em></a></li>
<li><a href="#section6"><em>menu6</em></a></li>
</ul>
</nav>
<section id="contents">
<div id="section1"><h2>잘살아라!<br>그게 최고의 복수다</h2></div>
<div id="section2"><h2>꿈을 크게 가지면<br>깨져도 그 조각이 크다</h2></div>
<div id="section3"><h2>꽃이 방안에 있으면<br>벌이 어떻게 찾아가겠어요?</h2></div>
<div id="section4"><h2>절망하지 마라<br>종종 열쇠 꾸러미의 마지막 열쇠가<br> 자물쇠를 연다.</h2></div>
<div id="section5"><h2>하고싶은 일에는<br>방법이 보이고,<br>하기 싫은 일에는 핑계가 보인다.</h2></div>
<div id="section6"><h2>실패는 삶에서<br>불필요한 것들을 제거해준다.</h2></div>
</section>
<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").animate({scrollTop:offset},600);
});
$(window).scroll(function(){
let wScroll = $(this).scrollTop();
console.log(wScroll);
if(wScroll >= cont.eq(0).offset().top){
dot.removeClass("active");
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");
}
//animation
if(wScroll >= cont.eq(0).offset().top + 200){
cont.eq(0).addClass("show");
}
if(wScroll >= cont.eq(1).offset().top + 100){
cont.eq(1).addClass("show");
}
if(wScroll >= cont.eq(2).offset().top + 50){
cont.eq(2).addClass("show");
}
if(wScroll >= cont.eq(3).offset().top - 50){
cont.eq(3).addClass("show");
}
if(wScroll >= cont.eq(4).offset().top + 50){
cont.eq(4).addClass("show");
}
if(wScroll >= cont.eq(5).offset().top - 100){
cont.eq(5).addClass("show");
}
});
</script>
</body>
</html><css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
/* header */
#header{
position: fixed;
width: 100%;
height: 60px;
background-color: rgba(255, 255, 255, 0.3);
}
#header h1{
display: flex;
justify-content: center;
align-items: center;
}
/* nav */
#dot{
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
#dot ul{}
#dot ul li{
width: 20px;
height: 20px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
border-radius: 50%;
margin: 10px;
position: relative;
}
#dot ul li a{
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
/* menu텍스트 없애주기 */
#dot ul li a em{
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
#dot ul li.active{
box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
}
#dot ul li.active a{
transform: scale(0.4);
}
/* contents */
#contents{
text-align: center;
}
#contents > div{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#contents > div > h2{
font-size: 4vw;
color: #fff;
}
#section1{background-color: palevioletred;}
#section2{background-color: palegreen;}
#section3{background-color: palegoldenrod;}
#section4{background-color: paleturquoise;}
#section5{background-color: peru;}
#section6{background-color: plum;}
/* animation */
#contents > div >h2{transition: all 0.6s;}
#section1 > h2{opacity: 0; transform: translate(0,0);}
#section2 > h2{opacity: 0; transform: translate(0,-200px);}
#section3 > h2{opacity: 0; transform: translate(-200px,0);}
#section4 > h2{opacity: 0; transform: translate(200px,0);}
#section5 > h2{opacity: 0; transform: rotate(450deg);}
#section6 > h2{opacity: 0; transform: skew(80deg);}
/* div가 show를 만나면 초기화시킬 것이다. */
#contents > div.show >h2{transform: none;}
/* section1 이 show를 만나면 보이게하기 */
#section1.show > h2{opacity: 1;}
#section2.show > h2{opacity: 1;}
#section3.show > h2{opacity: 1;}
#section4.show > h2{opacity: 1;}
#section5.show > h2{opacity: 1;}
#section6.show > h2{opacity: 1;}
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 72_parallax08 (0) | 2023.07.11 |
|---|---|
| 비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입) (0) | 2023.07.10 |
| 비주얼 스튜디오 코드 69_파노라마 회사소개02 (0) | 2023.07.07 |
| 비주얼 스튜디오 코드 68_ 하이시네마 탭메뉴_02 (0) | 2023.07.07 |
| 비주얼 스튜디오 코드 67_ 하이시네마 탭메뉴 (0) | 2023.07.06 |