skrollr 0.6.26 - jQueryのParallaxのプラグイン

 

skrollrを理解するために、なんとか訳してみました。
英語は得意ではないので、誤訳盛りだくさんだとおもいます。
ご指摘ください。少しずつ直していきます!

https://github.com/Prinzhorn/skrollr

aaaa.jpg

skrollr 0.6.26

モバイル(Android、iOSなど)とデスクトップに対応し、約12KBに縮小されたスタンドアロンで動作するparallaxスクロールを実現するためのJavaScriptライブラリです。

デザイナーフレンドリー。いいえ、JavaScriptのスキルは必要ありません。CSSとHTMLだけです。

実は、skrollrは、単にparallaxスクロールを実現できるだけのものではありません。これは、本格的なスクロール・アニメーション・ライブラリです。実際には、これを使っても、全くparallaxスクロールを実現することはできません。しかし、私はwanted to sound hip といくつかのbuzz-wordを使いました。ちなみに、skrollrはHTML5とCSS3を活用しています。

解説

まず最初に、サンプルを見て、ソースを読んでください。これにより、どのように動いているかの感覚を得られたり、どんなパターンで実現されているかがわかるかもしれません。

要約

skrollrでは、水平スクロールバーの位置に応じて、任意の要素のもついくつかのCSSプロパティで、アニメーションをすることができます。あなたがする必要があるのは、ページトップからのスクロールした地点にある各要素にキーフレームを定義することです。

他のライブラリは、アニメーションを定義するためにJavaScriptを書くことが必要です。これは、2つの大きな問題を抱えています。

  • アニメーションと要素は、1ヶ所ではありません。いくつかのアニメーションが要素に定義されていれば、それを確認するために、JavaScriptの行の多く(時には何千も)をスクロールしなければなりません。
  • 同時に、多くの場合、非常に冗長で限定された新しい構文を学ばなければなりません。

skrollrでは、あなたがCSSのように既に知っている構文を使った要素に属しているキーフレームの定義を設定します。

もし、別ファイル(外部ファイル)でキーフレームを持ちたいのであれば、skrollr-stylesheetsをご覧ください。

アニメーションを定義するためにJavaScriptを使用したいならば、ScrollMagicを見てください。これは、jQueryとGreensockアニメーションプラットフォーム(GSAP)の両方に依存し、アニメーションの細部を完全に制御できます。

詳説

まず第一に読み込みたい skrollr.min.js ファイルをドキュメントの最後(</ body>直前 )におき、skrollr.init()を呼びます。また、あなたがそうしたい場合は、<head>タグの内側に配置することができますが、ドキュメントを読み込み後に一度だけ、init()を実行してください(例えば、jQueryのreadyイベントやwindow.onload)。

 <script type= "text/javascript"  src= "skrollr.min.js" ></script>
<script type= "text/javascript" >
var  s  =  skrollr . init ();
</script>
</body>

あなたがCSSに精通しているならば、既に「style」属性は知っているでしょう。アニメーションを作成するためには、その属性のうち、少なくとも二つ以上を使用します。あなたは、skrollrとHTMLを連動させるために、HTML5の「data-」属性を使って、キーフレームと呼んでいる形式のセットをいくつか定義する必要があります。

「div」タグの背景色を変更してみる

背景色を「#00F」(スクロールバーが一番上にあるとき)から、「#F00」(ユーザが500pxスクロールした時)へ変化させます。

<div
 data-0="background-color:rgb(0,0,255);"
 data-500="background-color:rgb(255,0,0);"
>WOOOT</div>
  • コンテンツに高さが無くても、上記の場合のように500px以上スクロールさせることができます。この高さを制御するには「forceHeight」オプションを使用します。
  • 色の指定は「#00f」でも「#0000ff」でも構いません。また、「RGB」や「HSL」でも指定することができます。「HSL」は全体的に薄い感じになります。見せたい色空間を選択してください。
    心配しないでください。プラグインを使えばIE9以下でも「RGB」や「HSL」が使用できます。
同時にバレルロールを行う

※「バレルロール」とは、航空機(戦闘機やアクロバット機)が空中で行う機動(マニューバ)の一つ。 横転(ロール)と機首上げ(ピッチアップ)を同時に行うもので、仮想の樽の胴(バレル)をなぞるように螺旋を描くことからその名がある。

<div
 data-0="background-color:rgb(0,0,255); transform:rotate(0deg);"
 data-500="background-color:rgb(255,0,0); transform:rotate(360deg);
">WOOOT</div>
  • やっかいな「-moz」や「-webkit」のプレフィックスを処理します。
回転しながらバウンスさせる
<div
 data-0="background-color:rgb(0,0,255); transform[bounce]:rotate(0deg);"
 data-500="background-color:rgb(255,0,0); transform[bounce]:rotate(360deg);
">WOOOT</div>
  • 非線形(non-linear)アニメーションに対応しています。
    いわゆるeasing関数は、プロパティの後に[](角括弧)で書くことにより使用できます。easing関数とそのオプションについては後述します。
要素がビューポートの上部に達した時にアニメーションを終了させる(要素はビューポートを出ていく)
<div
 data-0="background-color:rgb(0,0,255); transform[bounce]:rotate(0deg);"
 data-top="background-color:rgb(255,0,0); transform[bounce]:rotate(360deg);"
>WOOOT</div>
  • Skrollrのキーフレームは絶対値、相対値のどちらにも対応しています。

モバイルのサポート

Ver0.5.0で、正式にAndroidとiOSのモバイルのブラウザに対応しました。さらに、Ver0.6.0では、全て書き直されました。

モバイルソリューションの課題

モバイルでのブラウザの使用によるバッテリーの節約は、重要な目標でありながら、なかなかうまくいきませんでした。それは、モバイルのブラウザは、スクロールをしている間は、JavaScriptの実行を遅らせるからです。特にiOSは、積極的にこれを実行し、完全にJavaScriptを停止します。要するに、それが多くのスクロールライブラリがモバイル機器に取り組まない、または、デスクトップのユーザビリティの悪夢であるスクロールバーで動かしている理由です。それが、私があなたに私がそれが欲しい方法でスクロールすることを強制しないskrollrを開発する間の重要な要件でした。skrollrをデスクトップで使用する場合には、ネイティブのスクロールバーを使用し、キーボードやマウスなど、あなたが望むようにスクロールすることができます。

それではモバイル上で動かないのでは?と思われるかもしれませんが、そんなことはありません。答えは簡単です。携帯電話でskrollrを使用している場合に、実際にはスクロールはできません。携帯電話のブラウザを検出すると、skrollrは、ネイティブスクロールを無効にし、代わりにタッチイベントをリスニングし、CSSへ変換してコンテンツを動かします(詳しくは「#skrollr-body」要素で)。

モバイル用ブラウザをサポートするために必要なもの

skrollr 0.6.0以降ではあなたがしなくてはならないことが一つあります。「skrollr-body」idを使用したページ上の要素を含めなくてはなりません。それは、我々がスクロールすることに見せかけるために動かす要素です。

あなたが「#skrollr-body」を必要としない唯一のケースは、排他的な「position:fixed」を使用した時です。実際、skrollrのウェブサイトでは、「#skrollr-body」要素は含んでいません。もし、固定および非固定(つまり静的)の両方の要素が必要な場合には、「#skrollr-body」要素の内部に静的なものを置きます。

また、別の方法では、モバイル上の「#skrollr-body」要素は、CSS変換して動かされます。あなたは「position:fixed」又は「background-attachment:fixed」をCSSの仕様(http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/)によりCSS変換された要素の内部に持つことはできません。それは、これらの要素は、「skrollr-body」要素の外側にある必要があるからです。

補足:静的コンテンツを入れる場合には「#skrollr-body」は必須です。

AMD

ver0.6.22以降では、実験的なAMDのサポートがあります。これまでskrollrコアだけが、AMDをサポートしていることに注意してください。私たちは、近い将来、プラグインへアップデートする予定です。

require(['skrollr'], function(skrollr){
skrollr.init();
});

補足:AMDは、おそらく米国の半導体企業のAMD。Intel社製マイクロプロセッサの互換製品を開発していることで知られる。

absolute mode と relative mode

絶対値でキーフレームを定義できるだけでは、いくつかのケースにおいて十分ではありません。例えば、文書中のどこに要素があるのか正確にわからない場合があるからです。それが、「absolute」と「relative」モードと呼ばれるキーフレームのための2つのモードがある理由です。

補足:absolute modeは、ページの最上部か最下部を基準にして一定の位置で、relative modeは、ある要素が一定の位置に達したときに、動きを発動させることができる。

absolute mode(又は document mode)

キーフレームでは、ドキュメントをスクロールさせた位置を絶対値として定義します。

構文は data-[offset]-[anchor] で、[offset] は任意の整数(0がデフォルト)、[anchor]は、start(デフォルト)または、endのいずれかになります。[offset] 又は[anchor]のいずれかは、いくつかの状況で省略することができます。ここでは、キーフレームのいくつかのサンプルとその意味を説明します。

  • data-0 / data-start / data-0-start:スクロールを開始する時
  • data-100 / data-100-start:ページの最上部から100pxスクロールした時
  • data--100 / data--100-start:ページの上部からさらに100px上の位置に達した時
  • data-end / data-0-end:「offset」が「0」の時ですが、ページの最上部からではなく、ページの最下部から計算します。つまり、ページ下部に達したときです。
  • data-100-end:ページの最下部から上へ100pxの時
  • data--100-end:ページの最下部からさらに100px下の時

relative mode(又は viewport mode)

document mode(absolute mode)によってキーフレームを定義する代わりに、任意の要素のviewport内の位置によって、定義することができます。

構文は、data-[offset]-(viewport-anchor)-[element-anchor] で、[offset]は任意の整数でデフォルトは0です。(viewport-anchor)(必須)と[element-anchor] (オプション)の値は、topcenter、又は、bottomです。[element-anchor] を省略した場合には、(viewport-anchor)の値を設定します(background-optinと同様)。ここで、いくつかのキーフレームの例とその意味を解説します。

  • data-top / data-0-top / data-top-top / data-0-top-top:要素の上部がviewportの最上部の時
  • data-100-top / data-100-top-top:要素の上部がviewportの最上部より100px下の時
  • data--100-top / data--100-top-top:要素のtopがviewportの最上部より100px上の時
  • data-top-bottom / data-0-top-bottom:要素の下部がviewportの一番上にある時(見えなくなった状態)
  • data-center-center / data-0-center-center:要素がviewportの中心にきた時
  • data-bottom-center / data-0-bottom-center:要素の上半分が表示されている状態のように、要素の中心がviewportの最下部に達した時

通常の要素では、その要素自体が(挙動開始の)キーフレームとなっていますが、そのキーとなるフレームは、ページ上のどの要素にも設定することができます。data-anchor-target と任意のCSSセレクターを使うことで、必要に応じて、設定したい要素に指定することができます。セレクターにマッチしたページ上の最初の要素が使われます。data-anchor-targetは、IE8以上に対応しています。

例)「data-anchor-target="#foo"」 又は「data-anchor-target=".bar:not(.bacon) ~ span > a[href]"」

補足:上記後半のCSSは...
baconクラスを持たない(not)barクラスを持つ要素より後ろに出現(~)するspan要素の子要素である(>)href属性を持つ([href])a要素

注記:もし、IE 7をサポートする必要があるならば、「#foo」のようなIDをanchor-targetとして使うだけになってしまうかもしれません。

下記は、アンカーの理解のための図です。

img_01

(参照:https://raw.github.com/Prinzhorn/skrollr/master/guide/anchor-position-guide.pdf

重要:すべてのこれらの値は、前もって計算され、absolute modeに変換されます。従って、要素のボックスの高さの変化(height、padding、border)やページの要素の位置の再計算には、「refresh()」を呼び出す必要があります(詳細は後述のJavaScriptのセクションを参照してください)。ウィンドウのリサイズの場合には、skrollrで処理されます。

パーセンテージによるoffset設定

今までのoffset設定は、たとえば、ページ上部から300xpを意味する「data-300」やtop-bottomアンカーからから13pxの「data-13-top-bottom」ようにピクセルによる絶対値で指定してきました。

skrollr Ver.0.6.13からは、数字に「p」を追加することで、viewportの%指定によるオフセットができるようになりました。例えば、viewportの75%をスクロールした時を表すには「data-75p」、要素の中心から10%のオフセットを表すには「data-10p-center」と記述します。

Hash navigation

krollr-menu プラグインを参照してください。

定数での設定

私はあなたに嘘をついてきました。absolute mode の構文は data-[offset]-[anchor] ではなく、relative modeでは、data-[offset]-(viewport-anchor)-[element-anchor] ではありません。

両方の場合において、offsetは、定数をinitメソッドに渡すことで初期化されます。定数名の先頭には、アンダースコア(_)をつける必要があります。
例:

skrollr.init({
constants: {
foobar: 1337
}
});
<div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div>
<!--Equal to-->
<div data-1337="left:0%;" data-1237="left:50%;" data-1437="left:100%;"></div>

定数に使える文字は [a-z0-9_] です。

動的定数

skrollr Ver 0.6.19からは、"定数"という言葉は、もはやかなりはまっていませんが、誰も気にしていません。

現在、定数として関数と%指定を使用することができます。ウインドウをリサイズした時、もしくは、refreshを実行すれば、自動的に再計算されます。

skrollr.init({
constants: {
foo: function() {
//Note: you can access the skrollr instance with `this` for things like `this.relativeToAbsolute`
return Math.random() * 100;//trolololol
},
vh: '100p'
}
});

CSSクラス

skrollrは、initが実行されるとHTML要素にskrollrクラスを追加し、no-skollrクラスが在れば、除去します。加えて、デバイスを検知して、skrollr-desktopクラス 又は、skrollr-mobileクラスを追加します。これはサポートされていないデバイス上に最適なUXを適用するための替わりのCSSルール、又は、JavaScriptまたはskrollrが無効になっている場合に許可されます。

skrollrの管理下のすべての要素(適切なdata-属性を持つ要素)は、skrollableクラスが付されます。さらに、我々は、現在のスクロールポジションが要素の最初/最後(最小/最大)のキーフレームがbefore、between、又は、afterであるかによって、skrollable-before、skrollable-between または skrollable-afterのいずれかを追加します。

補足:適切なdata-属性を持つ要素には、全て「.skrollable」が付きます。また、スクロールの位置によって、その対象の要素が挙動等の範囲内に入っていない時は「.skrollable-before」が、挙動中は「.skrollable-between」、挙動後は「.skrollable-after」が追加されます。

アニメーション属性

skrollr 0.6.24以降では、styleプロパティではなく、属性でアニメーションが可能になりました。特に、SVGの世界で多くのプロパティは属性としてではなく、CSSで実装されているので、これは特に大きな事柄です。プロパティのプレフィックスとして@を付けるだけアニメーションが可能です!

<polygon
points='426,720   -200,720   -200,0   955,0'
data-0="@points:426,720   -200,720   -200,0   955,0"
data-500="@points:380,720   -200,720   -200,0   1302,0">
</polygon>

注記:いつものように、skrollrはどんな魔法も行いません。skrollrは、ポリゴンやポイントが何であるかを理解していません。単なる数字の羅列でしかありません。なので、あなたのキーフレームの数字と同じ数(この場合は8)であることを確認してください。

失った値を埋める

次のアニメーションを想像してみてください。

<div
 data-100="left:0%;"
 data-200="top:0%;"
 data-300="left:50%;"
 data-400="top:50%;"
></div>

ある人は、キーフレーム200(data-200)では、leftの値は25%であることが期待するかもしれません。これはそうなりません。設計上、skrollrは、すぐ隣のキーフレームとの間で値を補間します。実際に何が起きるかというと、skrollrは、内部的には、まず左、そしてそれから右から一度だけ値をひっぱてきて、欠けている部分を埋めます。なので、下記のようになります。

<div
 data-100="left:0%;top:0%;"
 data-200="left:0%;top:0%;"
 data-300="left:50%;top:0%;"
 data-400="left:50%;top:50%;"
></div>

補間の防止

skrollrがとても軽量で強力である理由は、それは文字通り、見つけられるすべての全ての数字を補間しているからです。いくつかの副作用を防ぐ必要があるときには、感嘆符(!)を付けることで、特定の値の補間を抑制することができます。

例)

<!-- This will get your image url f***** up because there's no "kitten1.4561799.jpg" and the like -->
<div data-0="background-image:url(kitten1.jpg);" data-100="background-image:url(kitten2.jpg)"></div>
<!-- Better -->
<div data-0="background-image:!url(kitten1.jpg);" data-100="background-image:!url(kitten2.jpg)"></div>

注記:もし、skrollrが例外を投げることを回避したいならば、両方のキーフレーム(数字が含まれている場合)の値には、プレフィックスが必要になります。

制限事項

skrollrには、意識すべきいくつかの制限事項があります。

  • すべての数値は、同じ単位を持つ必要があり、0も単位を必要とします。5%に100pxのようなアニメーションはできません。skrollrはエラーを返しませんが、結果は未定義となります。
  • 「margin:0 0 0 0;」のように、複数の数値で構成されている値の間でのアニメーションは、値の個数が同じ場合にのみ可能です。「margin:0px 0px 0px 0px;」から「margin:0px 100px 50px 3px」へは問題ないですが、「margin:10px;」から「margin:5px 10px;」はできません。
  • アニメーションが同じ順序で同じ関数を使用するときのみ、CSS変換によるアニメーションは動きます。「rotate(0deg) scale(1)」から「rotate(1000deg) scale(5)」は問題ありません。
  • カラーアニメーションは、「red」や「#FF0000」のようなhex値をサポートしていません。代わりに、「rgb()」、「rgba()」、「hsl()」や「hsla()」使用しなければなりません。「hsl()」("hsla"は非対応)や「rgba」を「rgb」へ戻すことをサポートするIE9以下のためのskrollrプラグインがありますので心配はいりません。
  • カラーのアニメーションは、同じ色の関数の場合にのみ動きます。「hsl()」から「hsl()」又は「hsla()」は問題ありませんが、「rgb()」から「hsl()」へはできません。RGB空間とHSL空間での同じ色からのアニメーションは、異なるアニメーションになるので(HSLはあなたに素敵な虹のようなものを与える)、そういうことなっています。

しかし、それらのいずれかを固定するためにプル要求を送ることができる自由度があります。ただ、可能な限りの軽量のskrollrを維持することを最優先としていることに留意してください。

JavasScript

JavaScript上の一部は、あなたがやることはほとんどありません(あなたがしたければ、できます!)。ただし、完璧なCSSとHTMLを知っていれば、です。

skrollr.init([options])

すべてにおいて、skrollrクラス単体のインスタンスを返すskrollr.init([options])を実行することになっています。

init()の利用可能なオプションは

smoothScrolling=true

スムーズスクロールは、アニメーションを滑らかにします。50px下にスクロールすると、アニメーションが新しい位置に飛んでしまわずに、移行します。

要素ごとに「data-smooth-scrolling」を「on」または「off」にセットすることで、グローバル設定は上書きされます

smoothScrollingDuration=200

アニメーションは、最後のスクロール位置の変更後、ミリ秒を開始します。

constants={}

値として整数を格納するオブジェクトです。[a-z0-9_]のキーは含めることができます。それらは先頭にアンダースコアを必要としません。

例)「data-_myconst-200」と「skrollr.init({constants: {myconst: 300}})」の結果は「data-500」です。

scale=1

デフォルトでは、skrollr最大のキーフレームを使用しており、 最大のスクロールの可能領域、ページトップからの相対位置のような height + viewport height をこのページの高さとなります。もしアニメーションが速すぎたり、遅すぎた場合には、scale値を調整します。

scale は、absolute mode でのみキーフレームに影響を与えます。

forceHeight が false に設定されたときは、scale は無視されます。

scale は、同様に constants に影響を受けます。

scale は、例えば、data-top ではなく、data-500 のような absolute mode のキーフレームにだけ影響を与えます。

forceHeight=true

「true」:すべてのキーフレームが内側に収まるように、ページが十分な高さになっていることを確認してください。例)コンテンツは 500px 高さだけのページが作れますが、data-1000 を設定します。skrollrは1000pxまるまるスクロールできるようにします。又は、data-top-bottom のような relative mode を使用した場合には、skrollrでは、要素の下部が実際にビューポートのトップに到達できることを確認できます。

「false」:ページを操作せず、自然なスクロールバーをキープします。

mobileCheck=function() {...}

このオプションは、モバイルデバイス用のチェックのskrollrの上書きするための機能を渡すことができます。モバイルスクロールを使われたときは、この関数は「true」を返す必要があり、そしてそう出ない場合には、「false」となります。

デフォルトでは、下記のようになります

function() {
return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
}

mobileDeceleration=0.004

モバイルデバイスでのスクロールスピードの減速の量です。このオプションでは、skrollrに、ユーザーが指を持ち上げた後、スクロールが停止するまで、どれ位速くまたは遅くかを伝えます。

このスクロールスピードを無効にするには、1をセットしてください。

edgeStrategy='set'

このオプションは、スクロール位置がキーフレーム上の範囲外(例えば、最初の前又は最後のキーフレームの後)になった時、アニメーションをどのように処理するかを指定します。

3つのうちの1つのオプション可能です。

  • 「set」(デフォルト):最初又は最後のキーフレームの前又は後の時、要素に最初又は最後のキーフレームのスタイルを適用する。
  • 「ease」:set と同じですが、値は、指定されたイージング関数で変換されます。
  • 「reset」:最初又は最後のキーフレームの前又は後の時、skrollrが何らか実行した前の要素が持っていたスタイルを適用します。これはクラス属性をリセットするのと同様に、スタイルプロパティに適用されている全てのスタイルを除去します。これは、要素が、skrollable- * のCSSクラスを何ら持っていないことを意味します。

例:

2つのキーフレームをもった要素です。

<div
 data-1000="left:0%;top:0%;"
 data-2000="left:50%;top:100%;"
 style="left:-100%;"
 class="section"
></div>

そして、下記は、常に0.5を返すイージング関数です(無意味な関数であることをわかっていますが、あくまで一例です。現実世界の例では、曲線を表し、1ではなく、0と1の間のどこかに始まるイージング関数となるでしょう。)。

function(p) {
 return 0.5;
}

また、スクロールバーは237pxにあるとし、それは、1000pxにある最初のキーフレーム未満にあります。

  • set では、プレーンな「data-1000」である<div style="left:0%;top:0%;" class="section skrollable skrollable-before"></div>となります。
  • ease では、「 0.5 * data-1000」である<div style="left:25%;top:50%;" class="section skrollable skrollable-before"></div>となります。
  • resetでは、要素が元々もっていた<div style="left:-100%;" class="section"></div>となります。「top」が無くなっていることに注意してください。

beforerender(事前レンダリング)

すべてをレンダリングする直前に、毎回呼び出しているリスナー関数です。関数は、次のプロパティを持つオブジェクトが渡されます。

{
curTop: 10, // 現在のスクロールトップのオフセット
lastTop: 0, // 最後のtopの値
maxTop: 100, // スクロールできる最大値。curTop / maxTop は、常に現在値を持ちます。
direction: 'down' // [up]又は[down]
}

falseを返すレンダリングを防ぐことができます。

render(レンダリング)

すべてのレンダリングが終了した直後、リスナー関数は呼び出されます。この関数は、beforerender と同じパラメータが渡されます。

skrollr.init({
render: function(data) {
// 現在のスクロール位置をコンソールに表示
console.log(data.curTop);
}
});

keyframe(キーフレーム)

実験

要素からキーフレームイベントを受けとるためには、data-emit-events 属性を要素に追加します。キーフレーム関数は3つの引数が呼び出されます。

  1. キーフレームを受け取った element(要素)
  2. キャメル型のキーフレームの name(名前)(例を参照)
  3. ユーザがスクロールしている direction(方向)

例:

<div
 data-500="..."
 data-top-bottom="..."
 data-_offset-center="..."
 data-emit-events
>
 Some content
</div>
skrollr.init({
 keyframe: function(element, name, direction) {
  // name は次のいずれか。data500 / dataTopBottom / data_offsetCenter
 }
});

注記:これは実験的なもので、APIが変更することも期待してください!もともと私は要素にすぐにイベントを発行したかったので、行えるようになっています。

// これが良くないですか?
document.querySelector('#foo').addEventListener('skrollr.dataTopBottom.up', function() {
// #foo は、スクロールしている間、data-top-bottomをキーフレームに渡します。
}, false)

ただし、IEは不可です。

easing

新しいイージング関数を定義したり、又は、既存のものに上書きするオブジェクトです。イージング関数は、0と1の間の値を引数として1つだけ取得します(アニメーションの何割を行なったか)。関数は同様に0と1の間の値を返すべきですが、いくつかのeasing関数(バネの動きのような)では、値が0より小さかったり、1より大きかったりしますが、問題はありません。

イージング関数は、基本的には、アニメーションのタイムラインに変換します。アニメーションが50%完了するべき時、それが90%完了するまで、独自関数か何かで、変換することができます。

例:

skrollr.init({
 easing: {
  //This easing will sure drive you crazy
  wtf: Math.random,
  inverted: function(p) {
   return 1 - p;
  }
 }
});

これで、他のどのようなイージング関数も使用可能です。

skrollrは、いくつかの関数を提供しています。

  • linear:デフォルト。指定する必要はありません。
  • quadratic:2の累乗に。つまり、50%は25%のようになる。
  • cubic:3の累乗に。つまり、50%は12.5%のようになる。
  • begin/end:それぞれは、常に0または1を返す。アニメーションではない。
  • swing:初めはゆっくり、最後に加速する。つまり、25% → 14.6%、50% → 50%、75% → 85.3%となる。
  • sqrt:平方根。最初速く、終了時に遅くなる。
  • outCubic
  • bounce:ボールのような跳ね返り。グラフィック表現(https://www.desmos.com/calculator/tbr20s8vd2)を参照。

skrollr.get()

事前に init() を実行すると、skrollrインスタンス又は undefined を返します。

Public API

init()を実行するとパブリックAPIを公開するskrollrのインスタンスを返します。

refresh([elements])

与えられた全ての要素を再解析します。単一要素または配列状の要素(配列、NodeList、jQueryオブジェクト)を渡すことができます。

下記のように使用します。

  • relative modeでは、要素を変更、必要であれば、更新します。
  • data-属性が動的に操作されます。
  • 新しい要素は、DOMに追加され、skrollrにより制御されるようになります。

要素が無い場合は、ページ内のすべての要素が再び解析されます。実際には、skrollr.init()が呼ばれた時には、skrollrは、内部でパラメータなしに refresh() を使用します。

操作により消費する時間が、すべてのレンダリングを呼び出すべきではありません。

相対から絶対へ(element, viewportAnchor, elementAnchor)

相対アンカーを絶対スクロール位置で計算した整数を返します。

要素は DOM要素でなければなりません。

viewportAnchorとelementAnchorは、top、center、又は、bottomのいずれかである必要があります。

var offset = s.relativeToAbsolute(document.getElementById('foo'), 'top', 'bottom');
// 変数offsetには、#fooの底辺がviewportのtopにある時に、スクロール位置が含まれます。
// もし、今、setScrollTop(offset)やanimateTo(offset)を使ったならば、#fooの底辺は完全にviewportの一番上に並ぶでしょう。

getScrollTop()

ピクセル単位で現在のスクロールのオフセット位置を返します。異なるブラウザ間の癖を調整し、モバイルスクロールを処理します。

getMaxScrollTop()

全体で下にスクロールすることができるピクセル数を返します。forceHeight が true ならば、それは通常、最大のキーフレームです。それ以外の場合は、ページの高さからviwwportの高さを引いた高さになります。

setScrollTop(top[, force = false])

デスクトップでは、window.scrollTo(0, top) を使用して、モバイルのスクロールでは、内部状態を更新して、topからのオフセットを設定します。

forceがtrueの時は、skrollrは、何の変化もさせないで、新しい位置にジャンプします。デフォルトでは、グローバルのsmoothScrollingの設定が適用されます。

isMobile()

skrollrがモバイル·モードで実行しているかどうかを返します(mobileCheckのオプションも参照してください)。

animateTo(top[, options])

現在の位置からtopへスクロール位置をアニメーションします。可能なオプションは下記の通りです。

duration

アニメーションの長さを、ミリ秒単位で実行できます。デフォルトは1000、または1秒です。

easing

イージング関数の名前です。同じ関数は、プロパティのアニメーション用として使用することができます。デフォルトはlinearです。

done

アニメーションが完了した後に呼び出される関数です。現在の値と同様に、top の値を渡すと、すぐに関数が呼び出されます。アニメーションがstopAnimateToにより中断されたり、終了したりすると、それを示す、boolean型の引数 interrupted を取得します。

stopAnimateTo()

アニメーションを停止し、interrupted引数として、true を渡す done コールバックを呼び出します。

isAnimatingTo()

animateTo によって起こされるアニメーションが実行されているかどうかを返します。

on(name, fn)

オプション·セクション(beforerender、render、keyframe)に書かれたいずれかのイベントのリスナー関数を設定します。唯一のリスナーは、所与の時間に付随させることができます。いずれの場合にも、このメソッドは、現在のリスナーを上書きします。

off(name)

指定されたイベントのリスナーを削除します。

destroy()

skrollrを解放します。すべてのクラスとスタイル属性は、それらが以前に持っていた値に設定されます。