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

What is mooShow ? | mooShow가 뭔고?
mooShow는 초경량(superlightweight) moo.fx 자바스크립트 이펙트 라이브러리와 prototype.js기반의 심플한 슬라이드 쇼 자바스크립트/CSS 요.

LightBoxcouloir.org에서 영감을 받고 나는 유사한 창조를 요구했소. 그러나 moo.fx가 사용된 mooShow는 무게가 훨씬작은 4k(만약 모든 moo.fx, prototype.js 파일을 불러오면 20k)이고 아주 쉽게 설치할 수 있다오. mooShow는 페이드인 효과와 함께 다음 사진의 높이와 너비로 리사이즈하오.

만약 당신이 질문 또는 문제를 발견하면 이메일 좀 쏴주시오.

Requirements | 요구사항
- moo.fx 라이브러리
- prototype.js 또는 prototype.lite.js(다운로드에 포함 됨)
- 엄격한 doctype(xhtml 1.0 엄격함(strict) 또는 xhtml 1.1)
- 사파리, 불여우, IE6 그리고 모든 Gecko기반 브라우저, 오페라를 위해 작업했지만 버전 7/8에서 투명도 효과는 지원할 수 없었소, 그래서 엘리멘트들을 토글하는 것으로 바꾸었지. 오페라 9에서는 완벽하게 돌아간다오.(그리고 조낸 빠르오!) 하지만 지금은 베타버전이오.

Examples | 예제

다운로드한 zip에는 php와 결합하여 사용하는 예제가 들어있다. 태터툴즈의 갤러리 대용으로 사용하면 잘 어울리겠다. Ajax 효과를 마스터하면 몽창 때려고쳐 줄테니, 긴장하라고 "태터"군! 참, 그리고 moo.fx 1.2버전이 나왔다. 바뀐것은 여러 효과를 펙키지로 묶은 moo.fx.pack 비동기식 페이지 로딩을 도와주는 moo.ajax가이 추가되었고 익스플로러의 메모리랙현상을 수정했다.
참조 : http://moofx.mad4milk.net/documentation/

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