보더를 이용한 뒤집기 CSS 애니메이션 - Flip!

예제는 여기서..

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 - 애니메이션이 일어나는 중에 클래스를 호출하는 경우 초기화하지 않습니다.