스타벅스 랜딩 페이지 예제 (css로 Parallax Scroll 적용하기)

DEMO+signin

css로 Parallax Scroll(패럴랙스 스크롤링) 구현하기

background-attachment: fixed; 로 백그라운드를 고정하고
그 위에 텍스트나 이미지 등을 올린다면 하단의 백그라운드가 올라올때 시각적으로 패럴랙스 스크롤링 효과를 주는 것 입니다.

.pick-your-favorite {
  background-image: url("../images/favorite_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}