Ein kleiner, anpassbarer YouTube-ähnlicher Player für GSAP (GreenSock) Timelines
Projekt-Demoseite: http://s.codepen.io/sdras/debug/Mpjxxq/
Die einfachste mögliche Verwendung besteht darin, gsap-player.js vor dem schließenden Body-Tag zu laden (Sie benötigen die CSS-Datei nicht) und Folgendes zu implementieren:
gsapPlayer ( { playerTL : yourtimelinehere } ) ; Dadurch wird der Player an document.body angehängt. Der Standardname der Zeitleiste ist tl . Wenn Sie tl verwenden, müssen Sie nur gsapPlayer();
GSAP Player verwendet standardmäßig ein dunkles Design, Sie können jedoch auch ein helles Design konfigurieren:
gsapPlayer ( { light : true } ) ;Standardmäßig ist der GSAP-Player 80 % breit und 40 Pixel vom unteren Rand des Ansichtsfensters entfernt. Sie können es so konfigurieren, dass es in voller Breite oder bündig mit dem Boden oder etwas höher oder niedriger ist. Unten muss sich eine Zeichenfolge befinden.
gsapPlayer ( {
fullWidth : true ,
bottom : '0'
} ) ; Wenn Sie die volle Breite verwenden und den Container standardmäßig auf „document.body“ belassen, sollten Sie aufgrund seltsamer Browser-Standardeinstellungen sicherstellen, dass Sie entweder einen Reset verwendet oder margin: 0 auf dem Textkörper platziert haben.
Standardmäßig wird der Player im Körper instanziiert. Wenn Sie jedoch das übergeordnete Element ändern möchten, können Sie Folgendes tun:
gsapPlayer ( { container : '#foo' } ) ;Sie müssen position: relative auf das enthaltende Element setzen, um den Player räumlich in diesem Div einzuschließen. Nur eine Warnung: Dadurch wird die Animation nicht auch in den Container verschoben (die Konfiguration wird aus Flexibilitätsgründen separat gehalten).
(Die MIT-Lizenz)
Copyright (c)2017 Sarah Drasner @sarah_edo Alle Rechte vorbehalten.
Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:
Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG. IN KEINEM FALL SIND DIE AUTOREN ODER URHEBERRECHTSINHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, WEDER AUS EINER VERTRAGLICHEN HANDLUNG, AUS HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN ZUSAMMENHANG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN HANDELN IN DER SOFTWARE ERGEBEN SOFTWARE.
