비주얼 스튜디오 코드

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드_75 animation

조반짝 2023. 7. 12. 12:21

728x90

한 글자씩 애니메이션 적용

html markup

article > div > h2안에 span 사이에 한 글자씩 넣기

article 6까지 마크업한다.

css 편집

#header css edit

transiton : all 은 모두 움직이는 속도를 주지만 움직이고 싶은 명령어만 지정해서 속도를 넣을 수 있다.

#dot edit

변수 지정 - 1. var : var은 변수를 중복 지정할 때 변수를 찾지 못한다.

2. let : let은 변수를 중복 지정할 때 변수를 찾을 수 있기 때문에 권장.

상수 지정 - cosnt

animaition 효과

@keyframe을 사용하여 animation 적용한다.

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

현재글비주얼 스튜디오 코드_75 animation

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

웹디자인, 이클립스, ACTIVE, HTML, float, JavaScript, 프론트엔드, if문, Java, For문, SQL, Parallax, position, 코딩테스트, offset, 자바스크립트, media, 비주얼스튜디오코드, 자바, CSS,

Today :
Yesterday :

조반짝의 도전일지