Firejune Blog - The Web is still changing.

Search

더욱 빨라진 파이어폭스 3.5 출시

http://firejune.cdn2.cafe24.com/attach/0701/090701095354024927/423980.gif

새 자바스크립트 엔진인 TraceMonkey가 탑재된 파이어폭스 3.5가 출시되었습니다. 기존의 SpiderMonkey 엔진보다 약 3배 빠르다고 합니다. 위 그래프는 개인적으로 수집한 TaskSpeed의 결과입니다. 재미있게도 jQuery를 제외한 나머지 자바스크립트 라이브러리들은 모두 속도가 향상 되었습니다. 특히, Prototype의 속도가 크게 개선된 것으로 기록되었습니다. 원인이 무엇일까요? Monad(펑셔널 프로그래밍)는 JIT 컴파일러에 적합하지 않기 때문일까요? 이와 같은 양상은 최근에 출시된 브라우저들에서 두드러지게 나타납니다.

우측 그림은 SunSpider 벤치마크를 이용하여 한딱가리(?) 하고있는 브라우저들의 자바스크립트 엔진성능을 측정 하고 최종집계 시간을 비교한 그래프입니다. V8이나 Nitro(SquirrelFish)의 속도를 따라 잡지는 못했더군요.

어찌됐든 파이어폭스 3.5의 출시는 환영할 일입니다. HTML5 공식 지원을 포함한 오픈 비디오 및 오디오, 새로운 CSS 속성들, XMLHttpRequest, Native JSON 등 다양한 새로운 기술들을 이용할 수 있기 때문이죠.

2009/07/01 01:04

text-shadow를 이용한 텍스트 그림자 효과

Zach Johnson씨는 CSS와 자바스크립트를 사용하여 마우스 움직임에 반응하는 텍스트에 그림자가 비치는 효과를 절묘하게 표현했습니다. 이 데모는 아래의 짧막한 코드로 작동됩니다. 그러나 text-shadow CSS 프로퍼티를 지원하는 Safari, Firefox 3.5, Opera, Chrome 브라우저에서만 제대로 보인다는 점을 유념하세요.

var text;
var spot;

window.onload = function () {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot')
}

function onMouseMove(e) {
    var xm = e.clientX - 300;
    var ym = e.clientY - 175;
    var d = Math.sqrt(xm*xm + ym*ym);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
    
    xm = e.clientX - 600;
    ym = e.clientY - 450;
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}

2009/06/30 13:52

자바스크립트로 만든 3D 큐브 메뉴 - CubeMenu

http://firejune.cdn2.cafe24.com/attach/0629/090629114314261025/631693.png

3D 큐브 메뉴는 MooTools 자바스크립트 라이브러리를 이용하여 만들어진 색다른 3차원 메뉴입니다. 그러나 실제로 사용해 보면 비주얼은 뛰어난 반면 사용성이 떨어지는 것을 경험할 수 있습니다. 마우스 휠로 확대/축소하는 기능 보다는 WordPress의 Cumulus 플러그인처럼 마우스 위치에 반응하게 하여 원하는 위치로 이동하는 기능과 큐브 뿐만아니라 다른 형태로도 변하게 하는 옵션을 추가로 제공하면 더욱 다양한 시도들을 기대할 수도 있었을텐데 말예요.

var myCubeMenu = new CubeMenu({
  items: [
    ['Charts', 'data/0.png', function(){ Message.show('Chars clicked..'); }],
    ['Games', 'data/1.png', function(){ Message.show('Games clicked..'); }],
    ['Sounds', 'data/2.png', function(){ Message.show('Sounds clicked..'); }],
    ['Internet', 'data/3.png', function(){ Message.show('Internet clicked..'); }],
    ['Calendar', 'data/4.png', function(){ Message.show('Calendar clicked..'); }],
    ['Users', 'data/5.png', function(){ Message.show('Users clicked..'); }],
    ['Palette', 'data/6.png', function(){ Message.show('Palette clicked..'); }],
    ['Monitor', 'data/7.png', function(){ Message.show('Monitor clicked..'); }],
    ['Mail', 'data/8.png', function(){ Message.show('Mail clicked..'); }],
    ['Acrobat', 'data/9.png', function(){ Message.show('Acrobat clicked..'); }],
    ['Flash', 'data/10.png', function(){ Message.show('Flash clicked..'); }],
    ['RecycleBin', 'data/11.png', function(){ Message.show('RecycleBin clicked..'); }],
    ['Connections', 'data/12.png', function(){ Message.show('RecycleBin clicked..'); }],
    ['', 'data/13.png', $empty ],
    ['Blocks', 'data/14.png', function(){ Message.show('Blocks clicked..'); }],
    ['Chess', 'data/15.png', function(){ Message.show('Chess clicked..'); }],
    ['Languages', 'data/16.png', function(){ Message.show('Languages clicked..'); }],
    ['Board', 'data/17.png', function(){ Message.show('Board clicked..'); }],
    ['Battery', 'data/18.png', function(){ Message.show('Battery clicked..'); }],
    ['Newspaper', 'data/19.png', function(){ Message.show('Newspaper clicked..'); }],
    ['Clock', 'data/20.png', function(){ Message.show('Clock clicked..'); }],
    ['MSN', 'data/21.png', function(){ Message.show('MSN clicked..'); }],
    ['Printer', 'data/22.png', function(){ Message.show('Printer clicked..'); }],
    ['Database', 'data/23.png', function(){ Message.show('Database clicked..'); }],
    ['Shutdown', 'data/24.png', function(){ Message.show('Shutdown clicked..'); }],
    ['Reload', 'data/25.png', function(){ Message.show('Reload clicked..'); }],
    ['Camcorder', 'data/26.png', function(){ Message.show('Camcorder clicked..'); }]
  ]
});

Tag Clouds