GSAP (GreenSock) タイムライン用のカスタマイズ可能な YouTube のような小さなプレーヤー
プロジェクトのデモページ: http://s.codepen.io/sdras/debug/Mpjxxq/
最も簡単な使用方法は、body 終了タグの前に gsap-player.js をロードし (CSS ファイルは必要ありません)、以下を実装することです。
gsapPlayer ( { playerTL : yourtimelinehere } ) ;これにより、プレーヤーが document.body に追加されます。デフォルトのタイムライン名はtlです。 tl を使用している場合は、 gsapPlayer();
GSAP Player はデフォルトで暗いテーマに設定されますが、明るいテーマを構成することもできます。
gsapPlayer ( { light : true } ) ;デフォルトでは、GSAP プレーヤーの幅は 80%、ビューポートの下部から 40 ピクセルになります。全幅または下部と同じ高さ、またはわずかに高くまたは低く設定できます。下部は文字列内にある必要があります。
gsapPlayer ( {
fullWidth : true ,
bottom : '0'
} ) ;全角を使用し、コンテナのデフォルトを document.body のままにする場合は、ブラウザのデフォルトがおかしいため、リセットを使用したか、本文にmargin: 0を配置したことを確認する必要があります。
デフォルトでは、プレーヤーは本体上でインスタンス化されますが、親を変更したい場合は、次のようにすることができます。
gsapPlayer ( { container : '#foo' } ) ;その div 内でプレイヤーを空間的に囲むには、その要素を含む要素にposition:relativeを設定する必要があります。注意: これではアニメーションもコンテナに入れられません (柔軟性を高めるために構成は別個に保たれています)。
(MITライセンス)
Copyright (c)2017 Sarah Drasner @sarah_edo 全著作権所有。
本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。
ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。
