Firejune

Luca Manno씨는 jQuery를 이용해서 매우 흥미로운 자바스크립트 애니메이션 효과인 Flip!을 만들었습니다. 위 예제는 실행가능한 예제입니다. 직접 실행해 보세요. 저 사선은 어떻게 그려지는 것일까요? 저는 당연히 Canvas태그를 사용했으려니 했답니다. 소스를 뜯어보고 그 기발한 발상에 무릎을 쳤습니다. 보더에서 만들어지는 사선을 이용해서 만들어낸 것이었습니다. 캬~

내친 김에 Prototype과 Scriptaculous에서도 사용할 수 있도록 만들었습니다. 'Flip'이란 클래스를 만들고 Effect.Morph 메서드를 사용하여 애니메이션을 구현했습니다. 시작/끝으로 구분된 Transition 효과와 빠르기를 구분 설정하도록 하여 조금 더 세부적으로 커스토마이즈 할 수 있게 한 것이 특징입니다. 다음 예제코드를 참고하세요.

Examples :

// Flip the flipbox from bottom to top
$("flipBT").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'bt',
    color: '#D46419',
    content: '<div class="demo-one">Hello!<br/>I\'m a flip-box!<br/> :) </div>'
  });
});

// Flip the flipbox from top to bottom
$("flipTB").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'tb',
    color: '#B34212',
    startSpeed: 0.6,
    endSpeed: 0.4,
    content: '<div class="demo-two">Hey!<br/><span style="font-size:14px">You can change me with<br/><code style="font-family:monospace;padding-left:10px">content: $("myId").innerHTML</code></span><br/><br/>Enjoy!</div>'
  });
});

// Flip the flipbox from left to right
$("flipLR").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'lr',
    color: '#341405',
    content: '<div class="demo-three">I\'m simple html!</div>'
  });
});

// Flip the flipbox from right to left
$("flipRL").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'rl',
    startSpeed: 1.0,
    endSpeed: 1.0,
    color: '#166665',
    content: '<div class="demo-four">' + $('logo').up('a').title + '<br/><span style="font-size:11px">This is a taken directly from this page<code style="display:block;color:#fff;padding:5px;font-family:monospace">$("logo").up("a").title</code></span></div>'
  });
});

// Example 1
$("flipEx1").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'tb',
    startFx: Effect.Transitions.pulse,
    endFx: Prototype.Browser.IE ? Effect.Transitions.linear : Effect.Transitions.spring,
    startSpeed: 0.8,
    endSpeed: 0.3,
    color: '#341405',
    content: '<div class="demo-one">Example 1</div>'
  });
});

// Example 2
$("flipEx2").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'bt',
    startFx: Effect.Transitions.circIn,
    endFx: Effect.Transitions.circOut,
    color: '#341405',
    content: '<div class="demo-two">Example 2</div>'
  });
});

// Example 3
$("flipEx2").observe('click', function(){
  new Flip($("flipBox"), {
    startFx: Effect.Transitions.backIn,
    endFx: Effect.Transitions.backOut,
    startSpeed: 0.3,
    endSpeed: 0.3,
    color: '#166665',
    content: '<div class="demo-three">Example 3</div>'
  });
});

오래전에 보더가지고 하드코딩 하던 분들(Triangles in Javascript, 3D Renderring via CSS, DHTML Polygon Rendering Demo, CSS House)이 문득 떠오릅니다.

Downloads :

* original - flip.js (5.82kb)
* minified - flip.js (4.93kb)

Updates :

* 2008.10.15 - IE에서 발생하는 Transition 오류를 수정하였습니다.
* 2008.10.15 - 구글 크롬에서 발생하는 보더 배경색 문제를 수정하였습니다.
* 2008.10.15 - 애니메이션이 일어나는 중에 클래스를 호출하는 경우 초기화하지 않습니다.