Rev. 2.73

자바스크립트 이펙트의 대명사 스크립타큘러스(Scriptaculous)는 1.7 베타에 추가되는 모프(Morph)와 트랜스폼(Transform) 이펙트의 데모를 시연했습니다. 현재 테스트 파일이 정식으로 배포된 상태는 아니지만 테스트 소스를 추출하여 사용해 보았습니다. Prototype 1.5.0의 RC2가 베이스로 사용되고 있더군요. 트랜스폼 이펙트는 List Item 에서 특정 메시지를 부각시키는 역할을 합니다. 그리고 모프 이펙트는 아래에서 직접 체험해 봅시다.

Effect.Morph

// Usage : Element morph
new Effect.Morph('error_message',{
style:'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
duration:0.8
});

// same thing with Element morph is
$('error_message').morph(
'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
{duration:0.8}
);

Usage를 보면, 스타일시트의 코드 자체가 스트링으로 입력받는 모습이 독특합니다. { background: '#f00', fontSize: '2em' } 요딴 식으로 작성하기가 무척 불편했었는데 말이죠. 아무튼 멋집니다.

Comments

스크립타큘러스가 1.6.5를 발표했습니다. 자세한 변동사항은 아래와 같습니다. Prototype 1.5.0 RC1도 변경이 있는듯 합니다.

* Update to Prototype 1.5.0_rc1 revision [5462]
* Support the HTML 'for' attribute in Builder by using 'htmlFor', fixes #6472 [gjones, tdd]
var node = Builder.node('label', { htmlFor: 'myinput' });
* Add support to run a specific failing unit test by clicking on the corresponding test result, fixes #6290 [leeo]
* Add modifier key support to Event.simulateMouse, fixes #6391 [savetheclocktower]
* Add rails-trunk update task, clean up references to MIT license
* Add new 'with-last' queue position option to queue effects to occur in parallel with the last effect to start in the queue
* Add new special core effect Effect.Event for one-shot events that follow timelines defined by effect queues
new Effect.Event({ afterFinish:function(){
// do some code here
}, position: 'end' });
* Do some refactoring to make use of Prototype 1.5 functionalities and save LOC
* Fix an possible crash of IE on Effect.SlideUp, fixes #3192 [thx nel]
* Add Builder.build() to create nodes from strings containing HTML, [DHH]
var node = Builder.build("<p>this is <b>neat!</b></p>");
* Add a pulses parameter to Effect.Pulsate to control the amount of pulses, fixes #6245 [leeo]
For example, Effect.Pulsate('d8', {pulses: 2}) would pulsate twice. If the option is not given, it defaults to five pulses.
* Fix an issue with clicking on a slider span resulting in an exception, fixes #4707 [thx sergeykojin]
* Fix an issue with Draggables when no options are supplied, fixes #6045 [thx tdd]

Comments

fireworks.png

Ajaxian에 소개된 불꽃놀이(Javascript fireworks effect API)는 간단한 삼각법(trigonometry)과 수학을 사용해서 만든 자바스크립트 애니메이션이다. 이 실험의 목적은 브라우저의 성능 실험정도로 생각하면 되겠다. 그리고 이 것을 바탕으로 보다 효과적인 자바스크립트 애니메이션 기법을 연구하고 소개한다.

Javascript Animation Part 2 - Demo
Javascript Animation Part 2
Javascript Animation Part 1

이 밖에도 schillmania.com은 자바스크립트 이용해서 플래시 못지않은 독특한 비주얼 효과를 사이트 구석구석에 사용하고 있으며, 여러가지 재미있는 라이브러리와 유용한 팁들이 많이 있으므로 꼭한번 둘러보자.

Comments