โปรแกรมเล่นคล้าย YouTube ขนาดเล็กที่ปรับแต่งได้สำหรับไทม์ไลน์ GSAP (GreenSock)
หน้าสาธิตโครงการ: http://s.codepen.io/sdras/debug/Mpjxxq/
การใช้งานที่ง่ายที่สุดที่เป็นไปได้คือการโหลด gsap-player.js ก่อนแท็กเนื้อหาปิด (คุณไม่จำเป็นต้องใช้ไฟล์ CSS) และใช้งาน:
gsapPlayer ( { playerTL : yourtimelinehere } ) ; สิ่งนี้จะเพิ่มผู้เล่นต่อท้าย document.body ชื่อไทม์ไลน์เริ่มต้นคือ tl หากคุณใช้ tl คุณจะต้องเรียก gsapPlayer(); เท่านั้น
GSAP Player จะใช้ธีมสีเข้มเป็นค่าเริ่มต้น แต่คุณยังกำหนดค่าธีมสีอ่อนได้ด้วย โดยทำดังนี้
gsapPlayer ( { light : true } ) ;ตามค่าเริ่มต้น โปรแกรมเล่น GSAP จะมีความกว้าง 80% และ 40px จากด้านล่างของวิวพอร์ต คุณสามารถกำหนดค่าให้เป็นความกว้างเต็มหรือชิดด้านล่าง หรือสูงกว่าหรือต่ำกว่าเล็กน้อยได้ ด้านล่างจะต้องอยู่ในสตริง
gsapPlayer ( {
fullWidth : true ,
bottom : '0'
} ) ; หากคุณใช้ความกว้างเต็มความกว้างและคงค่าเริ่มต้นของคอนเทนเนอร์ไว้ที่ document.body คุณควรแน่ใจว่าคุณได้ใช้การรีเซ็ตหรือวาง margin: 0 บนเนื้อหาเนื่องจากค่าเริ่มต้นของเบราว์เซอร์ที่แปลก
ตามค่าเริ่มต้น เครื่องเล่นจะถูกสร้างอินสแตนซ์บนเนื้อหา แต่หากคุณต้องการเปลี่ยนพาเรนต์ คุณสามารถทำได้:
gsapPlayer ( { container : '#foo' } ) ;คุณจะต้องใส่ตำแหน่ง: สัมพันธ์กับองค์ประกอบที่มีเพื่อล้อมรอบผู้เล่นเป็นพิเศษใน div นั้น โปรดทราบว่าการดำเนินการนี้จะไม่ใส่ภาพเคลื่อนไหวลงในคอนเทนเนอร์ด้วย (การกำหนดค่าจะถูกแยกไว้ต่างหากเพื่อความยืดหยุ่น
(ใบอนุญาตเอ็มไอที)
ลิขสิทธิ์ (c)2017 Sarah Drasner @sarah_edo สงวนลิขสิทธิ์
อนุญาตให้บุคคลใดๆ ได้รับสำเนาของซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") โดยไม่เสียค่าใช้จ่าย เพื่อจัดการกับซอฟต์แวร์โดยไม่มีข้อจำกัด รวมถึงแต่ไม่จำกัดเพียงสิทธิ์ในการใช้ คัดลอก ปรับเปลี่ยน ผสาน เผยแพร่ แจกจ่าย ให้อนุญาตช่วง และ/หรือขายสำเนาของซอฟต์แวร์ และอนุญาตให้บุคคลที่ได้รับซอฟต์แวร์นี้สามารถทำได้ ภายใต้เงื่อนไขต่อไปนี้:
ประกาศเกี่ยวกับลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์นี้มีให้ 'ตามที่เป็น' โดยไม่มีการรับประกันใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ซึ่งรวมถึงแต่ไม่จำกัดเพียงการรับประกันความสามารถในการค้าขาย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ และการไม่ละเมิด ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดต่อการเรียกร้องค่าเสียหายหรือความรับผิดอื่นใดไม่ว่าในการกระทำของสัญญาการละเมิดหรืออย่างอื่นที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือข้อตกลงอื่น ๆ ใน ซอฟต์แวร์.
