노란배경이 사르르… Yellow Fade Technique

맨처음에 나온게 아마 37signals의 Yellow Fade Technique (줄여서 YFT)가 아닐까 싶다. 지메일처럼 새로 화면 전체를 읽어오지 않고도 바로 데이타를 읽어와 화면에 보여주는 ajax가 유행하면서 화면에 새로 바뀐 부분의 배경색을 순간적으로 노란색에서 투명하게 바꾸는 효과는 사용자가 바뀐 부분을 즉시 알아차릴 수 있도록 돕는다.
(ajax가 안쓰였어도 퍼머링크를 눌러 찾아온 방문자가 많은 글 목록에서 그 글을 찾을 수 있도록 tech.memeorandum에서도 사용하고 있다 (사용예) )
며칠전 바보들을 위한 옐로우 페이드 기술 (-_-)을 보고 따라해봤는데 어찌어찌 하다보니 파이어폭스에서는 잘 되던데 인터넷익스플로러에서 에러메세지를 냈다. (아마 뭔가를 고치다 조져놓은듯한데 도저히 찾기 귀찮아서 일단 삭제.) 조금전 다시 해보려고 “바보들… “글을 보다가 아래쪽 코멘트를 보니 오호라, 자바스크립트가 아니라 애니메이션 gif로도 흉내를 내는 방법을 누가 적어놓았다. 노란색에서 흰색으로 바뀌는 가로,세로1픽셀짜리 (루프를 돌지 않는) 애니메이션 gif를 하나 만들어 놓고 (예) 스타일을 이용하여 배경으로 깔아 버리는 것이다.
예를 들자면 이렇게.
스타일에는

.fade

{

background: url(yani.gif) repeat;

}

그리고 글 본문이 출력되는 곳에는

<div class="fade">

어쩌고 저쩌고...

</div>

추가// jely님의 YFT : Yellow Fade Technique도 참고를…

One thought on “노란배경이 사르르… Yellow Fade Technique”