인터랙티브 웹 개발(scrolltop 활용예제)

scrolltop 활용예제

---

스크롤을 내리면 상단 이미지가 커지면서 opacity값이 0.3으로 투명해지고 뒤에 검정배경이 나타나는 예제

예제보기

HTML

  <section class="titleWrap">
    <div class="coverImg"></div>
    <div class="cover"></div>
    <h1>제목</h1>
  </section>

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

CSS

      body {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
      }

      /* 타이틀 헤더 영역 */
      section.titleWrap {
        position: fixed;
        height: 800px;
        width: 100%;
        top:0;
        left:0;
      }
      h1 {
        position: absolute;
        color : #eee;
        text-align: center;
        padding-top:320px;
        width:100%;
        font-size: 50px;
        z-index: 1;
      }

      .cover {
        position:fixed;
        width: 100%;
        height: 800px;
        background-color: rgba(0,0,0,1);
      }
      .coverImg {
        position: fixed;
        width: 100%;
        height:800px;
        background: url(./images/bg.JPG) center center / cover no-repeat;
      }
      

      /* 본문 영역 */
      section.textWrap {
        position: relative;
        width: 100%;
        margin-top:800px;
        padding-top: 100px;
        background-color: #fff;
        z-index: 1;
      }
      .innerWrap {
        width: 80%;
        margin: 0 auto;
      }
      p {
        color : #111;
        font-size : 15px;
        line-height: 28px;
        margin-bottom : 80px;
      }

JS

    let scrollTop = 0;
    let h1;
    let coverImg;
    let cover;

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

        coverImg = document.getElementsByClassName("coverImg")[0];
        cover = document.getElementsByClassName("cover")[0];
        cover.style.opacity = .3;
      }

      window.addEventListener("scroll", function () {
        scrollTop = document.documentElement.scrollTop;

        //스크롤을 내리면 h1태그 안에 있는 글자가 위로 살짝 올라감
        h1.style.transform = "translate(0," + -scrollTop/10 + "px)";

        // 스크롤을 내리면 이미지가 살짝 움직임
        // coverImg.style.backgroundPosition = "center " + -scrollTop/20 + "px";

        // 스크롤을 내리면 이미지가 커짐
        coverImg.style.transform = "scale(" + (1+scrollTop/2000) + ")";

        // 스크롤을 내리면 opacity값이 들어가면서 어두워짐
        cover.style.opacity = .3 + scrollTop / 1000;
      })