Rev. 2.73

h_00.jpg
h_03.jpg
h_01.jpg

간만에 올리는 신변잡기입니다. 위 사진은 http://monome.org 에서 판매하는 장치입니다. 과연 이것으로 무엇을 할 수 있을까요? 동영상을 보시면 아시겠지만, 참 골 때리는 기계입니다. 장난감이라기 보다는 음향기기에 가깝네요. 가지고 놀면 시간가는 줄 모르겠어요. 자~ 아래의 동영상을 감상해 보세요.

http://146.186.186.101/~bcrabtree/monome40h.mov

Comments

이 글은 http://www.agilepartners.com/blog 에 의해 공개된 것입니다.
Script.aculo.us의 slide.js가 담당하는 슬라이더 응용입니다. Fluxiom의 인트로 비디오에서 보았던 바로 그 효과입니다. 아래의 슬라이드 바를 조정해 보세요. 익스플로러보다 파이어폭스에서 훨씬 빠른 렌더링 속도(실시간)를 보여줍니다.

사용된 스크립트 코드입니다.

function scaleIt(v) {
	var scalePhotos = document.getElementsByClassName("scale-image");
	floorSize = .26;
	ceilingSize = 1.0;
	v = floorSize + (v * (ceilingSize - floorSize));
	for (i=0; i < scalePhotos.length; i++) {
		scalePhotos[i].style.width = (v*190)+"px";
	}
}
var demoSlider = new Control.Slider('handle1','track1', 
	{axis:'horizontal', minimum: 0, maximum:200, alignX: 2, increment: 2, sliderValue: 1});
demoSlider.options.onSlide = function(value){
	scaleIt(value);
}
demoSlider.options.onChange = function(value){
	scaleIt(value);
}

다이네믹이 느껴지나요? FloatPhoto에도 성공적으로 적용했습니다. 더불어 가로 세로, 비율 계산과 설정 값이 쿠키로 저장되게 하였죠, 실시간으로 값을 전달하는 슬라이더는 콤보박스를 대체할 수도 있고, 웹페이지를 어플리케이션 수준으로 끌어올리는데 한몫할 것입니다.

Comments