このページの本文へ

JS超えた!? UIZE Frameworkの特殊効果を見せます! (2/5)

2009年11月13日 14時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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

 それぞれのエフェクトの実際の動作は以下のページで確認できます。

fig1-1.png

特殊ワイプ効果。いろいろあるので一通りチェックしておこう

●ワイプ効果のデモページ(特殊ワイプ効果をチェックできる)
 http://www.uize.com/examples/image-wipe.html


 今回作成するスライドショーでは「facetedFade」というフェイクエフェクトを使いますが、他に好みのエフェクトがあれば変更してもかまいません。幸い、UIZE Frameworkの特殊ワイプ効果はすべて同じ名前のプロパティで設定できます。エフェクトごとにプロパティ名が異なることはないので変更は簡単です。

 特殊ワイプ効果の動きを設定するパラメーターは、ワイプ効果のデモページの「PARAMS」タブから確認できます。いろいろな値を入れてエフェクトがどのように変化するか確認しておき、好みの設定のパラメーター値をチェックしておきましょう。パラメーター名の「allToFull」や「alignX」がそのままJavaScriptで指定するプロパティ名に対応しています。

画面写真

パラメーターを変更することで動きが変わる。好みのエフェクトに設定しよう

 準備ができたらプログラムの作成に入りましょう。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く