Un petit lecteur personnalisable de type YouTube pour les chronologies GSAP (GreenSock)
Page de démonstration du projet : http://s.codepen.io/sdras/debug/Mpjxxq/
L'utilisation la plus simple possible consiste à charger gsap-player.js avant la balise body de fermeture (vous n'avez pas besoin du fichier CSS) et à implémenter :
gsapPlayer ( { playerTL : yourtimelinehere } ) ; Cela ajoutera le lecteur à document.body. Le nom de la chronologie par défaut est tl , si vous utilisez tl, il vous suffit d'appeler gsapPlayer();
GSAP Player utilisera par défaut un thème sombre, mais vous pouvez également configurer un thème clair :
gsapPlayer ( { light : true } ) ;Par défaut, le lecteur GSAP aura une largeur de 80 % et une largeur de 40 px à partir du bas de la fenêtre. Vous pouvez le configurer pour qu'il soit sur toute la largeur ou au ras du bas, ou légèrement plus haut ou plus bas. Le bas doit être dans une chaîne.
gsapPlayer ( {
fullWidth : true ,
bottom : '0'
} ) ; Si vous utilisez la pleine largeur et conservez le conteneur par défaut sur document.body, vous devez être sûr que vous avez utilisé une réinitialisation ou placé margin: 0 sur le corps en raison d'étranges paramètres par défaut du navigateur.
Par défaut, le joueur est instancié sur le corps, mais si vous souhaitez changer de parent, vous pouvez faire :
gsapPlayer ( { container : '#foo' } ) ;Vous devrez mettre position: relative sur cet élément contenant pour enfermer spatialement le joueur dans ce div. Juste un avertissement : cela ne placera pas non plus l'animation dans le conteneur (la configuration est conservée séparée pour plus de flexibilité.
(La licence MIT)
Copyright (c)2017 Sarah Drasner @sarah_edo Tous droits réservés.
L'autorisation est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification, de fusion. , publier, distribuer, accorder des sous-licences et/ou vendre des copies du Logiciel, et permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :
L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes les copies ou parties substantielles du logiciel.
LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE, D'ADAPTATION À UN USAGE PARTICULIER ET DE NON-VIOLATION. EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DES DROITS D'AUTEUR NE SERONT RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGES OU AUTRE RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE, DE OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE LOGICIEL.
