ScrollMagic のドキュメントを翻訳する


http://scrollmagic.io/docs/index.html

ランディングページで多用される、スクロール位置でトリガーされるアニメーションを実装するために便利なライブラリ、ScrollMagic について学びます。

今回は上から全部翻訳するのではなく、必要な順番に進めていきました。

結果できたもの

https://codepen.io/nakanishi/project/full/ZBwaVX/

Getting Started : How to use ScrollMagic

まずは次の記事を読むことで基礎的な使い方を理解。

https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic

How does ScrollMagic work?

ScrollMagic はどのように動作しますか?

The principle design pattern of ScrollMagic is a controller[1] that has an arbirtary number of scenes[2] attached to it.

ScrollMagic は基本的に、controller[1] と、それに紐付けられる任意の下図の scenes[2] から構成されています。

  1. There is one controller for each scroll container. In most cases there is only one controller object and the scroll container is the browser window. But you can also use DIV elements for scrolling and even have multiple containers on your page. The controller also defines which direction should be scrolled (horizontal or vertical) and is responsible for keeping all scenes updated.

スクロールするコンテナ毎にそれぞれ1個の controller をもつようにします。大抵のサイトでは、ブラウザ・ウィンドウ用に1つのコントローラーをもつことになります。他にもスクロールする複数の要素を保つ場合には、複数のコントローラーを用意し、それぞれのスクロールに対して ScrollMagic を使うこともできます。controller は、どちらの方向に(縦か横か)スクロールするかを定義することができ、?また全てのシーンを常に最新の状態で保持します。

  1. A scene defines what should happen when, meaning at which scroll position. It can trigger animations, pin an element, change element classes or anything else you might desire.

Scene は、何が、いつ(つまりどのスクロールポジションで)始まるかを定義します。scene はアニメーションをトリガーしたり、要素を固定したり、要素のクラスを変更したり、他にもなんでもできます。

Defining the Controller

コントローラーを定義する

As mentioned above in most cases the scroll container is the browser window. To create a ScrollMagic controller with the default settings we use the main ScrollMagic.Controller()class. We create a new instance of it and assign it to a variable, so we can reference it later:

既に述べたように、多くの場合は controller はブラウザ・ウィンドウ用に一つだけ作成する場合が多いでしょう。ScrollMagic の controller を初期設定の状態で作成するには、ScrollMagic.Controller() クラスを使用します。これを用いて新しいインスタンスを作成し、これに対して変数を与えます。変数については後述します。

var controller = new ScrollMagic.Controller();

That’s it! Now for the more interesting part:

これだけです。では続いて、ScrollMagic の面白いパートに進みましょう。

Defining Scenes

Scene を定義する

Scenes are created by using the ScrollMagic.Scene() class. A ScrollMagic.Scene defines where the controller should react and how. Here we define a variable called “scene” and we’ll create a new ScrollMagic.Scene() instance.

Scene は ScrollMagic.Scene() クラスを用いて作成します。ScrollMagic.Scene は、どの位置から controller が反応し、そしてどのような動作をするかを定義します。次のコードで、scene という名前の変数を指定し、その中に ScrollMagic.Scene() で作成した新しいインスタンスを代入しましょう。

var scene = new ScrollMagic.Scene();

Inside ScrollMagic.Scene we can place an object of associated properties and values that are made available according to the docs
These options describe the behavior of our Scene and in order to figure out what value has what effect you can play around in the Scene Manipulation Example

ScrollMagic.Scene の中に、オブジェクトを配置することができます。このオブジェクトはプロパティと値を持ちます。どんなものが使用可能かは docs  を参照してください。これらのオプションでどのような挙動をシーンにさせるのかを定義します。どんな効果があるのかを Scene Manipulation Example で色々試してみてください。

var scene = new ScrollMagic.Scene({
  offset: 100, // start scene after scrolling for 100px
  duration: 400 // pin the element for 400px of scrolling
})

100px スクロールした後に scene をスタートさせて、400px スクロールするまで固定します。

Adding Scenes to Controller

Scene を コントローラーに追加する

In order to have the scenes react to the scrolling of the container we have to add our scene to the controller we defined at the very beginning…

scene をコンテナのスクロールに反応させるために、scene を controller に追加しなくてはいけません。そう、一番最初に定義した controller にです。

var scene = new ScrollMagic.Scene({
  triggerElement: '#pinned-trigger1', // starting scene, when reaching this element この要素にスクロールが到着したら、シーンを始めます
  duration: 400 // pin the element for a total of 400px 要素を400px固定します
})
.setPin('#pinned-element1'); // the element we want to pin 固定したい要素を指定します

// Add Scene to ScrollMagic Controller シーンを Controller に追加します
controller.addScene(scene);

If you desire multiple scenes at once you can pass them to the controller just as the example shows below:

一度に複数のシーンを追加したい場合には、次のように書くこともできます。

// Add Scene to ScrollMagic Controller
controller.addScene([
  scene1,
  scene2,
  scene3
]);

Instead of telling the controller what scenes to add you can also tell the scene to be added to a certain controller:

controller に対してどのシーンを追加するかを指定するのではなくて、シーンに対してどの controller に自分自身を追加するかを指定することもできます。

var scene = new ScrollMagic.Scene({
  triggerElement: '#trigger1'
})
.addTo(controller); // Add Scene to ScrollMagic Controller

var scene2 = new ScrollMagic.Scene({
  triggerElement: '#trigger2'
})
.addTo(controller); // Add Scene to ScrollMagic Controller

In the above example we’re using a technique called ”chaining” with the addTo(). If no Semicolon ends the line, we can continue adding ScrollMagic.Scene methods and ”chain” them together.

上記の例で、addTo()の部分でいわゆる「チェイニング」という技術を使っています。セミコロンが行の終わりにない場合には、ScrollMagic.Scene のメソッドを続けていくことができ、それによって連結していくことができます。

Next let’s start adding some animation to our scenes in the next Chapter: Tweens

Plugin: Velocity

ScrollMagic 単体よりも、Velocity.js と連携することでより多用なアニメーションを可能にすることが出来る。そのためのプラグインとメソッドについて。

http://scrollmagic.io/docs/animation.Velocity.html#Scene.setVelocity

This plugin is meant to be used in conjunction with the Velocity animation framework. It offers an easy API to trigger Velocity animations.

このプラグインは アニメーションのためのフレームワークである Velocity と連携するためのものです。これによって 簡単に Velocity のアニメーションをトリガーする API を使うことができます。

With the current version of Velocity scrollbound animations (scenes with duration) are not supported.
This feature will be added as soon as Velocity provides the appropriate API.

現在の Velocity のバージョンでは、scrollbound アニメーションは対応していません。(scene に duration を与えた場合) これは Velocity 側が適切な API を提供をしてくれれば、すぐに実現できます。

To have access to this extension, please include plugins/animation.velocity.js.

この拡張機能を使うには次のプラグインをインストールしてください。

Source:

(訳注:多分ここからも手に入る https://github.com/janpaepke/ScrollMagic/tree/master/scrollmagic)

Scene.setVelocity(elems, properties, options) → {Scene}

順番が逆になりますが、こちらのほうが重要なので。

Add a Velocity animation to the scene. The method accepts the same parameters as Velocity, with the first parameter being the target element.

Velocity アニメーションをシーンに追加します。このメソッドは Velocity と同じパラメーターを使うことができます。最初のパメーターは対象の要素になります。

To gain better understanding, check out the Velocity example.

より理解するために、次のサンプルを参照してください。Velocity example.

Parameters:

Scene.setVelocity(elems, properties, options) → {Scene}

Name Type Description
elems object | string One or more Dom Elements or a Selector that should be used as the target of the animation.

1つ以上の Dom 要素か、セレクタを指定します。これがアニメーションの対象となります

properties object The CSS properties that should be animated.

アニメーション用の CSS プロパティ

options object Options for the animation, like duration or easing.

アニメーションのためのオプション
例えば duration や easing

Source:
Returns:

Parent object for chaining. { Scene }

Example
// trigger a Velocity animation
scene.setVelocity("#myElement", {opacity: 0.5}, {duration: 1000, easing: "linear"});

Scene.removeVelocity(reset) → {Scene}

?あとで

Remove the animation from the scene. This will stop the scene from triggering the animation.

Using the reset option you can decide if the animation should remain in the current state or be rewound to set the target elements back to the state they were in before the animation was added to the scene.

Parameters:
Name Type Argument Default Description
reset boolean <optional> false If true the animation will rewound.
Source:
Returns:

Parent object for chaining. { Scene }

Example
// remove the animation from the scene without resetting it
scene.removeVelocity();

// remove the animation from the scene and reset the elements to initial state
scene.removeVelocity(true);

Plugin: addIndicators

http://scrollmagic.io/docs/debug.addIndicators.html#Scene.removeIndicators

This plugin was formerly known as the ScrollMagic debug extension. It enables you to add visual indicators to your page, to be able to see exactly when a scene is triggered.

このプラグインは以前 ScrollMagic debug extension と呼ばれていました。このプラグインを使うことで、ページにデバグ用のインジケーターを追加し、視覚的にシーンがいつトリガーされるのかを確認することができます。

To have access to this extension, please include plugins/debug.addIndicators.js.

Source:

 

new ScrollMagic.Controller(options)

Every ScrollMagic.Controller instance now accepts an additional option.
See ScrollMagic.Controller for a complete list of the standard options.

それぞれの ScrollMagic.Controller インスタンスは、追加オプションを受け取ることができます。受け取ることが出来るオプションの全リストは ScrollMagic.Controller をみてください。

Parameters:

Name Type Argument Description
options object <optional> Options for the Controller.

Properties

Name Type Argument Default Description
addIndicators boolean <optional> false If set to true every scene that is added to the controller will automatically get indicators added to it.

true を指定すると、このコントローラーに追加された全てのシーンに対して、自動的にインジケーターを表示するようになります。

Source:

Example

// make a controller and add indicators to all scenes attached
// コントローラーを作り、このコントローラーに追加される全てのシーンに対して、インディケーターを表示させる
var controller = new ScrollMagic.Controller({addIndicators: true});

// this scene will automatically have indicators added to it
// 次のコードで作成されたシーンは自動的にインディケーターが表示されます

new ScrollMagic.Scene()
               .addTo(controller);

triggerHook

http://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor

これはシーンが持つことができるオプションの一つで、シーンのトリガー位置を微調整できる。( ここで試すといい http://scrollmagic.io/examples/basic/scene_manipulation.html )

triggerHook number | string  トリガーフックの持つことが出来るパラメーターは数字か文字列
デフォルトの設定は “onCenter”
Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport. 0から1までの数字を設定でき、これによってどの視線位置(ブラウザのどの位置)からトリガーを開始するかを指定する。

Can also be defined using a string: 次のように文字列で指定することもできる。

“onEnter” => 1 //これはブラウザの一番下の部分でスタートさせる
“onCenter” => 0.5 //これはブラウザの真ん中
“onLeave” => 0 // これはブラウザの一番上でスタート

// create a standard scene and add it to a controller
new ScrollMagic.Scene()
.addTo(controller);

// create a scene with custom options and assign a handler to it.
var scene = new ScrollMagic.Scene({
duration: 100,
offset: 200,
triggerHook: “onEnter”,
reverse: false
});

reverse

これも triggerHook と同じで、シーンが持つことができるオプションの一つで、スクロール位置を戻した時に、アニメーションを逆再生するかしないかを指定する。

boolean をとる
true が初期値
Should the scene reverse, when scrolling up? スクロールを戻した時に、アニメーションを逆再生させるかどうかを指定する。

コメントを残す

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