웹 페이지 페이드 인/아웃 시키기
게시일: 2005/04/27 | 글쓴이: doa | 7050 번 | 프린트 | 메일


사실 얼마전까지 필자의 홈페이지를 방문한 후 임의의 링크를 클릭하면 현재 페이지가 서서히 사라지면서 링크가 열리는 것을 경험했을 것이다. 바로 이해가 되지않는다면 필자의 블로그, 도아의 세상 사는 이야기 를 방문해 보기바란다.

사실 이처럼 페이지를 인/아웃 시키는 것은 아주 간단하다. JavaScript로도 구현이 가능하지만 보다 간단한 방법은 MSIE에서 지원하는 확장 태그를 사용하면된다. 절차는 다음과 같다.

  1. 페이드 인/아웃 시켜려는 페이지를 연다.
  2. <HEAD>와 </HEAD> 태그 사이에 다음과 같은 코드를 삽입한다.
    <META HTTP-EQUIV=PAGE-ENTER CONTENT=TRANSITION>
    <META HTTP-EQUIV=PAGE-EXIT CONTENT=TRANSITION>
    예: 
    <META http-equiv=page-enter content=revealTrans(Duration=0.5,Transition=23)>
    <META http-equiv=page-exit content=revealTrans(Duration=0.5,Transition=23)>


    여기서 사용할 수 있는 TRANSITION은 다음과 같다.
    효과
    blendTrans(Duration=n)
    Duration=n 브렌드 효과
    revealTrans(Duration=n,Transition=n)
    Transition=0 사각형으로 페이드 인 됨
    Transition=1 사각형으로 페이드 아웃 됨
    Transition=2 원형으로 페이드 인 됨
    Transition=3 원형으로 페이드 아웃 됨
    Transition=4 기존 화면을 아래서 위로 지우면서 화면 전환
    Transition=5 기존 화면을 위에서 아래로 지우면서 화면 전환
    Transition=6 기존 화면을 왼쪽에서 오른쪽으로 지우면서 화면 전환
    Transition=7 기존 화면을 오른쪽에서 왼쪽으로 지우면서 화면 전환
    Transition=8 수평 브라인드가 열리는 것처럼 화면 전환
    Transition=9 수직 브라인드가 열리는 것처럼 화면 전환
    Transition=10 체커판이 서로 교차되어 나타나면서 화면 전환
    Transition=11 체커판이 아래로 열리면서 화면 전환
    Transition=12 두화면이 겹치면서 화면 전환됨
    Transition=13 문이 닫히는 것저럼 화면을 수직으로 나누어 페이드인 됨
    Transition=14 문이 열리는 것처럼 화면을 수직으로 나누어 페이드 아웃 됨
    Transition=15 화면을 수평으로 나누어 페이드인 됨
    Transition=16 화면을 수평으로 나누어 페이드 아웃 됨
    Transition=17 우측 상단에서 아래 방향으로 스티커를 띠는 것처럼 화면 전환
    Transition=18 후측 하단에서 윗 방향으로 스티커를 띠는 것처럼 화면 전환
    Transition=19 좌측 상단에서 아래 방향으로 스티커를 띠는 것처럼 화면 전환
    Transition=20 좌측 하단에서 윗 방향으로 스티커를 띠는 것처럼 화면 전환
    Transition=21 수평의 직선을 이용해서 화면 전환
    Transition=22 수직의 직선을 이용해서 화면 전환
    Transition=23 1에서 22까지의 효과가 랜덤하게 적용됨

댓글: 이 팁은 ynetwork님의 질문, 어엇..!에대한 답으로 작성되었습니다.


광고없는 인터넷, Privoxy 인터넷은 이미 쓰레기 광고의 전시장으로 변모되었다. KT의 ... (27791) 2005-04-27
OE에서 계정 정보 내보내기/가져오기 필자는 POP3보다는 IMAP을 선호하는 편이다. 국내... (5326)2005-04-26

QAOS.com에 게시된지 1년 이상된 자료와 관리자가 공개한 자료는 누구나 제한없이 읽을 수 있습니다.
그러나 QAOS.com의 자료를 퍼가는 것은 금지하고 있습니다.

이 정보가 유용하다고 생각되시면 QAOS.com과 많은 다른 사람들을 위해 퍼가기 보다는 링크로 알려주시기 바랍니다.

세상사는 이야기



RSS 구독 (익명 | 회원 | 강좌 | 포럼)
(C) 1996 ~ 2017 QAOS.com All rights reserved.