[CSS] background-attachment:fixed; parallax에 최적화

Web/Styles

아랄라랄라 2019. 6. 12. 15:26

background-attachment

scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다.

fixed : 이미지가 움직이지 않는다. parallax에 최적화!

local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-attachment 배경 이미지의 스크롤 여부를 결정하는 CSS이다.

parallax 효과를 낼 때 사용하면 좋다.

애증의 IE에서도 사용 가능! 하지만 IE에서 스크롤을 내리거나 키보드로 내리면 이미지가 덜거덕 거린다.

세상엔 천재들이 많고요? 그리고 구글에 모든 천재가 모여있나보다?

스크립트를 이용해 덜거덕 거리는 버그를 잡아 줄 수 있다!

- 참고

스텔라.js !! parallax 플러그인이다.

728x90