설명

조건

IE8까지 지원

IE에서 페럴렉스 효과 적용시 떨리는 현상 없애기

only javascript만 활용

기법

IE8에선 background-size 속성이 적용 안됨

IE8에선 background-image 속성을 none으로 바꾼 후 img태그 생성 및 입력

IE8에서 background-position:center와 동일한 효과를 주기 위해 이미지의 원본 width, height 값과 해당 이미지를 감싸고 있는 영역의 width, height 값의 비율을 비교

비교 후 비율이 작은 경우와 높은 경우를 나눠 스타일을 따로 적용

한계

파이어폭스와 크롬은 img의 원본 너비, 높이값을 바로 가져오지 못함, IE는 가져오긴하는데 다시 f5를 누르면 못가져옴..왜지?

load 된 이후에 값을 가져와야됨 (load 프로퍼티 사용)
IE는 위에 적어놓은 것처럼 처음에 바로 원본 너비, 높이 값을 가져옴. 하지만 그 상태에서 f5를 누르면 가져오지 못함..후..
즉 세 브라우저의 호환성을 맞추기 위해선 어찌됐든 load 프로퍼티를 사용해야됨
굳이 안맞춰도 될것같지만 IE11에서 IE8, IE10에서 IE8, IE9에서 IE8로 넘어갈 때 또 load 프로퍼티가 작동을 안하길래 ready 상태일 때와 load상태일 때 모두 원본너비를 갖고올 수 있도록 코드작성
위에처럼 작성하면 코드 낭비인거 같긴한데 더 좋은 해결책을 아직은 모르겠음.. 더 봐야됨

IE에서 흔들리는 현상을 없애기 위해선 뚝뚝 끊어지면서 스크롤되게끔 하는 방법밖엔 아직 모름..

IE만이 아니라 크롬이나 파이어폭스에서도 가끔 화면이 떨리는 현상 발생

What?

Lorem rebum takimata labore sed sadipscing et ut nonumy. Clita duo ea no aliquyam sea rebum dolore, est tempor tempor dolor clita elitr sed et rebum. Vero dolor sed sed rebum. Gubergren no vero takimata et invidunt dolor sed ipsum vero. Kasd dolores aliquyam diam stet sadipscing tempor. Labore duo ut clita amet accusam ea vero diam ipsum. Vero amet sit elitr eirmod takimata accusam nonumy. Dolor diam dolores rebum magna sed, labore dolores et amet lorem at et. Voluptua et sit et et rebum duo tempor accusam eos. Ipsum clita dolor diam eos dolor gubergren kasd elitr lorem, consetetur diam nonumy sit sadipscing no sanctus amet dolore. Ipsum sed vero magna ipsum, sadipscing amet ipsum dolore amet diam. Elitr diam duo sanctus justo, sit ea sit erat kasd magna ea rebum diam lorem, vero gubergren gubergren eirmod consetetur sadipscing kasd sit. Nonumy sanctus sanctus et duo, sit dolor no.

Vacation

설명

What?