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

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

https://stackoverflow.com/questions/27966735/why-does-a-fixed-background-image-move-when-scrolling-on-ie

 

 

 

 

+)

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

 

https://markdalgleish.com/projects/stellar.js/