Rev. 2.73

Script.aculo.usCore Effects는 조금 더 복잡다양한 모션을 만들 수 있도록 합니다. 사실 Combination Effects는 단지 Core Effects들의 단순 조합일 뿐입니다. Effect.Opacity, Effect.Scale, Effect.MoveBy, Effect.Highlight 이 4가지 명령을 적절하게 조율하여 Effect.Parallel로 조합하면 Combination Effects보다도 뛰어난 효과를 만들어 낼 수도 있습니다.

공통으로 사용되는 옵션
duration : 초단위로 구성되는 지속시간입니다. Defaults to 1.0.
fps : 타겟이 초당 프레임으로 구성됩니다. Default to 25. Can’t be higher than 100.
transition : 0과 1사이의 에니메이션에 변화를 줍니다. 지원하는 변화옵션 : Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble and Effect.Transitions.flicker.
from : 변화의 시작점을 설정합니다. 기본으로 시작점 0.0에서 종료점1.0으로 흘러갑니다. Defaults to 0.0.
to : 변화의 종료점을 설정합니다. 기본으로 시작점0.0에서 종료점1.0으로 흘러갑니다. Defaults to 1.0.
sync : 동시에 진행되는 효과를 자동으로 새 프레임에 렌더링합니다. 만약 사용한다면, render() 인스턴스 메서드 효과를 사용하여 수동으로 프레임 렌더링을 불러올 수 있습니다. 이것은 Effect.Parallel()에서 사용합니다.
queue : 대기열을 설정합니다. ‘front’ 또는 ‘end’를 사용하여 공통으로 사용되는 대기열 효과으로 시작과 끝을 연결되게 할 수 있습니다. 혹은 객체에 대기열 파라미터를 줄수도 있습니다. {position:’front/end’, scope:’scope’, limit:1}. 더 많은 정보를 원한다면, Effect Queues를 보세요.

Effect.Opacity : 엘리먼트에 투명도변형을 부여한다. [Opacity out] [Opacity in]

new Effect.Opacity('id_of_element', [options]);
new Effect.Opacity(element, [options]);

Effect.Scale : 엘리먼트에 크기변형를 부여한다. [Scale +] [Scale -]

new Effect.Scale('id_of_element', percent, [options]);
new Effect.Scale(element, percent, [options]);

// Effect-specific parameters
scaleMode: { originalHeight: 400, originalWidth: 200 }

scaleX : Sets whether the element should be scaled horizontally, defaults to true.
scaleY : Sets whether the element should be scaled vertically, defaults to true.
scaleContent : Sets whether content scaling should be enabled, defaults to true.
scaleFromCenter : If true, scale the element in a way that the center of the element stays on the same position on the screen, defaults to false.
scaleMode : Either ‘box’ (default, scales the visible area of the element) or ‘contents’ (scales the complete element, that is parts normally only visible byscrolling are taken into account). You can also precisely control the size the element will become by assigning the originalHeight and originalWidth variables to scaleMode as follows:

Effect.MoveBy : 엘리먼트가 이동하도록 한다. [MoveBy x-100 y100] [MoveBy x100 y-100]

new Effect.MoveBy('id_of_element', y, x, [options]);
new Effect.MoveBy(element, y, x, [options]);

Effect.Highlight : 엘리먼트에 색상변화를 부여한다. [Highlight]

new Effect.Highlight('id_of_element', [options]);
new Effect.Highlight(element, [options]);

new Effect.Highlight('my_field', {startcolor:'#ff99ff', endcolor:'#999999'})

startcolor : Sets the color of first frame of the highlight the highlight.
Defaults to ”#ffff99” (light yellow)
endcolor : ets the color of the last frame of the highlight. This is best set to the background color of the highlighted element.
Defaults to ”#ffffff” (white)
restorecolor : Sets the background color of the element after the highlight has finished.
Defaults to the current background-color of the highlighted element (see Note)

Effect.Parallel : 엘리먼트에 여러 코어 효과를 동시에 부여한다. [Parallel 1] [Parallel 2]

new Effect.Parallel([array of subeffects], [options]);

new Effect.Parallel(
[ new Effect.MoveBy(element, 100, 0,
{ sync: true }),
new Effect.Opacity(element,
{ sync: true, to: 0.0, from: 1.0 } ) ],
{ duration: 0.5,
afterFinish: function(effect)
{ Element.hide(effect.effects[0].element); }

Effect.ScrollTo : 지정한 엘리먼트로 부드럽게 스크롤한다. [ScrollTo]

new Effect.ScrollTo('element', [options]);

※ 이 페이지는 RSS리더기에서 비정상으로 보일 수 있으며 정상 작동하지 않을 수 있습니다.


Got something to add? You can just leave a comment.

Your Reaction Time!