• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

네비게이션 바를 보이게 하고싶은데요

20.12.01 15:17 작성 조회수 213

0

제가 노란색으로 칠한 부분에 네비게이션 바를 보이게 하고 싶습니다. 코드를 짯는데 보니까 저 커버 이미지에 가려서 보이지 않아요 여기서 어떤 부분을 고쳐야 이미지 아래에 고정돼서 수평네비바가 보일 수 있을까요..??ㅜㅜ

<!DOCTYPE html>
<html>

<head>
    <title>page2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
       
        body{
          
            overflow-xhidden;
            margin:0;
            padding:0;   
        }
        /* 타이틀 헤더 */
        section.titleWrap{
            positionfixed;
            height800px;
            width:100%;
            top:0;
            left:0;
        }
        h1{
            positionabsolute;
            color:#eee;
            text-align:center;
            padding-top:320px;
            width100%;
            font-size100px;
            z-index1;

        }
        .cover{
            positionfixed;
            width100%;
            height800px;
            background-colorrgba(0,0,0,1);
        }
        .coverImg{
            positionfixed;
            width100%;
            height800px;
            background:url(img/ba.jpgcenter center / cover no-repeat;
        }

        /* 본문영역 */
        section.textWrap{
            positionrelative;
            width100%;
            margin-top800px;
            padding-top:100px;
            background-color#fff;
            z-index1;
        }
        .innerWrap{
            width80%;
            margin0 auto;
        }
        

        p{
            color :#111;
            font-size : 15px
            line-height28px;
            margin-bottom:  80px;
        }
        * {
            box-sizingborder-box;
            }
            /* Style the header */
        .header {
                background-color#f1f1f1;
                padding20px;
                text-aligncenter;
        }
        .topnav {
                overflowhidden;
                background-color#333;
                z-index100;
         }
         .topnav a {
                floatleft;
                displayblock;
                color#f2f2f2;
                text-aligncenter;
                padding14px 16px;
                text-decorationnone;
                z-index100;
        }
        .topnav a:hover {
                background-color#ddd;
                colorblack;
                z-index100;
        }
        li {displayinline;}


    </style>
    <script>
        let scrollTop =0;
        let h1;
        let coverImg;
        let cover;
        let bar;
        let panWrap;

        window.onload =function(){
            h1document.getElementsByTagName("h1")[0];

            coverImgdocument.getElementsByClassName("coverImg")[0];
            coverdocument.getElementsByClassName("cover")[0];
            cover.style.opacity = .3;

            // bar= document.getElementsByClassName("bar")[0];
            // panWrap = document.getElementsByClassName("panWrap")[0];
        }

        window.addEventListener("scroll",function(e){
            scrollTop =document.documentElement.scrollTop;
            h1.style.transform = "translate(0,"+ -scrollTop/10 +"px)";
        
            // let per =Math.ceil(scrollTop / (document.body.scrollHeight - window.outerHeight)*100);
            coverImg.style.transform = "scale("+ (1 + scrollTop/1000) +")";
        cover.style.opacity = .3 + scrollTop / 1000;
           
            //console.log(per);
            // bar.style.height = per +"%";
            // panWrap.style.transform = "translate(0, " + scrollTop / 1.2 +"px)";
        });
    </script>
    </head>
    <body>
        
        <section class="titleWrap">
            <div class="coverImg"></div>
            <div class="cover"> </div>
            <div class="topnav">
                <a href="www.naver.com">Player</a>
                <a href="#">Weapon</a>
                <a href="#">추천추천</a>
                <a href="file:///C:/Users/%EA%B9%80%EC%86%8C2/Desktop/%EB%8D%B0%EC%9E%87%EA%B1%B8%EC%A6%88/%EB%8D%B0%EB%AA%A8%EB%8D%B0%EC%9D%B4/webpage_bg5/webpage_bg5/About5.html">team 5</a>
              </div>
            <h1>2번 페이지</h1>
            

          </section>

          <section class="textWrap">
            <div class="innerWrap">
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
              <p>소담스러운 불어 천하를 청춘의 가진 청춘의 이것이다. 이상의 청춘이 가치를 원대하고, 역사를 이상의 있다. 우리 풍부하게 청춘 거친 하여도 그들의 관현악이며, 놀이 이것을 끓는다. 않는 보내는 것은 이상 밥을 그들에게 심장은 위하여 운다. 어디 거선의 되려니와, 않는 굳세게 이것이다. 광야에서 할지라도 내려온 커다란 곳으로 능히 모래뿐일 풀이 우리는 아니다. 심장은 찾아다녀도, 그들의 커다란 꽃이 보는 것이다. 뼈 산야에 원대하고, 소담스러운 꽃 내려온 가슴에 이것이다. 같은 인류의 할지라도 간에 어디 사는가 가는 쓸쓸하랴?
                너의 있을 들어 피가 가지에 생의 같은 아니다. 싸인 소담스러운 열락의 용감하고 것은 두기 이상의 구하지 길을 아니다. 인간의 피어나기 끝에 품고 때에, 트고, 심장의 운다. 아니한 위하여서 무엇을 뿐이다. 오직 이상은 만천하의 투명하되 아니다. 싹이 이것은 인도하겠다는 있는가? 뼈 위하여, 얼음과 있으랴? 우리는 내려온 피어나기 사막이다. 피가 커다란 피가 위하여서 눈이 그들의 찬미를 황금시대의 이 것이다. 무한한 힘차게 기관과 황금시대의 끓는다. 이상 우리는 품었기 방지하는 긴지라 남는 관현악이며, 이상은 실현에 것이다.      
                품고 이것이야말로 하는 우리 불어 찬미를 반짝이는 가장 뿐이다. 과실이 새가 심장의 듣기만 하는 그들은 보이는 안고, 갑 이것이다. 꾸며 생명을 그들은 반짝이는 싹이 날카로우나 무엇이 것이다. 들어 싸인 아니한 그들은 눈이 그들은 끓는다. 피는 열락의 것은 피다. 속에 발휘하기 피에 별과 인간이 청춘 칼이다. 곳이 꽃이 찬미를 바이며, 살았으며, 구할 것이다. 피어나는 끝까지 영원히 날카로우나 뿐이다. 같은 수 산야에 맺어, 뭇 꽃이 찾아 보라.
              </p>
            </div>
          </section>
          
        
        
        

    </body>
    </html>

답변 11

·

답변을 작성해보세요.

1

넵 감사합니다!  잘 해결 됐어요!! 

1



    <!DOCTYPE html>
<html>

<head>
    <title>배틀그라운드연구소</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        * {
                box-sizingborder-box;
        }
            /* Style the header */
        .header {
                background-color#f1f1f1;
                padding20px;
                text-aligncenter;
        }
        .topnav {
                overflowhidden;
                background-color#333;
                z-index100;
                positionrelative;
         }
         .topnav a {
                
                floatleft;
                displayblock;
                color#f2f2f2;
                text-aligncenter;
                padding14px 16px;
                text-decorationnone;
                z-index100;
        }
        .topnav a:hover {
                background-color#ddd;
                colorblack;
                z-index100;
        }
        li {displayinline;}
/* 상단 바 끝 */
       
    
        
        body
            positionrelative;
            background-colorblack;
            /* cursor: none;    */
            overflowhidden;
            margin:0;
        }
        h1{
            color#fff;
        }
        /* .cursor_item{
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: red;
            top:0;
            left:0;
            margin: -50px 0 0 -50px;
            transition: all 500ms cubic-bezier(0.930, 0.005, 0.040, 1.005);
                     
        }
     */
        
        /* button:hover{
            background: red;
            color: #fff;
            font-size: 80px;
            padding : 80px 150px;
        } */
        .human{
            positionabsolute;
            width500px;
            left:calc(50% - 150px) ; /*사진 가운데로*/ 
            z-index100;  /*사람 이미지 맨 앞으로 갖고오기*/
        }
        .bg{
            positionabsolute;
        }
      

    </style>
    
    
    <!-- <style type="text/css">
        body{cursor: url('cursor.cur'),auto;}

    </style> -->
    <script>
        let human;
        let bg;
        let h1;

        let x =0;
        let y =0;
        let mx=0;   //마우스  x
        let my=0//마우스 y
        let speed =0.009//마우스 얼마의 속도로 따라올지
        
        window.onload =function(){

            h1 = document.getElementsByTagName("h1")[0]; //마우스 부드럽게
            human = document.getElementsByClassName("human")[0];
            bg = document.getElementsByClassName("bg")[0];

            window.addEventListener("mousemove",mouseFunc,false);

            function mouseFunc(e){
                x= (e.clientX - window.innerWidth / 2); // 창의 반 크기를 마우스 움직임 크기에서 빼기
                y= (e.clientY - window.innerHeight / 2);
                
            }
            loop();  //마우스 부드럽게
        }  
        function loop(){
            mx += (x - mx) *speed;
            my += (y - my) *speed;
            //console.log(x,mx)
            // h1.innerHTML ="x:"+x+"mx:"+mx; //x와 mx의 값 출력
            human.style.transform = "translate("+-(mx/6)+"px,"+ -(my/6)+"px)";
            // my 대신에 -my주면 반대로 움직임
            // 사진을 더 조금 움직이게 하고 싶으면 mx,my값을 나눠준다 -> mx/6,my/원하는 수
            bg.style.transform = "translate("+ (mx/2)+"px,"+ (my/2)+"px)";

            window.requestAnimationFrame(loop);
        }
        
    </script>
    </head>
    <body>
        
          
        <div class="topnav">
            <a href="https://kimsoi.github.io/webpage_bg5/">Lab</a>
            <a href="#">Weapon</a>
            <a href="#">추천추천</a>
            <a href="file:///C:/Users/%EA%B9%80%EC%86%8C2/Desktop/%EB%8D%B0%EC%9E%87%EA%B1%B8%EC%A6%88/%EB%8D%B0%EB%AA%A8%EB%8D%B0%EC%9D%B4/webpage_bg5/webpage_bg5/About5.html">team 5</a>
          </div>

        <img src="lolo.png"  width ="100" height-"100" class = "human" alt="배틀그라운드 로고"> 
        <img src="obj.png" class = "bg" alt="사막배경">
       
        
  </body>
  </html>


1

오!! 감사합니다 바로 나왔어요 ! 그런데 스크롤을 내려도 네비게이션 바가 고정되어서 보이게 하려면 어떻게해야하나욥..??

0

네~! 감사합니다.

0

다행이네요. 혹시 질문 '해결' 버튼이 있나요? 미해결이라고 나와있어서요.

그리고 나중에 수강평도 부탁드려요 ^^ 즐거운 하루 보내세요

0

더 안전(?) 하게 이미지 두개를 하나의 div로 감싸주세요. <div class="imgWrap"> imgWrap에 zindex를 1만 주시고요. Image 의 zindex 는 빼고요.

이래도 안되면 제가 내일 아침에 소스 다운받아서 봐드릴게요

0

topnav a에 zindex 빼고 topnav 에 zindex를 1000으로 줬는데 처음에 페이지 켰을때만 상단바 뒤로 잘 가고 다른 페이지로 넘어갔다가 돌아오면 다시 이미지가 상단바 위로 가서 상단바가 안눌리는데 이건 어떻게 제어하나요... ?? 

0

topnav a에는 zindex 빼주셔도 되고요. tobnav zindex를 1000으로 주세요. 이미지와 같은 100으로 되어있네요

0

@@질문있씁니다.@@

지금 여기서 그림이 상단바까지 올라와서 네비게이션 바가 잘 안눌리는것 같습니다

>1.  원래 이미지가 네비게이션 바까지 침범하면 안눌리나요?

> 2. 그래서 이미지들을 양옆으로만 움직이게 하고싶은데 y값을 삭제해도 적용이 안돼요 ㅜㅜ  

0

position:fixed; 하시고 top:0; 해보시면 될거에요

0

안녕하세요. 

topnav 에 z-index 를 주셨는데요. position : relative; 도 같이 줘보세요. 

그래도 안 되시면 바로 답글 주세요~