Velocity.js のドキュメントを勝手に日本語にする


公式サイト

師匠から「Qiitaの適当な記事を見る前に、公式ドキュメントを読め」と再三言われていたので、読んで日本語にしました。Velocity.js のドキュメントは非常に親切なので、読みながら JavaScript, JQuery, CSS への理解が深まりました。

7割終わりました。随時更新中。

Basics: Arguments

基礎:引数

Overview

概要

Velocity takes a map of CSS properties and values as its first argument. An options object can optionally be passed in as a second argument:

Velocity.js は CSS の属性と値の組み合わせを第一引数として受け取ります。オプションとして第二引数にオブジェクトを受け取ることもできます。

See the Pen QdXQwb by nakanishi (@nakanishi) on CodePen.

Option defaults can be globally overriden by modifying $.Velocity.defaults.

デフォルトのオプション設定は、$.Velocity.defaults を変更することで上書きすることができます。

Single Object

Velocity also supports a single-argument syntax (which allows for more expressive CoffeeScript code). Simply pass in a single object with properties (or p) and options (or o) members:

Velocity.js は単一の引数だけを用いる記法にも対応しています。(この記法はCoffeeScript と組み合わせて使うと便利です。) メンバ変数として properties (もしくは p)と options (もしくは 0)を持つ、一つのオブジェクトを引数として渡すことができます。

(コードは公式サイトを参照)

Comma-Separated

コンマで区切る記法

Instead of passing in an options object, Velocity also accepts jQuery’s comma-separated syntax — but only for the duration, easing, and complete properties: $element.velocity(propertyMap [, duration] [, easing] [, complete]).

引数としてオプション用のオブジェクトを渡す代わりに、Velocity.js はjQuery 式のコンマで仕切る記法を用いることもできます。ただし、これを用いることが出来るのは、duration, easing, complete のプロパティーだけです。つまり次のように記述できます。$element.velocity(propertyMap [, duration] [, easing] [, complete])

These options can be placed in any order:

またこの記法の場合、オプションはどんな順場にでも並べることができます。

Basics: Properties Map

基礎:プロパティーの組み合わせについて

Properties

プロパティーについて

Velocity auto-prefixes properties (e.g. transform becomes webkit-transform on WebKit browsers); do not prefix properties yourself.
Velocity animates one numeric value per property. Hence, you can pass in:

{ padding: 1 }
or
{ paddingLeft: 1, paddingRight: 1 }

Velocity.jsは自動的にプレフィックスをプロパティに付けます。 (例えば transform は WebKit browsersにおいては webkit-transform になる ) そのため自分でプレフィックスを付けないでください。またVelocity.jsはプロパティ毎に単一の数字しかうけとることができません。ですから次のように書くことはできます。

{ padding: 1 }
or
{ paddingLeft: 1, paddingRight: 1 }

But you cannot pass in { padding: “1 1 1 1” } because you’re providing multiple numeric values.

しかし、{ padding: “1 1 1 1” } のように複数の数字を渡すことはできません。

However, Velocity includes hooks to break down the following properties that require multiple values: textShadow, boxShadow, clip, backgroundPosition, and transformOrigin. Refer to the CSS Support dropdown for a full listing of hooks.

ですが Velocity.js はフック機能を持っているので、次のリストに上げたプロパティのように、複数の値を必要とするプロパティを分解して実行することができます。フック機能がサポートしている全リストはCSS Supportを参照して下さい。

  • textShadow
  • boxShadow
  • clip
  • backgroundPosition
  • transformOrigin

Values

値について

Velocity supports the px, em, rem, %, deg, and vw/vh units. If you do not provide a unit, an appropriate one is automatically assigned — usually px, but deg in the case of rotateZ for example.

Velocity.js は次の単位をサポートしています。単位を指定しなかった場合には、適切な単位が自動的に設定されます。通常は px が選択されますが、rotateZ の場合には deg が指定されるといった具合です。

  • px
  • em
  • rem
  • %
  • deg
  • vw/vh

Velocity supports four value operators: +, -, *, and /. You may suffix an equals sign onto any one of them to perform relative math operations.

Velocity.js は4つの演算 +, -, *, / をサポートしています。これらの記号の末尾に = を加えることで、相対的な値を計算によって指定することができます。

$element.velocity({
top: 50, // Defaults to the px unit type 単位を設定しない場合には、通常pxが選択されます。
left: “50%”,
width: “+=5rem”, // Add 5rem to the current rem value 現在の値に5rem加えます。
height: “*=2” // Double the current height 現在の高さを2倍にします。
});

Browser support: rem units are not supported below IE 9. vh/vw units are not supported below IE 9 or below Android 4.4.

ブラウザーサポートについて:remはIE9より下ではサポートされません。vh/vwはIE9とAndroid 4.4 より下ではサポートされません。

Basics: Chaining

基礎:連鎖

When multiple Velocity calls are stacked onto an element (or a series of elements), they automatically queue onto one another — with each one firing once its prior animation has completed:

複数の Velocity関数の呼び出しが、単一のエレメント(もしくは複数のエレメント)に積み重なった場合、Velocity.js は自動的にそれらの関数を一列に並べ、順番に実行します。つまり、一つ前のアニメーションが終了した時点で、次のアニメーションがスタートします。

$element
/* Animate the width property. */ 幅をアニメーションさせます
.velocity({ width: 75 })
/* Then, when finished, animate the height property. */ 一つ前のアニメーションが終了したら、次に高さをアニメーションさせます。
.velocity({ height: 0 });

(本家サイトのデモを参照)

Option: Duration

オプション:デュレーションについて

Velocity supports durations specified in milliseconds as well as jQuery’s named durations: “slow”, “normal”, and “fast”.

Velocity.js のデュレーションは、ミリセカンド秒による指定と、jQeury式の名前による指定(“slow”, “normal”, and “fast”)を受け付けます。

$element.velocity({ opacity: 1 }, { duration: 1000 });
or
$element.velocity({ opacity: 1 }, { duration: “slow” });

Option: Easing

オプション:イージングについて

Overview

概要

Velocity supports the following easing types by default:
Pre-packaged into Velocity are jQuery UI’s easings, except for the back, bounce, and elastic easing types. A bonus “spring” easing (sampled in the CSS Support pane) is also included.

Velocity.js は次のイージングタイプをサポートしています。

  • Velocityに最初組み込まれているのは、jQuery UIと同じイージングです。ただし、back と bounce と elastic タイプのイージングはサポートしていません。
  • さらに spring イージングもあります。CSS Supportで確認することができます。

CSS3’s named easings: “ease”, “ease-in”, “ease-out”, and “ease-in-out”.
CSS3’s bezier curves: Pass a four-item array of bezier points. (Refer to Cubic-Bezier.com for crafing custom bezier curves.)
Spring physics: Pass a two-item array in the form of [ tension, friction ]. A higher tension (default: 500) increases total speed and bounciness. A lower friction (default: 20) increases ending vibration speed. Refer to Spring Physics Tester for testing values.
Step easing: Pass a one-item array in the form of [ steps ]. The animation will jump toward its end values using the specified number of steps. See this article to learn more about step easing.
All of the above easing types are fully compatible with IE8+. (Pretty cool!)
You can either pass in the name of a packaged easing (e.g. “ease-out” or “easeInSine”), or you can pass in one of the array types:
/* Use one of the jQuery UI easings. */
$element.velocity({ width: 50 }, “easeInSine”);
/* Use a custom bezier curve. */
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);
/* Use spring physics. */
$element.velocity({ width: 50 }, [ 250, 15 ]);
/* Use step easing. */
$element.velocity({ width: 50 }, [ 8 ]);

イージングとばす

Option: Queue

オプション:キューについて

You can set queue to false to force a new animation call to immediately run in parallel with any currenty-active animations.

オプションのプロパティであるqueueにたいしてfalseを指定すると、新しいアニメーションを実行する関数の呼び出しを、他にアニメーションが実行されていても、即座に並行して実行をします。

/* Trigger the first animation (width). */
$element.velocity({ width: “50px” }, { duration: 3000 }); // Runs for 3s
function call”>setTimeout(function() {
/* Will run in parallel starting at the 1500ms mark. */
$element.velocity({ height: “50px” }, { queue: false });
}, 1500 // 1500ms mark);

Alternatively, a custom queue — a queue that doesn’t immediately start — can be created by passing queue the name of your custom queue. You can build multiple custom queues in parallel, then later start them individually via $element.dequeue(“queueName”) (or Velocity.Utilities.dequeue(element(s), “queueName”) if you’re using Velocity without jQuery).

Queue の他の使い方として、カスタム・キューというものもあります。カスタム・キューは、queueに任意の名前を与えることで作成される、即座には実行されないキューです。複数のカスタムキューを構築した後に、それぞれのキューを  $element.dequeue(“queueName”) と実行することができます。jQuery を用いずに Velocity.js を使用している場合には Velocity.Utilities.dequeue(element(s), “queueName”) と実行することもできます。

See the Pen Velocity.js – Option: Queue (Custom) by Julian Shapiro (@julianshapiro) on CodePen.

Note that the loop option and reverse command do not work with custom and parallel queues.

次のことに注意してください。loop オプションと reverse コマンドはカスタム・キューとパラレル・キューにおいては機能しません。

Velocity uses the same queueing logic as jQuery, and thus interoperates seamlessly with $.animate(), $.fade(), and $.delay(). To learn more about Velocity’s queueing behavior, read this primer.

Velocity.js は jQuery と同じキューのシステムを用いているので、$.animate(), $.fade(), and $.delay() とシームレスに統合されています。Velocity.js のキューの挙動についてより深く学ぶには、次の入門記事を読んで下さい。

Option: Begin & Complete

オプション:Begein と Complete について

Begin

開始前に実行する

Pass begin a function to be triggered prior to the start of the animation.
As with complete, the begin callback is executed once per call, even if multiple elements are being animated. Further, if a call is looped, the begin callback only fires once — at the beginning of the first loop alternation.

オプションの begin プロパティに関数を与えると、アニメーションが開始するまえにその関数を実行します。また comlete も同様ですが、begin に与えられたコールバック関数は、velocity 関数の呼び出し一回につき、一度だけ実行され、たとえ複数の要素がアニメーションされていても、コールバックは一度だけ実行されます。さらにループされた場合でも、begin コールバックは最初のループの開始時に一度だけ実行されます。

The callback is passed the entire raw DOM (not jQuery) element array as both its context and its first argument. To access these elements individually, you must iterate over the array using jQuery’s $.each() or JavaScript’s native .forEach().

コールバック関数は、第一引数とコンテクスト(訳注:多分thisのこと。参照)として、全てのDOM要素が含まれた配列を受け取ります。(jQueryオブジェクトではありません) この配列の全ての各要素にアクセスするためには、jQuery の $.each() コマンドか JavaScript の .forEach() を使用してください。

See the Pen used velocity begin callback by nakanishi (@nakanishi) on CodePen.

$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
begin: function(elements) { console.log(elements); }
});

Complete

完了後に実行する

Complete is the converse of the begin option. Pass the complete option a function to be triggered once the animation has finished. The function is executed once per call, even if multiple elements are being animated at once. Further, if a call is looped, the complete callback only fires once — at the end of the last loop alternation.

complete は begin オプションの逆の機能です。complete オプションに関数を渡すと、アニメーションが終了したと同時にその関数が実行されます。このコールバック関数は Velocity.js 関数が実行される毎に、一回だけ実行されます。たとえ複数の要素がアニメーションされているとしてもです。またループしている場合には、complete によって実行されるコールバックは一度だけ、最後のループが終了した後に実行されます。

The callback is passed the entire raw DOM (not jQuery) element array as both its context and its first argument. To access these elements individually, you must iterate over the array using jQuery’s $.each() or JavaScript’s native .forEach().

コールバック関数は、第一引数とコンテクスト(訳注:多分thisのこと。参照)として、全てのDOM要素が含まれた配列を受け取ります。(jQueryオブジェクトではありません) この配列の全ての各要素にアクセスするためには、jQuery の $.each() コマンドか JavaScript の .forEach() を使用してください。

$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
complete: function(elements) { console.log(elements); }
});

Option: Progress

オプション:アニメーション実行時

Pass the progress option a callback function to be repeatedly triggered throughout the duration of an animation. The callback function is passed data on the status of the call. This data can be leveraged for custom tweening and more.

progress オプションにコールバック関数を渡すと、アニメーションが実行されている間、その関数が繰り返し実行されます。コールバック関数は、velocity.js が実行している関数についての情報を受け取ります。この情報を使ってカスタム・トゥイーンなどをつくるために役立ちます。

The callback is passed the entire raw DOM (not jQuery) element array as both its context and its first argument. To access these elements individually, you must iterate over the array using jQuery’s $.each() or JavaScript’s native .forEach(). Further, it’s passed: complete, remaining, start, and tweenValue:

コールバック関数は、第一引数とコンテクスト(訳注:多分thisのこと。参照)として、全てのDOM要素が含まれた配列を受け取ります。(jQueryオブジェクトではありません) この配列の全ての各要素にアクセスするためには、jQuery の $.each() コマンドか JavaScript の .forEach() を使用してください。またコールバック関数は次の値を受け取ることもできます。

  • complete: The call’s completion percentage (as a decimal value).
  • remaining: How much time remains until the call completes (in ms).
  • start: The absolute time at which the call began (in Unix time).
  • tweenValue: The current value of the dummy tween animation property, which can optionally be passed into a Velocity call. The utility of passing in the tween animation property is that it allows you to then capture the exact value of its tween progression via the progress callback. This dummy property, like all other Velocity animation properties, is subject to the call’s easing behavior. Leveraging this tween property allows you to turn Velocity into a custom tweening engine so that you animate the change of arbitrary DOM properties.
  • complete:アニメーションの完了具合を100分率で示します
  • remaining:アニメーションが完了するまでにあと何秒残っているのかms秒で示します。
  • start:アニメーションが開始した時間をUnix時間で示します。
  • tweenValue:理解できなかったのでパス

See the Pen used velocity progress by nakanishi (@nakanishi) on CodePen.

$element.velocity({
opacity: 0,
tween: 1000 // Optional
}, {
progress: function(elements, complete, remaining, start, tweenValue) {
console.log((complete * 100) + “%”);
console.log(remaining + “ms remaining!”);
console.log(“The current tween value is ” + tweenValue)
}
});

Note that you can pass the dummy tween value along with other properties as well; tween doesn’t have to stand alone. Further, note that you can forcefeed the tween property to start from an arbitrary offset. If you don’t forcefeed a starting value, the tween will start from a value of 0.

$element.velocity({
tween: [ 0, 1000 ]
}, {
easing: “spring”,
progress: function(elements, c, r, s, t) {
console.log(“The current tween value is ” + t)
}
});

Option: mobileHA

パス

Option: Loop

オプション:ループさせる

Set the loop option to an integer to specify the number of times an animation should alternate between the values in the call’s property map and the element’s values prior to the call:

loop オプションに整数を与えるとループさせる回数を指定することができます。このループは、Velocity.js 関数によって指定された値と対象の要素が Velocity.js によってアニメーションされる前にもっていた元々の値との間を、ループします。

$element.velocity({ height: “10em” }, { loop: 2 });

Above, if the element’s original height was 5em, its height will alternate between 5em and 10em two times.

上記のコードでは、例えば元々の高さが 5em の場合には、高さは 5em と 10em の間を2回ループします。

If the begin or complete callbacks are used with a looped call, they are triggered once each — at the very beginning of the loop animation and at the very end of the loop animation, respectively. They are not re-triggered for each loop alternation.

loop オプションを使用していて、かつ begin もしくは complete オプションを使用している場合、それらに指定されているコールバック関数は一度だけ実行されます。つまり、ループの開始時とループの終わりに、それぞれ begin コールバックと  complete コールバックが実行されます。これらのコールバックはループの折り返し時には実行されません。(訳注:delay などはループの折り返し時にも適応される。)

Instead of passing in an integer, you can pass in true to trigger infinite looping:

loop オプションに整数を渡す代わりに、true を渡すことがで永遠にループさせることができます。

$element.velocity({ height: “10em” }, { loop: true });

Infinite loops never return promises, ignore the complete callback, and cannot be used with queue: false. Further, be sure to stop one infinite loop before triggering another infinite loop on the same element. (A loop can be stopped with the Stop command.)

無限にループさせた場合、promises は返されませんし、complete コールバック数も無視されますし、queue に falese を指定して使用することもできません。また、無限ループが指定されている要素に新たな無限ループのアニメーションを実行する場合には、前のアニメーションをストップするようにしてください。(ループは stop コマンドで止めることができます。)

Option: Delay

オプション:遅延させる

Specify the delay option in milliseconds to insert a pause before an animation begins. The delay option exists so that animation logic can be kept entirely within Velocity — as opposed to sprinkling jQuery’s $.delay() throughout your code.

delay オプションに ms秒でアニメーションが始まるまえの一時停止時間を指定することができます。delay オプションは全てのアニメーションに関するロジックを  Velocity.js の中に留めるためにあり、jQuery の $.delay() をコードに含めさせないためにあります。

You can set the delay option alongside the loop option to create a pause between loop alternations:

loop オプションと一緒に delay オプションを使うことができ、その場合にはループの折り返し地点に一時停止を挿入します。

(訳注:次のコードペンを実行するとわかりますが、ループの実行前と、ループの折り返し地点にディレイが挿入されます。)

See the Pen used Velocity.js – Option: Delay & Loop by nakanishi (@nakanishi) on CodePen.

$element.velocity({
height: “+=10em”
}, {
loop: 4,
/* Wait 100ms before alternating back. */
delay: 100
});

Option: Display & Visibility

オプション:Display と Visibility

Intro

Velocity’s display and visibility options correspond directly to their CSS counterparts, and therefore accept the same values: display accepts “inline”, “inline-block”, “block”, “flex”, “” (empty quotes to remove the property altogether), and whatever else the browser natively supports. visibility accepts “hidden”, “visible”, “collapse”, and “” (empty quotes to remove the property altogether). For a comparison between the behaviors of display, visibility, and opacity, see this post.
Exclusive to Velocity, the display option also takes a non-standard value of “auto”, which instructs Velocity to set the element to its native display value. For example, anchor elements default to “inline” whereas div elements default to “block”.
Velocity’s incorporation of CSS display/visibility changing allows for all of your animation logic to be contained within Velocity, meaning you no longer have to sprinkle jQuery’s $.hide() and $.show() functions throughout your code.

Usage

使い方

When the display option is set to “none” (or when visibility is set to “hidden”), the CSS property is set accordingly after the animation has completed. This works to hide the element upon animation completion, and is useful when animating an element’s opacity down to 0. (When these options are used with the loop option, they are set at the end of the final loop iteration.)

display オプションに”none”が指定されている場合(もしくは visibility オプションに”hidden”が指定されている場合)、アニメーションが完了した後に CSS プロパティが”none”(もしくは”hidden”)に設定されます。これはアニメーションが終了した際に要素を消すという挙動を上手く実装してくれます。また透明度を0に下げていく場合にも上手く動作します。(ループオプションとともに使用されている場合、最後のループの後に実行されます)

Here, an element is removed from the page’s flow once it has faded out. This replaces jQuery’s $.fadeOut() function:

次のコードは、対象の要素がフェイドアウトした後にページから消去されます。これは jQuery の $.fadeOut() の代わりに使用することができます。

/* Animate down to zero then set display to “none”. */
$element.velocity({ opacity: 0 }, { display: “none” });

Here, an element is made invisible once it has faded out:

次のコードはフェイドアウトした後に、見えなくしています。

/* Animate down to zero then set visibility to “hidden”. */
$element.velocity({ opacity: 0 }, { visibility: “hidden” });

Conversely, when display/visibility is set to a value other than “none”/”hidden”, such as “block”/”visible”, the corresponding value is set before the animation begins so that the element is visible throughout the duration of the animation.

反対に、display もしくは visibility オプションに “none” もしくは “hidden” 以外の値(例えば”block”や”visible”)を設定すると、この値はアニメーションが始まる前にセットされ、アニメーション中、要素は見える状態になります。

(Further, if opacity is simultaneously animated, it’ll be forced to a start value of 0. This is useful for fading an element back into view.)

(また上記の設定と共に opacity をアニメーションさせた場合には、強制的に opacity は0からスタートします。これは要素をフェイドインさせるのに便利です。)

Here, display is set to “block” before the element begins fading:

次のコードは、対象の要素をフェードインさせる前に、display に “block” をセットします。

/* Set display to “block” then animate from opacity: 0. */
$element.velocity({ opacity: 1 }, { display: “block” });

Note: The display and visibility options are ignored when used with the Reverse command.

注意:reverse コマンドと共に使用した場合、display と visibility オプションは無視されます。

Command: Fade & Slide

コマンド:フェイドとスライド

Behavior

挙動

The fade and slide commands automatically set the targeted element’s display property to show or hide the element (as appropriate). By default, when showing an element, display is set to the element’s native type (divs are set to “block”, spans are set to “inline”, etc.). This can be overriden by passing a custom display value into the options object:

fade と slide コマンドは、自動的に対象の要素に最適なプロパティを与え、表示したり非表示にしたりします。デフォルトでは、表示をする場合には display は要素のネイティブタイプに設定されます。(例えば div 要素であれば”block”ですし、span要素であれば”inline”が指定されます。) しかし display オプションで指定すれば変更できます。

/* Set the element to a custom display value of “table”. */ $element.velocity(“fadeIn”, { display: “table” });

fadeIn and fadeOut

フェイドインとフェイドアウト

To fade an element, pass in “fadeIn” or “fadeOut” as Velocity’s first argument. The fade commands behaves identically to a standard Velocity call; they can take options and they can be queued.

要素をフェイドさせるためには、”fadeIn” もしくは “fadeOut”を Velocity.js 関数の第一引数として渡します。フェイドコマンドは他の Velocity.js の関数と同じように扱うことができますので、オプションを指定したりキューに追加することができます。

$element
.velocity(“fadeIn”, { duration: 1500 })
.velocity(“fadeOut”, { delay: 500, duration: 1500 });

Above, we fade an element in for 1500ms, pause for 500ms (delay: 500), then fade out for another 1500ms.

上記のコードは、対象の要素を1500msかけてフェイドインさせ、500ms止まった後に、1500msかけてフェイドアウトさせます。

slideUp and slideDown

スライドアップとスライドダウン

To animate an element’s height to or from zero, pass in “slideDown” or “slideUp” as Velocity’s first argument. Slide commands behave identically to standard Velocity calls; they take options and can be chained.

対象の要素の高さを0からアニメーションさせるには”slideDown”を、0以外から0へアニメーションさせるには”slideUp”を Velocity.js 関数の最初の引数として渡します。スライドコマンドは他の Velocity.js の関数と同じように扱うことができますので、オプションを指定したりキューに追加することができます。

$element
.velocity(“slideDown”, { duration: 1500 })
.velocity(“slideUp”, { delay: 500, duration: 1500 });

Above, we slide an element down into view over 1500ms, pause for 500ms (delay: 500), then slide up out of view for another 1500ms.

上記のコードは対象の要素を1500msかけてスライドダウンさせた後、500ms停止し、1500msかけてスライドアップさせます。

If you’re looking for a highly performant mobile-first accordion powered by Velocity’s slide functions, check out Bellows.

もしモバイル向けのよりパフォーマンスの高いアコーディオンメニューを探しているのであれば次のライブラリを試してみてください:Bellows

Command: Scroll

コマンド:スクロールさせる

To scroll the browser to the top edge of an element, pass in “scroll” as Velocity’s first argument (instead of a properties map). The scroll command behaves identically to a standard Velocity call; it can take options and it can be queued.

ブラウザをスクロールさせ対象の要素の上端に移動させるためには、”scroll”を Velocity.js 関数の最初の引数として渡します。スクロールコマンドは他の Velocity.js の関数と同じように扱うことができますので、オプションを指定したりキューに追加することができます。

$element
.velocity(“scroll”, { duration: 1500, easing: “spring” })
.velocity({ opacity: 1 });

Above, we scroll the browser to the top of edge of a div using a 1500ms duration and a “spring” easing. Then, once the element has scrolled into view, we fade it in.

上記のコードは、ブラウザをスクロールさせ div の上端まで1500msかけて移動します。その際のイージングは”spring”です。その後、対象の要素が画面に入った後、それをフェイドインさせます。

To scroll toward an element that’s inside a containing element with scrollbars, the scroll command uniquely takes an optional container option, which accepts either a jQuery object or a raw DOM element. The container element must have its CSS position property set to either relative, absolute, or fixed — static will not work:

スクロールバーを持つ要素の中にある、エレメントまでスクロールするには、スクロールコマンドに container オプションを与えます。これは jQuery オブジェクトでも 生の DOM でもかまいません。ただしコンテナーになっている要素は、そのCSS の position プロパティが static 以外の、relative, absolute, fixed である必要があります。

See the Pen Velocity.js – Command: Scroll w/ Container Option by Julian Shapiro (@julianshapiro) on CodePen.

/* Scroll $element into view of $(“#container”). */
$element.velocity(“scroll”, { container: $(“#container”) });

Note that in both cases — whether scrolling is relative to the browser window or to a containing element — the scroll command is always called on the element that is being scrolled into view.

注意:どちらのケースでも、スクロールコマンドは視界に入ってくる対象の要素に対して Velocity.js コマンドを実行してください。

By default, scrolling occurs on the Y axis. Pass in the axis: “x” option to scroll horizontally instead:

標準では、スクロールはY軸方向に対して行われますが、axis: “x” オプションをわたすことで、横方向にスクロールさせることもできます。

/* Scroll the browser to the LEFT edge of the targeted div. */
$element.velocity(“scroll”, { axis: “x” });

上記のコードはブラウザを対象の div の左端にスクロールさせます。

Scroll also uniquely takes an offset option, specified in pixels, which offsets the target scroll position:

スクロールコマンドは独自のオプションとして offset を設定することができます。ピクセル値で指定することで、対象のスクロール位置からずらすことができます。(訳注:Y軸にスクロールする場合でoffsetを200にすれば、さらに200px下に進む)

See the Pen WRVOMZ by nakanishi (@nakanishi) on CodePen.

$element
/* Then scroll to a position 250 pixels BELOW the div. */
.velocity(“scroll”, { duration: 750, offset: 250 })
/* Scroll to a position 50 pixels ABOVE the div. */
.velocity(“scroll”, { duration: 750, offset: -50 });

Alternatively, to scroll the entire browser window by an arbitrary amount (instead of to the edge of an element), simply target the html element and use a custom offset value. Optionally, additionally pass in mobileHA: false to avoid potential flickering issues on iOS:

ブラウザ全体を特定の量だけスクロールさせる(対象の要素の端に移動させる代わりに)には、単に対象をhtml要素にし、オプションで offset を指定することで実現できます。よくわからない→Optionally, additionally pass in mobileHA: false to avoid potential flickering issues on iOS:

See the Pen used velo offset html by nakanishi (@nakanishi) on CodePen.

/* Scroll the whole page to an arbitrary value. */
$(“html”).velocity(“scroll”, { offset: “750px”, mobileHA: false });

Command: Stop

パス

Command: Finish

パス

Command: Reverse

コマンド:リバース

To animate an element back to the values prior to its last Velocity call, pass in “reverse” as Velocity’s first argument.

“reverse”を Velocity.js 関数の最初の引数として渡すことで、対象の要素を、最後に Velocity.js 関数が実行される前の値に、アニメーションしながら戻します。

Reverse defaults to the options (duration, easing, etc.) used in the element’s previous Velocity call. However, this can be overridden by passing in a new options object:

reverse コマンドのオプションはデフォルトでは、最期に実行されたアニメーションと同じですが、reverse のオプションとして指定することで上書きできます。

$element.velocity(“reverse”);
or
$element.velocity(“reverse”, { duration: 2000 });

The previous call’s callback options (begin and complete) are ignored by reverse; reverse does not re-fire callbacks.

最期に実行されたアニメーションがもつ callback オプション(begin と complete オプションです)は reverse コマンドでは無視されます。

Note: The reverse command only applies to the default effects queue; reverse cannot be used with custom queues or parallel queueing (queue: false).

注意:リバースコマンドは通常のアニメーションキューとして追加されているものだけに有効であって、カスタムキューやqueue: false によってパラレルに実行されているキューにたいして使用することはできません。

Feature: Promises

パス

Promise素人ならこれを読めとのこと this article.

http://azu.github.io/promises-book/

Feature: Mock

機能:モック

When performing UI testing, you can set $.Velocity.mock = true; to force all Velocity animations to run with 0ms duration and 0ms delay. (In essence, values are fully applied on the next animation tick.) This is incredibly helpful when performing repetitious UI testing for which testing end values is more important than testing animation tweening.

UI テストをする際に $.Velocity.mock = true; と設定しておくと、Velocity.js のアニメーションを強制的に duration と delay を 0ms にして実行することができます。(訳注:カッコ内よくわからない) この機能は繰り返し UI テストをする場合で、しかもアニメーション中の値ではなくて、最終的な値が重要な場合に便利です。

Alternatively, you can also set $.Velocity.mock to an arbitrary multiplier to speed up or slow down all animations on the page:

他にも $.Velocity.mock に任意の値を入れると、アニメーションにかかる時間にその値をかけます。

/* Slow down all animations by a factor of 10. */
$.Velocity.mock = 10;

Slowing down animations in this way is useful when you’re trying to fine tune the timing of multi-element animation sequences.

アニメーションを遅くすると複数のシーケンスからなるアニメーションのチェックをする時に便利です。

Plugins: UI Pack

Effects: Pre-Registered

エフェクト:予め登録されたエフェクト

The UI pack includes a couple dozen pre-registered effects for you to use out of the box. Use cases for these effects include drawing the user’s attention to an element, dynamically loading content, and displaying modals. Refer to the tutorial for a full overview.

UI パックには30個ほどの予め用意されたすぐに使えるエフェクトがあります。これらのエフェクトは、ユーザーの注目を集めたり、コンテンツをロードする際に動きを与えたり、モーダルウィンドウを表示するために使うことを想定しています。詳しくは次のチュートリアルを参照してください。Refer to the tutorial

To trigger an effect, simply pass its name as Velocity’s first argument (instead of a properties map), e.g. $elements.velocity(“callout.bounce”); UI pack effects do not accept the loop, easing, or progress options. Further, they cannot be used with parallel queueing (ie. queue: false).

エフェクトを実行するためには、単に Velocity.js の第一引数にエフェクトの名前を渡してください。(通常であればCSSのプロパティとバリューの組み合わせを渡していたところにです) 例えば、$elements.velocity(“callout.bounce”) というふうに。UI パックのエフェクトは、ループ、イージング、プログレスのオプションを受け付けません。また、パラレル・キューイングにも対応していません。(つまり  queue:false のオプションを与えることはできません)

Note that display: inline elements cannot take the CSS transform property (which most of the UI pack effects use). Accordingly, the UI pack automatically switches any display: inline elements that it animates to display: inline-block.

注意:display: inline が指定された要素は CSS のトランスフォーム・プロパティを受け付けないので(UI パックのエフェクトが主に使用しているプロパティです)、UI パックは自動的に対象の display プロパティが inline である要素を、display:  inline-block に変更します。

Below is a listing of all pre-registered effects:

次のデモに示されたリストが、予め用意されたエフェクトの全てです。

(デモ参照)

Effects: Behavior

エフェクト:挙動

UI pack effects behave like normal Velocity calls; they can be chained and can take options.

UI パックに含まれるエフェクトは、通常の Velocity.js の関数と同じ挙動をしますので、アニメーション・チェインを形成したり、オプションを指定することができます。

Elements automatically switch to display: block/inline when transitioning in, and back to display: none after transitioning out. (To prevent this behavior, pass display: null as an option into the UI Pack call.)

トランジション・インするエフェクトの場合(訳注:おそらく transition.XXIn という名前のもの)、対象の要素は、自動的に display: block もしくは inline に変更されます。またトランジション・アウトするエフェクトの場合は、消えた後に、display: none に自動的に変更されます。(この挙動を止めるためには、display オプションに null を指定してください。)

See the Pen used display null UI effects by nakanishi (@nakanishi) on CodePen.

Support the special stagger, drag, and backwards options. (Refer to the next section.)

UI パックのエフェクトは次の専用オプションを設定することができます。これにつは次のセクションで解説します。

  • stagger = ずらして配置する
  • drag = 長引かせる
  • backwards = 後ろから実行する

Browser support: Below IE10 and Android 3.0, the flip and perspective transitions gracefully fall back to simply fading in and out. In IE8, all transitions gracefully fall back to just fading in and out, and callouts (except for callout.flash) have no effect.

ブラウザのサポート状況:

IE10 と Android 3.0 より下のブラウザにおいては、flip と 奥行きが変化するトランジションは、単にフェイドイン・アウトするだけになります。IE8 においては全てのトランジションが、単にフェイドイン・アウトするだけになります。また callout タイプのエフェクトは(ただし callout.flash は例外ですが)全くエフェクトが発生しません。

There are three options that work only with UI pack effects — but not with traditional Velocity calls. They are passed into a UI pack call as standard Velocity call options:

次の3つのオプションは通常の Velocity.js 関数にはないもので、UI パックエフェク独自のものです。

  • Stagger: Specify the stagger option in ms to successively delay the animation of each element in a set by the targeted amount. You can also pass in a value function to define your own stagger falloffs.
  • Drag: Set the drag option to true to successively increase the animation duration of each element in a set. The last element will animate with a duration equal to the sequence’s original value, whereas the elements before the last will have their duration values gradually approach the original value. The end result is a cross-element easing effect.
  • Backwards: Set the backwards option to true to animate starting with the last element in a set. This option is ideal for use with an effect that transitions elements out of view since the backwards option mirrors the behavior of elements transitioning into view (which, by default, animate in the forwards direction — from the first element to the last).
  • Stagger:stagger オプションに ms 秒で時間を指定すると、対象の要素群のアニメーション実行までの delay を指定した値分だけm段階的に遅らせます。(訳注:例えば$(“elemets”)に複数の要素が含まれている場合、50ms を指定すると、最初のアニメーションはすぐに始まり、次の要素のアニメーションは 50ms 遅れて実行され、さらに次の要素は 100ms 遅れて実行される、という風に、実行までの delay が段階的に増えていきます。) この値は value fanction 機能で設定することもできます。
  • Drag: drag オプションに true を設定すると対象の要素群の duration を段階的に長くします。最後の要素は duration オプションで指定した値と同じになり、最後以外の要素の duration は、冒頭の要素になるにつれて短くなります。(訳注:つまり、全ての要素のアニメーションは同時に始まるのですが、最後の要素だけが指定した duration の長さ分アニメーションをし、それ以外の要素は冒頭の要素に近づくにつれて duration が短くなります。)
  • Backwards: backwards オプションを true を設定すると対象の要素群の最後の要素からアニメーションを実行します。このオプションが一番便利に使えるのは、トランジションアウトする時です。最後の要素から冒頭の要素に向かって順番に消えて行くことで、トランジションインのときと完全に反対のアニメーションになるからです。

See the Pen used backwards by nakanishi (@nakanishi) on CodePen.

Refer to the tutorial for a step-by-step overview of using these options.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です