UIZE Frameworkのワイプ効果を確認しよう
ではさっそくプログラムの作成に……といきたいところですが、その前にどのような特殊ワイプ効果が使えるのか、確認しておきましょう。UIZE Frameworkには以下に示す55種類のワイプ効果が用意されています。
| blindsVerticalFromOutside | verticalStackingAgainstRight | backSlash |
| blindsVerticalFromInside | trapezoidClockwise | forwardSlash |
| blindsVerticalFromLeft | trapezoidCounterClockwise | backSlashWithCurl |
| blindsVerticalFromRight | openingV | twoBackSlashesCoalesce |
| blindsVerticalFromRightEven | tornado | forwardSlashWithCurl |
| blindsVerticalBackSlash | wBlinds | fourSlashesCounterClockwise |
| blindsVerticalForwardSlash | diamondVertical | verticalFadeFromTop |
| blindsVerticalArrowLeft | diamondHorizontal | verticalFadeFromBottom |
| blindsVerticalArrowRight | matrix | verticalFadeFromInside |
| blindsVerticalZoom | matrixZoomBottomRight | verticalFadeFromOutside |
| blindsVerticalGrowFromCenter | matrixZoomTopLeft | horizontalFadeFromLeft |
| blindsHorizontalFromOutside | matrixZoomCenter | horizontalFadeFromRight |
| blindsHorizontalFromInside | matrixFromOutside | horizontalFadeFromInside |
| blindsHorizontalFromTop | matrixJumbled | horizontalFadeFromOutside |
| blindsHorizontalFromBottom | matrixDrifting | horizontalRibbonFadeFromInside |
| blindsHorizontalTornado | matrixFromTopLeftFade | verticalRibbonFadeFromInside |
| blindsHorizontalZoom | matrixFromBottomRightFade | facetedFade |
| blindsHorizontalGrowFromCenter | matrixFromCornersFade | |
| verticalStackingAgainstLeft | matrixTartanFacetedFade |
それぞれのエフェクトの実際の動作は以下のページで確認できます。
特殊ワイプ効果。いろいろあるので一通りチェックしておこう
●ワイプ効果のデモページ（特殊ワイプ効果をチェックできる）
http://www.uize.com/examples/image-wipe.html
今回作成するスライドショーでは「facetedFade」というフェイクエフェクトを使いますが、他に好みのエフェクトがあれば変更してもかまいません。幸い、UIZE Frameworkの特殊ワイプ効果はすべて同じ名前のプロパティで設定できます。エフェクトごとにプロパティ名が異なることはないので変更は簡単です。
特殊ワイプ効果の動きを設定するパラメーターは、ワイプ効果のデモページの「PARAMS」タブから確認できます。いろいろな値を入れてエフェクトがどのように変化するか確認しておき、好みの設定のパラメーター値をチェックしておきましょう。パラメーター名の「allToFull」や「alignX」がそのままJavaScriptで指定するプロパティ名に対応しています。
パラメーターを変更することで動きが変わる。好みのエフェクトに設定しよう
準備ができたらプログラムの作成に入りましょう。
