Rev. 2.73

cube.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..'); }]
  ]
});

Comments

scripty2.png

Thomas Fuchs씨는 2007년에 2.0버전을 만든다고 큰소리 치고는 잠적하여 목놓아 기다리게 만들더니, 약 20개월이 지난 오늘에서야 드디어 두각을 드러냈습니다. "보다 맛좋은 웹을 위하여"라는 부제의 "scripty2"라는 이름으로 오픈한 사이트는 API 문서흥미로운 데모 등으로 이루어져 있으며, 소스 리포지토리(Git)도 함께 공개했습니다. "scripty2"로 리네임한 것은 종전의 이름(script.aculo.us)이 철자와 도메인에서 혼란이 빚어지기 때문이며 프로젝트를 그대로 이어가는 것이라고 자신의 블로그에 밝혔습니다. 알파 딱지를 달고 시작하는 scripty2는 처음부터 완전히 새롭게 작성되었으며, 수년을 effect engine개발에 소진했다고 합니다. Prototype의 팬으로서 scriptaculous와의 호환성이 완전히 배제되어 있는 것이 가장 아쉬운 점이긴 합니다만, 데모에서 보여준 막강한 애니메이션 변화(s2.fx.Transitions) 처리는 매혹 그 자체입니다. 새 장난감이 생겼네요. Thomas Fuchs씨에게 고맙다고 맥주 한 잔 사줬어요.

Comments

masonry.gif

CSS에서 float 속성을 이용하여 그리드 레이아웃을 꾸미려면 모든 요소들의 높이가 일치해야는 환경이 필요했습니다. 하지만 jQuery Masonry를 사용하면 높이가 서로 다른 요소들에 적용하여도 문제가 되지 않습니다. 요소를 수평으로 정렬한 후 수직을 다시 계산하여 벽돌을 끼워 맞춘듯 보기좋게 정렬해 주기 때문입니다. 이와 같은 그리드 레이아웃이 적용된 typeneu.comsilnt.com에서 색다른 느낌을 만끽해보세요.

Comments