GSAP(GreenSock) 타임라인을 위한 작고 사용자 정의 가능한 YouTube 같은 플레이어
프로젝트 데모 페이지: http://s.codepen.io/sdras/debug/Mpjxxq/
가장 간단한 사용법은 닫는 body 태그(CSS 파일이 필요하지 않음) 앞에 gsap-player.js를 로드하고 다음을 구현하는 것입니다.
gsapPlayer ( { playerTL : yourtimelinehere } ) ; 그러면 플레이어가 document.body에 추가됩니다. 기본 타임라인 이름은 tl 입니다. tl을 사용하는 경우 gsapPlayer();
GSAP 플레이어는 기본적으로 어두운 테마로 설정되지만 밝은 테마를 구성할 수도 있습니다.
gsapPlayer ( { light : true } ) ;기본적으로 GSAP 플레이어의 너비는 80%이고 뷰포트 하단으로부터의 거리는 40px입니다. 전체 너비로 구성하거나 아래쪽으로 플러시하거나 약간 높거나 낮게 구성할 수 있습니다. 하단은 문자열이어야 합니다.
gsapPlayer ( {
fullWidth : true ,
bottom : '0'
} ) ; 전체 너비를 사용하고 컨테이너의 기본값을 document.body로 유지하는 경우 이상한 브라우저 기본값으로 인해 본문에 재설정을 사용했거나 margin: 0 배치했는지 확인해야 합니다.
기본적으로 플레이어는 본문에서 인스턴스화되지만 부모를 변경하려면 다음을 수행할 수 있습니다.
gsapPlayer ( { container : '#foo' } ) ;해당 div에 플레이어를 공간적으로 포함하려면 해당 포함 요소에 position:relative를 넣어야 합니다. 주의할 점은 애니메이션을 컨테이너에 넣지 않는다는 것입니다. 구성은 유연성을 위해 별도로 유지됩니다.
(MIT 라이센스)
저작권 (c)2017 Sarah Drasner @sarah_edo 모든 권리 보유.
본 소프트웨어 및 관련 문서 파일('소프트웨어')의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.
위의 저작권 고지와 본 허가 고지는 소프트웨어의 모든 사본 또는 상당 부분에 포함됩니다.
소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 '있는 그대로' 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.
