CSS만 건드려서 Parallax 만들어보기

 

 

오늘도 월요일이 밝았습니다 🌞

 

 

오늘은 CSS에 대해 본격 알아본 수업이었다!

(CSS면 내가 또 잘하지만) 그래도 다시 복습해보는 좋은 시간이였던거 같다.

마침 실습과제가 또 있어서 직접 코딩해보면서 설명을 해보았다!

 

 

오늘 과제는 Parallax 레이아웃 만들어 보기!

용량을 줄여서 저장하니까 색변환이 되어버려따

패럴랙스란 아래로 스크롤했을때 시차를 이용한 레이아웃을 말하는데

보통 배경을 이용한 레이아웃들을 많이 이용한다.

사실 이런 인터렉션들은 회사다닐때도 정말정말많이 사용했었기때문에

구현에 정답은 없겠지만 나대로 문제풀이를 해보았다.

방법 1. parallax에게 ::before 선택자를 쓰기

      .bg-wrap {
        width: 100%;
        min-height: 600px;
        position: relative;
        overflow: hidden;
      }
      .bg-wrap.parallax::before {
        content: "";
        width: 100%;
        height: 100%;
        background: url(http://poiemaweb.com/img/bg/stock-photo-125979219.jpg)
          no-repeat center/cover;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .bg-wrap.normal {
        background: url(http://poiemaweb.com/img/bg/stock-photo-155153867.jpg)
          no-repeat center/cover;
      }

      #page-wrap {
        margin: 50px auto;
        padding: 30px;
        width: 400px;
        box-shadow: 0 0 20px black;
        font: 15px/2 Georgia, serif;
        background: white;
      }

 

.bg-wrap.parallax에게 ::before 선택자를 하나 만들어
background 이미지를 연결해주고 fixed를 준다음에 z-index값을 -1을 준다.

 

만약 ::before또는 ::after을 쓰지않고 .bg-wrap.parallax에게 background을 다이렉트로 연결해준다면

‼️ 자식요소인 #page-wrap도 z-index값의 영향을 받기때문에 ‼️ .bg-wrap.normal의 밑으로 가려졌을것이다.

 

 

 

 

하지만 이것보다 더 간단하게 쓰는 방법이 있다!

방법2. background-attachment 속성을 쓰는것!

      .bg-wrap {
        width: 100%;
        min-height: 600px;
        position: relative;
        overflow: hidden;
      }

      .bg-wrap.parallax {
        background: url(http://poiemaweb.com/img/bg/stock-photo-125979219.jpg)
          no-repeat center/cover;
        background-attachment: fixed; /* 핵심! */
      }
      .bg-wrap.normal {
        background: url(http://poiemaweb.com/img/bg/stock-photo-155153867.jpg)
          no-repeat center/cover;
      }

      #page-wrap {
        margin: 50px auto;
        padding: 30px;
        width: 400px;
        box-shadow: 0 0 20px black;
        font: 15px/2 Georgia, serif;
        background: white;
      }

 

background-attachment 속성값들은 아래와 같다.

나는 두번째 fixed을 이용해서 ::before같은 가상선택자를 만들지않고, 패럴랙스를 손쉽게 구현할 수 있었다!
사실 처음부터 나도 알고있었던건 아닌데, 회사다닐때 이 속성으로 손쉽게 만드는것을 보고 띠용했던 기억이...

attachment속성에 자세히 알고 싶다면 MDN 공식문서를 참고해보자!

background-attachment: scroll;
/* 배경이 요소 자체에 고정됨. 페이지를 스크롤하면 배경도 함께 움직임 */

background-attachment: fixed;
/* 배경이 뷰포트(브라우저 창)에 고정됨. 스크롤해도 배경은 그대로 있고 콘텐츠만 움직임 (패럴랙스 효과) */

background-attachment: local;
/* 배경이 요소의 내용에 고정됨. 요소 내부를 스크롤하면 배경도 함께 스크롤됨 (overflow 있을 때 유용) */

 

 

 

참고문서 
https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Properties/background-attachment

background-attachment - CSS: Cascading Style Sheets | MDN

 

 

 

내가 쓴 코드 궁금한사람은 github에 올려놨으니 봐두되구,,,

 

https://github.com/lyla-bae/goorm_FE/commit/e2349e44cf344b5364df700855bef653f78ca3ac

251103 css실습 · lyla-bae/goorm_FE@e2349e4