gsap player

？ GSAP 播放器？

一個小型的、可自訂的類似 YouTube 的 GSAP (GreenSock) 時間軸播放器

專案示範頁面：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' } ) ;

您需要在該包含元素上放置position:relative，將玩家空間包圍在該div中。請注意：這不會將動畫也放入容器中（為了靈活性，配置是分開的。

執照

（麻省理工學院許可證）

版權所有 (c)2017 Sarah Drasner @sarah_edo 保留所有權利。

特此免費授予任何獲得本軟體和相關文件文件（「軟體」）副本的人不受限制地使用本軟體，包括但不限於使用、複製、修改、合併的權利、發布、分發、再授權和/或銷售軟體的副本，並允許向其提供軟體的人員這樣做，但須滿足以下條件：

上述版權聲明和本授權聲明應包含在本軟體的所有副本或主要部分中。

本軟體以「現況」提供，不提供任何明示或暗示的保證，包括但不限於適銷性、特定用途的適用性和不侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.