Rev. 2.73

Prototype의 마지막 릴리즈를 포함하는 Scriptaculous 1.8.2 버전이 몇몇 버그를 수정하여 릴리즈 했습니다. 자세한 변동 내역은 아래의 CHANGELOG를 확인하세요. 그나저나 Thomas Fuchs씨의 2.0 프로젝트는 어찌되가고 있는 것일까요...

CHANGELOG

  • Update to Prototype 1.6.0.3
  • Make sure InPlaceEditor converts HTML entities to text. [Sean Kirby]
  • Fix that Builder.node did not return extended elements on IE. Closes #71 and #77.
  • Fix a bug in Sortable.destroy to make sure it's called on the referenced Sortable only, which allows for the correct intialization of nested Sortables. Closes Trac #8615. [Leon Chevalier]
  • Change Effect.Base#render not to use eval(), so certain JavaScript runtime environments (like Adobe AIR) that do not support eval() work. [King Maxemilian, John-David Dalton]
  • Fixed a calculation error in Effect.Transitions.pulse that could lead to flickering, add easing and change it to be a normal 0 to 1 transition that can be used with any effects; Effect.Pulsate now uses its own implementation. [Thomas Fuchs]
  • Fixed Effect.ScrollTo. Changeset 8686 had a typo, document.viewport.getScrollOffsets[0] is always undefined. Removed the max check as it is not a cross-browser way to get scroll height and breaks the effect. Depending on scrollTo to do the right thing. Closes #11306. [Nick Stakenburg]
  • Update version check so all Prototype versions can be required, not just x.x.x. Closes #10966. [Nick Stakenburg]
  • Using $$ in the loader instead of getElementsByTagName to prevent limitations. Closes #9032. [Nick Stakenburg]
  • Fix some missing semicolons. [jdalton]
  • Fix an issue with Effect.ScrollTo that caused Firefox to scroll to the wrong offset in some situations. Closes #10245. [nik.wakelin]
  • Fixes an issue with IE ghosting on non-absolute elements. Closes #10423. [Tanrikut, tdd]

Comments


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

프로젝트 진행하느라 그동안 블로그에 너무 소홀했습니다. 스스로가 블로그를 낯설게 느끼고 있을 정도니 드릴 말씀이 없군요. 그저 죄송할 따름입니다. 어찌됐건 프로젝트는 성공적으로 오픈했습니다. 이번 프로젝트가 이직한 회사에서 첫 번 째 결과물이 되겠네요. 약 4개월 전부터 본격적으로 시작하여 이런저런 우여곡절 끝에 결국 세상으로 등을 떠 밀었습니다. 막판 스파트에서는 하루 21시간 코딩하기, 24시간동안 단식 코딩하기, 3일 연짱 철야하기, 주말 반납 등 식음을 전폐하며(거의 목숨 내놓고) 작업했습니다. 이자리를 빌어 생사를 같이한 직장 동료 여러분께 마음속 깊이 감사의 뜻을 전합니다. 저의 역할은 UI를 개발하는 주업무와 프로젝트를 총괄하는 것이었습니다. 팀장 해쳐먹기(?)가 쉽지만은 않더군요. 각설하고, 아래 보이는 화면이 바로 이번에 런칭한 스토리엔(StoryN) 프로젝트입니다.

attachment
달력과 일정 자세히 보기

약속에 기반을 둔 SNS(Social Networking Service)로써, 복잡-다양한 욕구(demerit wants)를 가진 사용자에게 그들만의 친숙한 환경(degree of freedom)에서 이익(benefit)을 챙길 수 있게하자는 철학이 담겨 있습니다. 홈, 할 일, 달력, 공책으로 이루어진 개인 페이지들은 목적을 가진 도구로 구분하였으며, 사용자의 컨텐츠 생산을 이롭게하기 위해 작은 단위의 편리성을 추구했습니다. 한 건의 아티클 생산하는 것으로 시작하여 크고작은 연결의 발판을 마련하고 광범위한 공유 세상을 누릴 수 있게 하는 컨셉입니다. 말은 그럴싸 합니다만, 현실은 너무나도 동떨어져 있더군요. 쉽게 말씀드리면, to do, calendar, document, gallery를 짬뽕해서 만들고 서로 소통, 공유, 협업할 수 있는 서비스로 보시면 되겠습니다. 아티클 공유는 물론, 그룹 공유, 범주공유 등 다양한 공유형태를 갖춰놓고 있습니다. 그리고 부분 브라우징 방식으로 비교적 생소한 UI를 가진 것이 특징인데, Ajax를 남발하여 제각각 다른 목적을 담은 여러 섹션들이 유기적으로 작동하거나 독립적으로 임무를 수행하며, 플러그인처럼 때어 내거나 붙여 넣을 수도 있습니다. 말로 설명하기 참 모호하군요. 직접 체험해 보시면 이해가 빠를 것입니다.

현재 키인증 방식의 클로즈 베타를 진행하고 있습니다. 아직 버그도 많고 미비된 부분도 있습니다만, 테스터로써의 참여의사가 있으신 분은 비밀글로 이메일 주소를 남겨주시면 키를 발송해 드리도록 하겠습니다. 많은 관심과 참여 부탁드립니다.

Comments