728x90
반응형
한 글자씩 애니메이션 적용
html markup
article > div > h2안에 span 사이에 한 글자씩 넣기
article 6까지 마크업한다.
css 편집
#header css edit
transiton : all 은 모두 움직이는 속도를 주지만 움직이고 싶은 명령어만 지정해서 속도를 넣을 수 있다.
#dot edit
<script>
변수 지정 - 1. var : var은 변수를 중복 지정할 때 변수를 찾지 못한다.
2. let : let은 변수를 중복 지정할 때 변수를 찾을 수 있기 때문에 권장.
상수 지정 - cosnt
animaition 효과
@keyframe을 사용하여 animation 적용한다.
<script>
if문
만약에 wScroll이 cont 0번째보다 같거나 크면 top에서 50내려왔을 때 0번째 cont의 "show" 추가해주어라.
span:nth-of-type(1)에 애니메이션이 delay 0초가 걸려 opacity가 적용 되었다.
article2 animation
animation-delay 을 script에 적용해보기
.show를 span 뒤에 넣기
● Animation script
●each: 요소를 계속 반복해서 불러줌 / span의 갯수만큼 계속 회전을 해주어야함
●i: 배열요소
●setTimeout: 일정 시간 뒤에 실행하고 끝
i 변수값을 지정한다.
100*(i+1) : (i+1)= 1 * 100 / 0.1초동안 계속 변함
i값이 span의 갯수 0-17까지 계속변해야함 그래서 let로 변수를 지정한다.
each가 반복해주고 setTimeout이 일정시간뒤에 실행하고 끝내기 때문에 delay효과를 줄 수 있음
i를 한번 지정(let)하면 i의 배열값만 지정해주면 된다.
<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>Website</h1>
</header>
<nav id="dot">
<ul>
<li class="active"><a href="#"><em>dot1</em></a></li>
<li><a href="#"><em>dot2</em></a></li>
<li><a href="#"><em>dot3</em></a></li>
<li><a href="#"><em>dot4</em></a></li>
<li><a href="#"><em>dot5</em></a></li>
<li><a href="#"><em>dot6</em></a></li>
</ul>
</nav>
<section id="contents">
<article id="article1">
<div>
<h2><span>바</span><span>쁘</span><span>게</span> <span>살</span><span>던</span><span>가</span><span>!</span><br>
<span>바</span><span>쁘</span><span>게</span> <span>노</span><span>력</span><span>하</span><span>던</span><span>가</span><span>!</span>
</h2>
</div>
</article>
<article id="article2">
<div>
<h2><span>편</span><span>안</span><span>함</span><span>이</span> <span>끝</span><span>나</span><span>고</span>
<span>궁</span><span>핍</span><span>이</span> <span>시</span><span>작</span> <span>될</span> <span>때</span> <br> <span>인</span><span>생</span><span>의</span> <span>가</span><span>르</span><span>침</span><span>이</span> <span>시</span><span>작</span><span>된</span><span>다</span><span>!</span>
</h2>
</div>
</article>
<article id="article3">
<div>
<h2>
<span>시</span><span>간</span><span>이</span> <span>약</span><span>이</span><span>면</span> <span>뭐</span><span>해</span><span>!</span><br><span>마</span><span>음</span><span>이</span> <span>기</span><span>억</span><span>하</span><span>는</span><span>데</span><span>~</span>
</h2>
</div>
</article>
<article id="article4">
<div>
<h2>
<span>예</span><span>쁜</span> <span>꽃</span><span>을</span> <span>찍</span><span>으</span><span>려</span><span>면</span><br> <span>예</span><span>쁜</span> <span>꽃</span><span>을</span> <span>볼</span> <span>줄</span> <span>알</span><span>아</span><span>야</span><span>지</span>
</h2>
</div>
</article>
<article id="article5">
<div>
<h2>
<span>항</span><span>상</span> <span>이</span><span>길</span>
<span>수</span><span>는</span> <span>없</span><span>지</span><span>만</span><span>,</span> <br><span>항</span><span>상</span> <span>배</span><span>울</span> <span>수</span><span>는</span> <span>있</span><span>다</span><span>!</span>
</h2>
</div>
</article>
<article id="article6">
<div>
<h2>
<span>난</span><span>쟁</span><span>이</span><span>들</span><span>에</span> <span>둘</span><span>러</span><span>싸</span><span>여</span> <span>있</span><span>다</span><span>고</span><span>,</span> <br><span>거</span><span>인</span><span>이</span> <span>되</span><span>는</span> <span>것</span><span>은</span> <span>아</span><span>니</span><span>다</span>
</h2>
</div>
</article>
</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 > article")
let i;
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);
//변수: var 중복 지정 되었을 때 변수를 찾지 못한다.
// let는 중복지정할 때 변수를 찾아준다.
//const: 상수지정
});
$(window).scroll(function(){
let wScroll = $(this).scrollTop();
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")
}
//애니메이션
if(wScroll >= cont.eq(0).offset().top +50){
cont.eq(0).addClass("show");
}
if(wScroll >= cont.eq(1).offset().top +10){
cont.eq(1).addClass("show");
}
if(wScroll >= cont.eq(2).offset().top +10){
cont.eq(2).addClass("show");
}
//animation script
if(wScroll >= cont.eq(3).offset().top + 10){
$("#article4 h2 span").each(function(i){
setTimeout(function(){
$("#article4 h2 span").eq(i).addClass("show");
},100*(i+1));
});
}
if(wScroll >= cont.eq(4).offset().top + 10){
$("#article5 h2 span").each(function(i){
setTimeout(function(){
$("#article5 h2 span").eq(i).addClass("show");
},100*(i+1));
});
}
if(wScroll >= cont.eq(5).offset().top - 10){
$("#article6 h2 span").each(function(i){
setTimeout(function(){
$("#article6 h2 span").eq(i).addClass("show");
},100*(i+1));
});
}
});
</script>
</body>
</html><css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol,li,ul,dd,dt,dl{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix::before, .clearfix::after{
display: block;
content: "";
clear: both;
}
#header{
position: fixed;
width: 100%;
height: 60px;
background-color: rgba(255, 255, 255, 0.3);
z-index: 51;
}
#header h1{
display: flex;
justify-content: center;
align-items: center;
}
#dot{
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 50;
}
#dot ul{}
#dot ul li{
width: 20px;
height: 20px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
margin: 10px;
/* box-shadow가 움직여야하기 때문에 움직이고 싶은 명령어만 복사해서 넣는다. */
transition: box-shadow 0.3s;
}
#dot ul li a{
background-color: rgba(255, 255, 255, 0.7);
display: block;
transition: background-color 0.3s, tranform 0.3s;
}
#dot ul li.active{
box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
}
#dot ul li.active a{
background-color: rgba(255, 255, 255, 1);
transform: scale(0.4);
}
#dot ul li a em{
/* 글씨없애기 */
font-size: 0;
width: 0;
height: 0;
line-height: 0;
text-indent: -999999px;
}
#contents{
text-align: center;
}
#contents > article{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#contents > article > div{}
#contents > article > div h2{
font-size: 4vh;
}
#article1{background-color: yellow;}
#article2{background-color: aqua;}
#article3{background-color: chartreuse;}
#article4{background-color: rebeccapurple;}
#article5{background-color: hotpink;}
#article6{background-color: orangered;}
/* animation */
#article1 h2 span{
opacity: 0.1;
display: inline-block;
}
#article1.show h2 span{
animation: ani1 0.3s ease forwards;
/* article1이 show를 만나면 animation 발동, forwards 100%에서 멈추어줌 */
}
/* 각 span별로 animation-delay 적용 */
#article1.show h2 span:nth-of-type(1){animation-delay: 0s;}
#article1.show h2 span:nth-of-type(2){animation-delay: 0.05s;}
#article1.show h2 span:nth-of-type(3){animation-delay: 0.1s;}
#article1.show h2 span:nth-of-type(4){animation-delay: 0.15s;}
#article1.show h2 span:nth-of-type(5){animation-delay: 0.2s;}
#article1.show h2 span:nth-of-type(6){animation-delay: 0.25s;}
#article1.show h2 span:nth-of-type(7){animation-delay: 0.3s;}
#article1.show h2 span:nth-of-type(8){animation-delay: 0.35s;}
#article1.show h2 span:nth-of-type(9){animation-delay: 0.4s;}
#article1.show h2 span:nth-of-type(10){animation-delay: 0.45s;}
#article1.show h2 span:nth-of-type(11){animation-delay: 0.5s;}
#article1.show h2 span:nth-of-type(12){animation-delay: 0.55s;}
#article1.show h2 span:nth-of-type(13){animation-delay: 0.6s;}
#article1.show h2 span:nth-of-type(14){animation-delay: 0.65s;}
#article1.show h2 span:nth-of-type(15){animation-delay: 0.7s;}
#article1.show h2 span:nth-of-type(16){animation-delay: 0.75s;}
@keyframes ani1{
0%{opacity: 0;}
100%{opacity: 1;}
/* keyframes은 100%가 지나면 0%, 제자리로 돌아가는 속성이 있다. */
}
#article2 h2 span{
opacity: 0.1;
display: inline-block;
}
#article2.show h2 span{
animation: ani2 0.3s ease forwards;
}
#article2.show h2 span:nth-of-type(1){animation-delay: 0s;}
#article2.show h2 span:nth-of-type(2){animation-delay: 0.1s;}
#article2.show h2 span:nth-of-type(3){animation-delay: 0.15s;}
#article2.show h2 span:nth-of-type(4){animation-delay: 0.2s;}
#article2.show h2 span:nth-of-type(5){animation-delay: 0.25s;}
#article2.show h2 span:nth-of-type(6){animation-delay: 0.3s;}
#article2.show h2 span:nth-of-type(7){animation-delay: 0.35s;}
#article2.show h2 span:nth-of-type(8){animation-delay: 0.4s;}
#article2.show h2 span:nth-of-type(9){animation-delay: 0.45s;}
#article2.show h2 span:nth-of-type(10){animation-delay: 0.5s;}
#article2.show h2 span:nth-of-type(11){animation-delay: 0.55s;}
#article2.show h2 span:nth-of-type(12){animation-delay: 0.6s;}
#article2.show h2 span:nth-of-type(13){animation-delay: 0.65s;}
#article2.show h2 span:nth-of-type(14){animation-delay: 0.7s;}
#article2.show h2 span:nth-of-type(15){animation-delay: 0.75s;}
#article2.show h2 span:nth-of-type(16){animation-delay: 0.8s;}
#article2.show h2 span:nth-of-type(17){animation-delay: 0.85s;}
#article2.show h2 span:nth-of-type(18){animation-delay: 0.90s;}
#article2.show h2 span:nth-of-type(19){animation-delay: 0.95s;}
#article2.show h2 span:nth-of-type(20){animation-delay: 1.0s;}
#article2.show h2 span:nth-of-type(21){animation-delay: 1.05s;}
#article2.show h2 span:nth-of-type(22){animation-delay: 1.1s;}
#article2.show h2 span:nth-of-type(23){animation-delay: 1.15s;}
#article2.show h2 span:nth-of-type(24){animation-delay: 1.2s;}
#article2.show h2 span:nth-of-type(25){animation-delay: 1.25s;}
#article2.show h2 span:nth-of-type(26){animation-delay: 1.3s;}
@keyframes ani2{
0%{transform: translate(-150px,-150px) rotate(-180deg) scale(3);}
60%{transform: translate(20px,20px) rotate(30deg) scale(0.3);}
/* opacity는 ;뒤에 넣는다 */
100%{transform: translate(0,0) rotate(0deg) scale(1); opacity: 1;}
}
#article3 h2 span{
opacity: 0.1;
display: inline-block;
}
#article3.show h2 span{
animation: ani3 0.3s ease forwards;
}
#article3.show h2 span:nth-of-type(1){animation-delay: 0s;}
#article3.show h2 span:nth-of-type(2){animation-delay: 0.1s;}
#article3.show h2 span:nth-of-type(3){animation-delay: 0.15s;}
#article3.show h2 span:nth-of-type(4){animation-delay: 0.2s;}
#article3.show h2 span:nth-of-type(5){animation-delay: 0.25s;}
#article3.show h2 span:nth-of-type(6){animation-delay: 0.3s;}
#article3.show h2 span:nth-of-type(7){animation-delay: 0.35s;}
#article3.show h2 span:nth-of-type(8){animation-delay: 0.4s;}
#article3.show h2 span:nth-of-type(9){animation-delay: 0.45s;}
#article3.show h2 span:nth-of-type(10){animation-delay: 0.5s;}
#article3.show h2 span:nth-of-type(11){animation-delay: 0.55s;}
#article3.show h2 span:nth-of-type(12){animation-delay: 0.6s;}
#article3.show h2 span:nth-of-type(13){animation-delay: 0.65s;}
#article3.show h2 span:nth-of-type(14){animation-delay: 0.7s;}
#article3.show h2 span:nth-of-type(15){animation-delay: 0.75s;}
#article3.show h2 span:nth-of-type(16){animation-delay: 0.8s;}
#article3.show h2 span:nth-of-type(17){animation-delay: 0.85s;}
#article3.show h2 span:nth-of-type(18){animation-delay: 0.90s;}
@keyframes ani3{
0%{transform: translate(200px,-100px) scale(2); }
60%{transform: translate(0px,20px) rotate(-180deg); }
100%{transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
}
#article4 h2 span{
opacity: 0.1;
display: inline-block;
}
#article4 h2 span.show{
opacity: 1;
animation: ani4 0.3s ease forwards;
}
@keyframes ani4{
40%{transform: translate(50px,0) scale(0.7); opacity:1; color: #348c04}
60%{color: red;}
80%{transform: translate(0) scale(2); opacity: 0; color: violet}
100%{transform: translate(0) scale(1); opacity: 1; color: black;}
}
#article5 h2 span{
opacity: 0.1;
display: inline-block;
}
#article5 h2 span.show{
opacity: 1;
animation: ani5 0.3s ease forwards;
}
@keyframes ani5{
10%{transform: translate(0, -50px) rotate(-270deg) scale(4);}
50%{transform: translate(0, -50px) rotate(0deg) scale(0.8);}
80%{transform: translate(-100px, -100px) rotate(180deg) scale(1.5); opacity: 0;}
100%{transform: translate(0px, 0px) rotate(0deg) scale(0); opacity: 1;}
}
#article6 h2 span{
opacity: 0.1;
display: inline-block;
}
#article6 h2 span.show{
opacity: 1;
animation: ani6 0.3s ease forwards;
}
@keyframes ani6{
10%{transform: translateY(-30PX) skew(-15deg) scale(4); color: white;}
40%{transform: translateY(50px) skew(10deg) scale(0.8); color: rgb(243, 243, 41);}
80%{transform: translateY(-50px) skew(15deg) scale(1.5); opacity: 0; color: rgb(0, 157, 255);}
100%{transform: translate(0px, 0px) skew(0) scale(1); opacity: 1; color: bisque;}
}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 76_파노라마_완성 (0) | 2023.07.13 |
|---|---|
| [JAVA]JAVA 자료형 (0) | 2023.07.12 |
| 비주얼 스튜디오 코드 74_ 하이시네마 footer (0) | 2023.07.11 |
| 비주얼 스튜디오 코드 73_animation 화면이 움직이면 글자가 바운딩해서 나타남 (0) | 2023.07.11 |
| 비주얼 스튜디오 코드 72_parallax08 (0) | 2023.07.11 |
