티스토리 뷰

웹프로그래밍/css

Parallax (시차) 배경

공허공자 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 해보면 감이 확 올것.

댓글