티스토리 뷰

웹프로그래밍/css

Parallax (시차) 배경

VoidNoble 공허공자 2015. 7. 19. 00:06

https://appear.in/ 사이트의 사례를 보면

스크롤 down 할때 배경고정되어 보인다.

그로 인해 각적으로 이가 발생하는 효과가 나타난다.

/* 핵심은 background : ... fixed */
#news.mobile-apps {
  background: url(/images/frontpage/mobile-apps.61f67a0e.png)center center no-repeat fixed;
  background-size: cover;
  background-position-y: 0;
  padding-right: 50px;
}

브라우저 개발도구 css 패널에서 fixed 부분을 스위칭 해보며 스크롤 up down 해보면 감이 확 올것.

댓글
댓글쓰기 폼
Total
818,296
Today
119
Yesterday
305
«   2020/02   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
글 보관함