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

비주얼 스튜디오 코드 72_parallax08

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

화면이 움직이면 글자가 바운딩해서 나타남

html mark up

css 편집

#header 편집

#dot 편집

#header 편집

<script>

menu의 변수값인 Btn을 if문에 추가한다.

<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>로고</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");
            }

        });
    </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;
}
728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 74_ 하이시네마 footer  (0) 2023.07.11
비주얼 스튜디오 코드 73_animation 화면이 움직이면 글자가 바운딩해서 나타남  (0) 2023.07.11
비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입)  (0) 2023.07.10
비주얼 스튜디오 코드 70_parallax07  (0) 2023.07.10
비주얼 스튜디오 코드 69_파노라마 회사소개02  (0) 2023.07.07

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

  • 현재글비주얼 스튜디오 코드 72_parallax08

관련글

티스토리툴바