티스토리 뷰

웹프로그래밍/css

Parallax (시차) 배경

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

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

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

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

?
1
2
3
4
5
6
7
/* 핵심은 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 해보면 감이 확 올것.

저작자표시

'웹프로그래밍 > css' 카테고리의 다른 글

CSS Media query breakpoints 미디어 쿼리 중단점  (0) 2021.12.17
mobile chrome 에서 img width < 110px 자동 흐릿 blerry 처리 막기  (0) 2016.05.02
pseudo-class :after로 전체 덮는 레이어 장막 만들기  (0) 2015.01.15
CSS 구조 개선 방법론  (0) 2014.12.16
커서 드래그 선택 블럭 강조 색상 변경  (0) 2013.04.18
공유하기 링크
댓글