https://jsfiddle.net/Kimara/fh031Lcx/6/
background-attachment
scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다.
fixed : 이미지가 움직이지 않는다. parallax에 최적화!
local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
background-attachment 배경 이미지의 스크롤 여부를 결정하는 CSS이다.
parallax 효과를 낼 때 사용하면 좋다.
애증의 IE에서도 사용 가능! 하지만 IE에서 스크롤을 내리거나 키보드로 내리면 이미지가 덜거덕 거린다.
세상엔 천재들이 많고요? 그리고 구글에 모든 천재가 모여있나보다?
스크립트를 이용해 덜거덕 거리는 버그를 잡아 줄 수 있다!
- 참고
https://www.youtube.com/watch?v=JttTcnidSdQ
+)
스텔라.js !! parallax 플러그인이다.
https://markdalgleish.com/projects/stellar.js/
728x90
반응형
'Web > Styles' 카테고리의 다른 글
[CSS3] display: flex 정리 (0) | 2019.11.26 |
---|---|
[CSS] 기기별 미디어쿼리 (0) | 2019.09.10 |
[SVG] svg stroke animate (0) | 2019.06.10 |
[SCSS] SCSS 기본 문법 정리 (0) | 2018.08.02 |
[CSS] 웹폰트 (0) | 2018.07.26 |