Rev. 2.73


Hello!
I'm a flip-box!
:)

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

내친 김에 PrototypeScriptaculous에서도 사용할 수 있도록 만들었습니다. '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 - 애니메이션이 일어나는 중에 클래스를 호출하는 경우 초기화하지 않습니다.

Comments

Volll

Volll.jpg

SWFObject

NOFRKS

NOFRKS.png

MooTools

Css Brigit

CssBrigit.jpg

jQuery, Interface Elements, LightBox

Baltic Producers

BalticProducers.png

jQuery, Tween, SWFAddress

WeBleedDesign

WeBleedDesign.png

Prototype, Scriptaculous, Lightbox, Shelf

tatTAPtap

tatTAPtap.jpg

MooTools

SourceBits

SourceBits.jpg

jQuery

Komodo Media

KomodoMedia.jpg

jQuery

Playground Blues

PlaygroundBlues.png

jQuery

Lucuma

Lucuma.jpg

MooTools, iCarousel, Slimbox, siFR

YouLoveUs

YouLoveUs.jpg

jQuery, FancyZoom

Dibusoft

Dibusoft.png

MooTools, iCarousel, siFR

Melissahie

Melissahie.jpg

MooTools

Marius Roosendaal

MariusRoosendaal.png

MooTools

OmniTech

OmniTech.png

MooTools, LyteBox

Danny Blackman

DannyBlackman.jpg

MooTools

Viva Video

VivaVideo.jpg

CodaEffects

IJsfontein

IJsfontein.jpg

Prototype, Scriptaculous, siFR

TurboTax

TurboTax.png

jQuery

Good Works Media

GoodWorksMedia.jpg

MooTools, Shadowbox

자료 참조: http://dzineblog.com

Comments

오래전에 포스팅하려다가 이제서야 포스팅하게 되는군요. Prototype 버전1.6.x에서 제공되는 것으로 responseJSON을 이용한 JSON수신방법입니다. 아시다시피 Ajax를 이용하여 요청한 결과물을 받아올 때 서버로부터 여러가지 형식으로 응답받을 수 있습니다. HTML이나 자바스크립트 코드를 직접 받아 실행하거나 XML또는 JSON타입 등이 바로 그것입니다. 여기에서 JSON형식으로 자료를 수신하는 경우 responseJSON 프로퍼티를 이용하면 수신된 문자열을 이밸류에이션(evaluation)하거나 XML처럼 노드를 분석하여 변수로 할당하는 작업이 불필요하기 때문에 더욱 간결한 수신구조를 만들수 있게 됩니다. 아래의 예제를 봅시다.

서버-사이드: JSON 생성

{
  id: 1,
  name: 'firejune',
  city: 'seoul',
  contry: 'korea',
  birthday: 199724400000
}

여기에는 중요한 서버단 작업이 있습니다. 응답헤더의 Content-Type을 application/json으로 설정해야 합니다. 왜냐하면 Prototype은 이 해더값을 근거로 responseJSON에 객체를 자동으로 할당하기 때문입니다. php에서 헤더를 설정하는 방법은 아래와 같습니다.

<?php
  header("Content-Type: application/json; charset=utf-8");
?>

클라이언트-사이드: JSON 호출

new Ajax.Request("/lab/person.json.php", {
  onSuccess: function(transport) {
    var person = transport.responseJSON;  
    alert(person.city);
  }, method: "get" 
});

자, alert에는 무엇이 찍힐까요? 직접 확인해 봅시다. 그렇다면, Content-Type이 application/xml(또는 text/xml)인 경우에는 어찌될까요? 당연히 transport.responseXML에 할당되겠죠. JSON타입으로 사용될 때와 비교하기 위해서 위 상황을 XML타입으로 재현 해 보겠습니다.

서버-사이드: XML 생성

<?xml version="1.0" encoding="utf-8" ?>
<person type="object">
  <id type="number" value="1"/>
  <name type="string" value="firejune"/>
  <city type="string" value="seoul"/>
  <contry type="string" value="korea"/>
  <birthday type="number" value="199724400000"/>
</person>

클라이언트-사이드: XML 호출

new Ajax.Request("/lab/person.xml.php", {
  onSuccess: function(transport) {
    var xmlDoc = transport.responseXML.documentElement;
    var person = {};
    // xml to object
    $A(xmlDoc.childNodes).each(function(item) {
      if (item.tagName) person[item.tagName] = item.getAttribute('value');
    });
    alert(person.city);
  }, method: "get" 
});

결과는 동일합니다. 두 방식을 비교해 보면 JSON타입이 여러모로 유용하다는 사실을 알 수 있습니다.

Comments