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

비주얼 스튜디오 코드 73_animation 화면이 움직이면 글자가 바운딩해서 나타남

조반짝 2023. 7. 11. 11:24
728x90
반응형

https://cdnjs.com/

 

 

cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil

cdnjs.com

parallax08 이어서 하기

 

css animation 추가

원하는 효과 클릭하면 복사가 된다.

animation 명령어 넣고 복사한 코드붙여 넣기 그 뒤에 속도 넣기

<script _ animation>

<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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
    <header id="header">
        <h1>로고</h1>
        <nav class="nav">
            <ul>
                <li class="active"><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
                <li><a href="#">menu5</a></li>
                <li><a href="#">menu6</a></li>
            </ul>
        </nav>
    </header>
    <nav id="dot">
        <ul>
            <li class="active"><a href="#"><em>dot_menu1</em></a></li>
            <li><a href="#"><em>dot_menu2</em></a></li>
            <li><a href="#"><em>dot_menu3</em></a></li>
            <li><a href="#"><em>dot_menu4</em></a></li>
            <li><a href="#"><em>dot_menu5</em></a></li>
            <li><a href="#"><em>dot_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>돈 없이 노는게 지겹지</h2></div>
        <div id="section5"><h2>행복은 지배해야 하고<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");
        const Btn = $(".nav>ul>li");

        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);
        });

        Btn.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)

            //만약에 wscroll이 cont의 top값보다 크거나 같으면
            if(wScroll >= cont.eq(0).offset().top){
                // dot의 active값을 제거
                dot.removeClass("active");
                //dot의 eq(0)번째에 active값을 더해준다.
                dot.eq(0).addClass("active");
                // menu 값 액티브 활성화
                Btn.removeClass("active");
                Btn.eq(0).addClass("active");
            }
            if(wScroll >= cont.eq(1).offset().top){
                dot.removeClass("active");
                dot.eq(1).addClass("active");
                Btn.removeClass("active");
                Btn.eq(1).addClass("active");
            }
            if(wScroll >= cont.eq(2).offset().top){
                dot.removeClass("active");
                dot.eq(2).addClass("active");
                Btn.removeClass("active");
                Btn.eq(2).addClass("active");
            }
            if(wScroll >= cont.eq(3).offset().top){
                dot.removeClass("active");
                dot.eq(3).addClass("active");
                Btn.removeClass("active");
                Btn.eq(3).addClass("active");
            }
            if(wScroll >= cont.eq(4).offset().top){
                dot.removeClass("active");
                dot.eq(4).addClass("active");
                Btn.removeClass("active");
                Btn.eq(4).addClass("active");
            }
            if(wScroll >= cont.eq(5).offset().top){
                dot.removeClass("active");
                dot.eq(5).addClass("active");
                Btn.removeClass("active");
                Btn.eq(5).addClass("active");
            }

            if(wScroll >= cont.eq(0).offset().top + 50){
                cont.eq(0).addClass("show");
            }
            if(wScroll >= cont.eq(1).offset().top + 50){
                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 +10){
                cont.eq(5).addClass("show");
            }

        });
    </script>
</body>

</html>

<css>

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #222;
}
li{
    list-style: none;
}
.clearfix::after,.clearfix::before{
    display: block;
    content: "";
    clear: both;
}

#contents{
    text-align: center;
}
#contents > div{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#contents > div > h2{
    font-size: 4vw;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

#section1{background-color: springgreen;}
#section2{background-color: slateblue;}
#section3{background-color: seagreen;}
#section4{background-color: sandybrown;}
#section5{background-color: salmon;}
#section6{background-color: saddlebrown;}

#header{
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
}
#header h1{
    float: left;
}
#header nav{
    float: right;
    margin-right: 30px;
}
#header nav ul{   
}
#header nav ul li{
    display: inline;
}
#header nav ul li a{
    display: inline-block;
    padding: 20px 10px;
    font-weight: bold;
}
#header nav ul li.active a{
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}
#dot{
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
#dot ul{}
#dot ul li{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
    margin: 10px;
    transition: all 0.3s;
}
#dot ul li a{
    background-color: rgba(0, 0, 0, 0.7);
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: all 0.3s;
}
#dot ul li.active{
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
}
#dot ul li.active a{
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
    transform: scale(0.4);
}
#dot ul li a em {
    font-size: 0;
    line-height: 0;
}

/* animation */
#contents > div >h2{
    transition: all 0.6s;
}

#section1 h2{opacity: 0.2;}
#section2 h2{opacity: 0.2;}
#section3 h2{opacity: 0.2;}
#section4 h2{opacity: 0.2;}
#section5 h2{opacity: 0.2;}
#section6 h2{opacity: 0.2;}

#contents > div.show > h2{transform: none;}
#section1.show h2{opacity: 1; animation: bounce 1s;}
#section2.show h2{opacity: 1; animation: flash 1s;}
#section3.show h2{opacity: 1; animation: backInDown 1s;}
#section4.show h2{opacity: 1; animation: backInLeft 1s;}
#section5.show h2{opacity: 1; animation: backOutDown 1s;}
#section.show h2{opacity: 1; animation: backInUp 1s;}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드_75 animation  (1) 2023.07.12
비주얼 스튜디오 코드 74_ 하이시네마 footer  (0) 2023.07.11
비주얼 스튜디오 코드 72_parallax08  (0) 2023.07.11
비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입)  (0) 2023.07.10
비주얼 스튜디오 코드 70_parallax07  (0) 2023.07.10

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 73_animation 화면이 움직이면 글자가 바운딩해서 나타남

관련글

티스토리툴바