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

비주얼 스튜디오 코드 50 _ Parallax02

조반짝 2023. 6. 27. 14:53
728x90
반응형

html 골격 만들기

nav 생성

contents thml생성

css 편집

편집할 태그 셋팅하기

#nav 픽스하기

position : fixed;

그라디언트로 각 페이지에 배경색 채우기

 

#nav 편집

float을 위치잡기

menu 위치 편집

li 가 블럭 구조이기 때문에 옆으로 나열하기 위해 inlne 구조로 변경해주고

a태그는 인라인구조와 블럭구조 성격을 가질 수 있도록 inline-block 구조로 변경한다.

active 시에 글자색이 변경되도록 글자색 변경한다.

h2 편집

패럴럭스 이벤트 생성

active 시에 글자색이 변경되도록 글자색 변경되는 이벤트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>parallax02</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <nav id="nav">
        <h1>쿨또</h1>
        <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>
    <section id="contents">
        <article id="article1">
            <h2>Time is <strong>gold</strong></h2>
        </article>
        <article id="article2">
            <h2>Seeing is <strong>believing</strong></h2>
        </article>
        <article id="article3">
            <h2>Asking costs<strong>nothing</strong></h2>
        </article>
        <article id="article4">
            <h2><strong>Better</strong>is to bow than break</h2>
        </article>
        <article id="article5">
            <h2><strong>Habit</strong>is second nature</h2>
        </article>
        <article id="article6">
            <h2>Pain past is<strong>plaeasure</strong></h2>
        </article>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        // 변수(변하지 않는 값) 지정
        const nav = $("#nav > ul > li");
        const cont = $("#contents > article");

        nav.click(function(event){
            event.preventDefault();
            let target = $(this);
            // let 변하는 값 지정
            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){
            // 스크롤 된 값이 0보다 크면
                nav.removeClass("active");
                // 검정색 글자가 없어짐
                nav.eq(0).addClass("active");     
            }

            if(wScroll >= cont.eq(1).offset().top){
                nav.removeClass("active");
                // 기존에 있는 active 값을 지우고
                nav.eq(1).addClass("active");
                // eq(1)에 active값을 넣어준다.
            }

            if(wScroll >= cont.eq(2).offset().top){
                nav.removeClass("active");
                nav.eq(2).addClass("active");
            }
            
            if(wScroll >= cont.eq(3).offset().top){
                nav.removeClass("active");
                nav.eq(3).addClass("active");
            }
            
            if(wScroll >= cont.eq(4).offset().top){
                nav.removeClass("active");
                nav.eq(4).addClass("active");
            }
            
            if(wScroll >= cont.eq(5).offset().top){
                nav.removeClass("active");
                nav.eq(5).addClass("active");
            }
           
        });

    </script>
</body>
</html>

css

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


#nav{
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}
#nav h1{
    color: #fff;
    font-size: 40px;
    padding: 5px 5px 5px 15px;
    float: left;
}
#nav ul{
    float: right;
}
#nav ul li{
    display: inline;
}
#nav ul li a{
    color: #fff;
    display: inline-block;
    padding: 20px 10px;
    text-transform: uppercase;
}
#nav ul li.active{}
#nav ul li.active a{
    color: black;
}

#contents{}
#contents > article{
    width: 100%;
    height: 100vh;
    text-align: center;
    line-height: 100vh;
    white-space: nowrap;
    
}
#contents > article >h2{
    font-size: 90px;
    color: #fff;
}
#contents > article >h2 > strong{
    font-weight: 500;
    color: #fff;
    font-style: italic;
}

/* 링크는 아이디만 가능 */
#article1{
    background: radial-gradient(ellipse farthest-corner at center center, #f39264 0%, #f2606f 100%);
}
#article2{
    background: radial-gradient(ellipse farthest-corner at left top, #b39ddb 0%, #673ab7 100%);
}
#article3{
    background: radial-gradient(ellipse farthest-corner at center right, #ff8a80  0%, #c62828 100%);
}
#article4{
    background: radial-gradient(ellipse farthest-corner at top center, #81d4fa  0%, #01579b 100%);
}
#article5{
    background: radial-gradient(ellipse farthest-corner at bottom center, #b9f6ca  0%, #558b2f 100%);
}
#article6{
    background: radial-gradient(ellipse farthest-corner at center right,
     #f4ff81 0%, #ff6f00 100%);
}
728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기  (0) 2023.06.28
비주얼 스튜디오 코드 51_ 햄버거 메뉴  (0) 2023.06.27
비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴  (0) 2023.06.27
비주얼 스튜디오 코드 48_Parallax  (0) 2023.06.26
비주얼 스튜디오 코드 47_ 반응형 레이아웃  (0) 2023.06.26

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

  • 현재글비주얼 스튜디오 코드 50 _ Parallax02

관련글

티스토리툴바