JOS Animation Library
v0.9.2)
ไลบรารีแอนิเมชั่นที่เรียบง่ายและใช้งานง่ายสำหรับนักพัฒนาเว็บ
หน้า Git ·การสาธิตสนามเด็กเล่น·รายงานข้อผิดพลาด·คุณลักษณะการร้องขอ
Jos-Animation, JavaScript เกี่ยวกับ Scroll Animation Library เป็นแพ็คเกจคลังภาพเคลื่อนไหวที่ใช้งานง่ายและใช้งานง่ายเพื่อเพิ่มภาพเคลื่อนไหวระดับมืออาชีพลงในเว็บไซต์ของคุณทันที มันถูกสร้างขึ้นเพื่อให้ชีวิตของฉันง่ายขึ้นในขณะที่พัฒนาเว็บไซต์และมาพร้อมกับคุณสมบัติมากมายและปรับแต่งได้อย่างเต็มที่ มันมีน้ำหนักเบาและมีรอยเท้าที่เล็กมาก ส่วนที่ดีที่สุดของทั้งหมดคือมันไม่มีค่าผ่านทาง (ขั้นต่ำ) ที่มีต่อประสิทธิภาพ
โครงการนี้กำลังได้รับการพัฒนาโดย Me & the Dev Community ดังนั้นคุณสามารถคาดหวังคุณสมบัติและการอัปเดตเพิ่มเติมได้บ่อยมาก ..
ได้รับแรงบันดาลใจจาก GSAP ห้องสมุด AOS ฉันต้องการสิ่งที่ใช้ง่ายขึ้นด้วยประสิทธิภาพที่ยอดเยี่ยมและต้องการทำให้การใช้งานดีขึ้น ดังนั้นฉันจึงทำงานในโครงการนี้ตั้งแต่เริ่มต้น
อย่าลังเลที่จะรายงานปัญหาหรือขอคุณสมบัติในที่เก็บนี้ :) และสำหรับข้อมูลเพิ่มเติมตรวจสอบหน้าเว็บ JOS
< a
target =" _blank "
rel =" noopener noreferrer nofollow "
href =" https://github.com/jesvijonathan/JOS-Animation-Library "
>
< img
src =" https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default.svg "
alt =" JOS-Animation "
style =" max-width: 100%; "
/> </ a > JOS v0.9.2 11 Nov 2023 Jesvi Jonathan
คุณมีตัวเลือกในการใช้ JOS เวอร์ชันล่าสุดจากแหล่งข้อมูลที่หลากหลาย:
< script
src =" https://cdnjs.cloudflare.com/ajax/libs/jos-animation/0.9.2/jos.js "
integrity =" sha512-ZbNmgrMmWwQspNz6WQ1HnqLEPMXE4PyJBVnuc10e4gwJhrycze2IzjDQPx4CxkOBnUyt5wNCekdeTRJOe8J4WA== "
crossorigin =" anonymous "
referrerpolicy =" no-referrer "
> </ script > < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/jos.js " > </ script > < script src =" https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.js " > </ script >(หรือ)
< script src =" https://cdn.jsdelivr.net/npm/jos-animation/dist/jos.js " > </ script >(หรือ)
< script src =" https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.9.2/jos.js " > </ script > < script src =" https://unpkg.com/jos-animation " > </ script >(หรือ)
< script src =" https://unpkg.com/[email protected]/dist/jos.js " > </ script > < script src =" https://raw.githubusercontent.com/jesvijonathan/JOS-Animation-Library/master/dist/jos.js " > </ script > คุณสามารถเพิ่มสคริปต์รุ่นเล็ก ๆ ได้โดยแทนที่ jos.js ด้วย jos.min.js ในแท็กสคริปต์ด้านบน
jos.js สำหรับพื้นฐาน - jos.min.js สำหรับการใช้งานการผลิต - jos.debug.js สำหรับ การดีบัก พร้อมกับฟังก์ชั่นอื่น ๆ จาก v0.9 เป็นต้นไปโดยค่าเริ่มต้น jos.js ไม่ต้องการให้คุณเพิ่มสไตล์ jos.css มันจะถูกส่งออกพร้อมกับสคริปต์ แต่คุณยังสามารถเพิ่มสไตล์ชีทได้หากคุณต้องการด้วยเหตุผลบางอย่าง ### การนำเข้า Jos 1. ติดตั้ง JOS โดยใช้ NPM (เส้นด้ายหรือ PNPM): `` bash npm ติดตั้ง Jos-Animation jos-animation@latest[email protected][email protected] ดังนั้นมันจะเป็น https://unpkg.com/jos-animation/@latest/dist/jos.js (ฝัง) สำหรับเวอร์ชันล่าสุด หรือ jos-animation/@0.8.8/dist/jos.js (ติดตั้ง NPM) สำหรับเวอร์ชันเฉพาะ
npm install jos-animation // import "jos-animation/dist/jos.css";
// Above is required only for v0.8.8 & below (or) if you want to overide jos by using style from the stylesheet
import JOS from "jos-animation" ;
// Other ways to import JOS
// import JOS from "jos-animation/dist/jos.js";
// import JOS from "jos-animation/dist/jos.min.js";
// import JOS from "jos-animation/dist/jos.debug.js"; // main.js
import { createApp } from "vue" ;
import { watch , nextTick } from "vue" ;
import JOS from "jos-animation" ; // jos-animation/dist/jos.debug.js
import App from "./App.vue" ;
const app = createApp ( App ) ;
app . mount ( "#app" ) ;
JOS . init ( ) ;
//JOS.version();
watch (
( ) => router . currentRoute . value ,
( ) => {
nextTick ( ( ) => {
JOS . refresh ( ) ;
} ) ;
}
) ;
// To observe elements after a route changeใช้ใน: https://jos-animation.vercel.app/
ตัวอย่างข้างต้นนี้สำหรับ vue.js ยังใช้ได้กับ nuxt.js
// index.js
import JOS from "jos-animation/dist/jos.js" ;
onload = ( ) => {
const options = {
debugMode : true ,
animation : "flip" ,
duration : 0.7 ,
rootMargin : "0% 0% 0% 0%" ,
} ;
JOS . init ( options ) ;
//JOS.version();
} ;
function Main ( ) {
useEffect ( ( ) => {
JOS . refresh ( ) ;
} , [ ] ) ;
// To observe elements after a route change
return (
< React . StrictMode >
< App />
</ React . StrictMode >
) ;
}
ReactDOM . createRoot ( document . getElementById ( "root" ) ) . render ( < Main /> ) ;ใช้ใน: https://azzle.netlify.app
ตัวอย่างข้างต้นนี้สำหรับ React.js ยังใช้ได้กับ next.js & preact.js
// app/layout.tsx
import jos from "jos-animation/dist/jos.js" ;
export default function RootLayout ( {
children ,
} : {
children : React . ReactNode ;
} ) {
const jos_options = {
debugMode : false ,
passive : true ,
animation : "fade" ,
duration : 0.4 ,
rootMargin : "20% 0% 30% 0%" ,
} ;
useEffect ( ( ) => {
jos . init ( jos_options ) ;
} , [ ] ) ; // Once
useEffect ( ( ) => {
jos . refresh ( ) ;
} ) ; // For every update
return ( ) ;
}
// To observe elements after a route changeใช้ใน: https://bitspace-nextjs-jos.vercel.app
import { Component , OnInit , AfterViewChecked } from '@angular/core' ;
import JOS from 'jos-animation' ;
@ Component ( {
selector : 'app-root' ,
templateUrl : './app.component.html' ,
styleUrls : [ './app.component.css' ]
} )
export class AppComponent implements OnInit , AfterViewChecked {
ngOnInit ( ) : void {
JOS . init ( ) ; // Once
}
ngAfterViewChecked ( ) : void {
JOS . refresh ( ) ; // For every update
}
// ... rest of your code
}คุณสามารถตรวจสอบเธรดการสนทนานี้สำหรับข้อมูลเพิ่มเติม: JOS สำหรับ Angular
JOS.init(); เพื่อเริ่มต้นไลบรารีด้วยการตั้งค่าเริ่มต้น <!-- Initialize JOS with default settings -->
< script >
JOS . init ( ) ;
</ script >JOS.init(options); เพื่อเอาชนะการตั้งค่าเริ่มต้นด้วยการตั้งค่าที่กำหนดเองของคุณ <!-- Global Parameters -->
< script >
JOS . init ( {
// disable: false, // Disable JOS globally | Values : 'true', 'false'
debugMode : true , // Enable JOS debug mode | Values : 'true', 'false'
passive : false , // Set the passive option for the scroll event listener | Values : 'true', 'false'
once : false , // Disable JOS after first animation | Values : 'true', 'false' || Int : 0-1000
animation : "fade" , // JOS global animation type | Values : 'fade', 'slide', 'zoom', 'flip', 'fade-right', 'fade-left', 'fade-up', 'fade-down', 'zoom-in-right', 'zoom-in-left', 'zoom-in-up', 'zoom-in-down', 'zoom-out-right', 'zoom-out-left', 'zoom-out-up', 'zoom-out-down', 'flip-right', 'flip-left', 'flip-up', 'flip-down, spin, revolve, stretch, "my-custom-animation"
// animationInverse: "static", // Set the animation type for the element when it is scrolled out of view | Values : 'fade', 'slide', 'zoom', 'flip', 'fade-right', 'fade-left', 'fade-up', 'fade-down', 'zoom-in-right', 'zoom-in-left', 'zoom-in-up', 'zoom-in-down', 'zoom-out-right', 'zoom-out-left', 'zoom-out-up', 'zoom-out-down', 'flip-right', 'flip-left', 'flip-up', 'flip-down, spin, revolve, stretch, "my-custom-animation"
timingFunction : "ease-in-out" , // JOS global timing function | Values : 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end', 'steps()', 'cubic-bezier()', 'my-custom-timing-function'
//mirror : false, // Set whether the element should animate back when scrolled out of view | Values : 'true', 'false'
threshold : 0 , // Set global the threshold for the element to be visible | Values : 0-1
delay : 0 , // Set global the delay for the animation to start | Values : 0,1,2,3,4,5
duration : 0.7 , // Set global the duration for the animation playback | Values : flota : 0-1 & int : 0,1,2,3,4,5
// startVisible: "true", // Set whether the element should animate when the page is loaded | Values : 'true', 'false' || MS : 0-10000
// scrollDirection: "down", // Set the scroll direction for the element to be visible | Values : 'up', 'down', 'none'
//scrollProgressDisable: true // disable or enable scroll callback function | Values : 'true', 'false'
// intersectionRatio: 0.4, // Set the intersection ratio between which the element should be visible | Values : 0-1 (automatically set)
// rootMargin_top: "0%", // Set by which percent the element should animate out (Recommended value between 10% to -30%)
// rootMargin_bottom: "-50%", // Set by which percent the element should animate out (Recommended value between -10% to -60%)
// rootMargin: "0% 0% -50% 0%", // Set the root margin for the element to be visible | Values : _% _% _% _% (automatically set)
} ) ;
</ script >class="jos" เป็นองค์ประกอบที่คุณต้องการเคลื่อนไหว: <!-- JOS class is required to animate the element -->
< div class =" jos " > </ div >data-jos *เพื่อปรับแต่งองค์ประกอบที่คุณต้องการเคลื่อนไหว <!-- JOS attributes are optional and will work without them (class="jos" is mandatory). these attributes can be used to customize the animation of the element -->
< div
class =" jos "
data-jos_animation =" zoom "
data-jos_once =" false "
data-jos_duration =" 0.4 "
data-jos_delay =" 0.1 "
data-jos_timing-function =" ease-in-out "
data-jos_mirror =" true "
data-jos_rootMargin =" 0% 0% -50% 0% "
data-jos_rootMargin_top =" -10% "
data-jos_rootMargin_bottom =" -50% "
data-jos_scrollDirection =" down "
data-jos_startVisible =" false "
data-jos_threshold =" 0.4 "
data-jos_passive =" false "
data-jos_invoke =" myCustomFunction "
data-jos_invoke_out =" myCustomFunction_onExit "
data-jos_scroll =" your_callbackFunction "
data-jos_anchor =" #elementID "
> </ div >ดู JOS Props สำหรับข้อมูลทั้งหมดเกี่ยวกับภาพเคลื่อนไหวคุณลักษณะและตัวเลือก
/* Custom animation class name starts with 'jos-' keyword followed by the animation name*/
. jos-my-custom-animation {
/* Set the initial state of the element */
}data-jos_animation เป็นของ my-custom-animation : < div class =" jos " data-jos_animation =" my-custom-animation " > </ div >ตัวอย่าง: ภาพเคลื่อนไหวที่กำหนดเอง
/* Custom inverse animation class name starts with 'jos-' keyword followed by the animation name*/
. jos-my-custom-animation-inverse {
/* Set the initial state of the element */
}data-jos_animationInverse เป็น my-custom-animation-inverse : < div class =" jos " data-jos_animationInverse =" my-custom-animation-inverse " > </ div >สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการเคลื่อนไหวองค์ประกอบเมื่อ เลื่อนออกจากรูทมาร์จิน ซึ่งจะช่วยให้สามารถปรับแต่งได้มากขึ้นสำหรับภาพเคลื่อนไหวที่สวยงาม
นอกจากนี้คุณยังสามารถใช้การรวมกันของทั้ง data-jos_animation ("ไม่มี", "คงที่", ไม่มีการเปลี่ยนแปลง ฯลฯ ) และแอตทริบิวต์ data-jos_animationInverse เพื่อสร้างภาพเคลื่อนไหวที่กำหนดเอง
ตัวอย่าง: ภาพเคลื่อนไหวผกผันแบบกำหนดเอง
/* Custom playable animation class name starts with 'jos-' keyword followed by the animation name*/
/* My Custom Playable Animation */
. jos-my-custom-animation {
transition : 1 s ;
animation : jos-my-custom-animation 1 s ease-in-out infinite;
transform : translateX ( 100 px );
}
/* Add Keyframes */
@keyframes jos-my-custom-animation {
0 % {
opacity : 1 ;
}
50 % {
transform : translateX ( -100 px );
}
}data-jos_animation ให้เป็น my-custom-animation และ data-jos_animationInverse เป็นแอน my-custom-animation-play : < div
class =" jos "
data-jos_animation =" my-custom-animation "
data-jos_animationinverse =" static "
> </ div > ที่นี่แอตทริบิวต์ data-jos_animationinverse ถูกตั้งค่าเป็น static เพื่อป้องกันไม่ให้องค์ประกอบจากภาพเคลื่อนไหวจากมุมมอง & เพื่อให้อยู่ในสถานะสุดท้าย แอนิเมชั่นที่เล่นได้จะถูกกระตุ้นและเริ่มเล่นเมื่อองค์ประกอบถูกเลื่อนเข้าไปในมุมมอง
ตัวอย่าง: แอนิเมชั่นที่เล่นได้
/* Custom timing function attribute name starts with 'data-jos_timing_function' keyword & a custom name of your choice */
[ data-jos_timing_function = "myCustom-timingFunc" ] {
/* Set the timing of the element */
transition-timing-function : cubic-bezier ( 0.2 , 0.5 , 0.2 , 0.5 ) !important ;
}data-jos_timing-function เป็น my-custom-timing-function : < div class =" jos " data-jos_timing-function =" myCustom-timingFunc " > </ div >ตัวอย่าง: ฟังก์ชันกำหนดเวลาที่กำหนดเอง
id ลงใน: <!-- My reference anchor element -->
< div id =" myElement " > </ div >data-jos_anchor ลงในนั้นโดยมี ID เริ่มต้นด้วยคำต่อท้าย # : <!-- My animated element -->
< div class =" jos " data-jos_anchor =" #myElement " > </ div > สิ่งนี้ทำให้เกิดภาพเคลื่อนไหวเมื่อองค์ประกอบ myElement ถูกเลื่อนเข้าไปในมุมมอง
คุณลักษณะนี้มีประโยชน์โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการเคลื่อนไหวองค์ประกอบที่อยู่ใน ตำแหน่งคงที่
ตัวอย่าง: สมอ
data-jos_scrollDirection ลงในนั้น: <!-- My animated element -->
< div class =" jos " data-jos_scrollDirection =" down " > </ div > สิ่งนี้ทำให้เกิดภาพเคลื่อนไหวเมื่อองค์ประกอบถูกเลื่อนเข้าไปในมุมมองจากทิศทาง down
& คุณสามารถทำเช่นเดียวกันเพื่อไปยังทิศทาง up
สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการเคลื่อนไหวองค์ประกอบเมื่อ เลื่อนเข้าไปในมุมมองจากทิศทางที่เฉพาะเจาะจง
ตัวอย่าง: แอนิเมชั่นตามทิศทาง
data-jos_startVisible ลงไป: <!-- My animated element -->
< div class =" jos " data-jos_startVisible =" true " > </ div > สิ่งนี้ตั้งค่าองค์ประกอบที่จะมองเห็นได้เมื่อโหลดหน้าเว็บ คุณสามารถเพิ่มความล่าช้าได้โดยการตั้งค่าใน ms :
<!-- My animated element that is visible with a given timer/delay in ms-->
< div class =" jos " data-jos_startVisible =" 3000 " > </ div > สิ่งนี้ตั้งค่าองค์ประกอบที่จะมองเห็นได้เมื่อโหลดหน้าหลังจาก 3000 มิลลิวินาทีหรือทันทีหากค่าเป็น 0 (หรือ) true
คุณลักษณะนี้มีประโยชน์โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการองค์ประกอบที่อยู่ใน ตำแหน่งคงที่หรือมีอยู่ในหน้า Landing Page ที่จะอยู่ในสถานะที่มองเห็นได้โดยไม่มีภาพเคลื่อนไหว
ตัวอย่าง: เริ่มมองเห็นได้
// Create a custom function
function myCustomFunction ( ) {
// Do something
}data-jos_invoke เป็น myCustomFunction : < div class =" jos " data-jos_invoke =" myCustomFunction " > </ div >สิ่งนี้ทำให้ฟังก์ชั่น mycustomfunction () เมื่อองค์ประกอบถูกเลื่อนเข้าไปในมุมมอง
คุณสามารถใช้แอตทริบิวต์ data-jos_invoke_out เพื่อทริกเกอร์ฟังก์ชั่นเมื่อองค์ประกอบถูกเลื่อนออกจากมุมมอง
ตัวอย่าง: ฟังก์ชันที่กำหนดเอง
data-jos_scroll ลงในนั้น: < div id =" elem1 " class =" jos " data-jos_scroll =" your_callbackFunction " >
Scroll Trigger Element
</ div > your_callbackFunction = ( element ) => {
// windowScrollProgress : element scroll pixel
console . log ( element . id , element . jos . windowScrollProgress ) ;
// scrollProgress : 0-1
element . style . opacity = element . jos . scrollProgress ;
// rootScrollProgress : +-0 to +-1
element . style . innerHTML = element . jos . rootScrollProgress ;
} ;สิ่งนี้จะกระตุ้นฟังก์ชั่น YOUR_CALLBACKFUNCTION () เมื่อองค์ประกอบถูกเลื่อน วิธีนี้คุณสามารถจัดการความคืบหน้าการเลื่อนขององค์ประกอบ
ตัวอย่าง: ฟังก์ชันที่กำหนดเอง
data-jos_stagger ลงไปพร้อมกับ jos Class: < div
class =" jos parent_elem "
id =" stagger "
data-jos_stagger =" spin "
data-jos_staggerinverse =" none "
data-jos_stagger_anchor =" #elementID "
data-jos_stagger_sequence =" 0.1 "
data-jos_stagger_delay =" 0 "
data-jos_stagger_duration =" 0.4 "
data-jos_stagger_timing-function =" ease-in-out "
data-jos_stagger_mirror =" true "
data-jos_stagger_rootMargin =" 0% 0% -50% 0% "
data-jos_stagger_invoke =" myCustomFunction "
data-jos_stagger_invoke_out =" myCustomFunction_onExit "
data-jos_stagger_scroll =" your_callbackFunction "
data-jos_stagger_startVisible =" false "
data-jos_stagger_scrollDirection =" down "
data-jos_stagger_once =" false "
>
<!-- data-jos_stagger="true" # this attribute along with 'jos' class in parent element is Required/Must to enable staggering -->
<!-- data-jos_stagger_anchor="true" # auto sets parent element's id & uses it as a anchor's -->
<!-- Element 1 -->
< div class =" child_elem " > </ div >
<!-- Element 2 -->
< div class =" child_elem " > </ div >
<!-- Element 3 -->
< div class =" child_elem " > </ div >
<!-- Element n -->
</ div > แอตทริบิวต์ data-jos_stagger พร้อมกับคลาส jos ในองค์ประกอบหลักนั้นจำเป็นต้องมี/ต้องเปิดใช้งานการส่ายแม้ว่าคุณจะใช้แอตทริบิวต์อื่น ๆ
data-jos_stagger = true จะอัตโนมัติ asign id สำหรับองค์ประกอบหลักและใช้เป็นจุดยึดสำหรับองค์ประกอบเด็กdata-jos_stagger = #id จะใช้ ID ที่กำหนดเป็นจุดยึดสำหรับองค์ประกอบเด็กdata-jos_stagger_anchor ทำให้องค์ประกอบเป็นอิสระจากองค์ประกอบหลัก data-jos_stagger_seq ใช้เพื่อตั้งค่าความล่าช้าระหว่างแต่ละองค์ประกอบในลำดับ (เพื่อทริกเกอร์หนึ่งหลังจากอื่น ๆ ) ในขณะที่ data-jos_stagger_delay ความล่าช้าทั้งหมดสำหรับแต่ละองค์ประกอบโดยรวม
ตัวอย่าง: แอนิเมชั่นที่ส่าย
| คุณลักษณะ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย | ค่า |
|---|---|---|---|---|
| data-jos_animation | สาย | จางลง | ตั้งค่าประเภทภาพเคลื่อนไหวสำหรับองค์ประกอบ | fade , slide , zoom , flip , fade-right , zoom-in-left fade-left , fade-up , fade-down , zoom-in-right zoom-out-right zoom-in-down zoom-out-left zoom-in-up flip-left flip-up flip-right rotate-right flip-down rotate zoom-out-up spin zoom-out-down spin-right revolve revolve-right stretch , stretch-vertical , my-custom-animation |
| data-jos_animationinverse | สาย | คงที่ | ตั้งค่าประเภทภาพเคลื่อนไหวผกผันสำหรับองค์ประกอบ | fade , slide , zoom , flip , fade-right , zoom-in-left fade-left , fade-up , fade-down , zoom-in-right zoom-out-right zoom-in-down zoom-out-left zoom-in-up flip-left flip-up flip-right rotate-right flip-down rotate zoom-out-up spin zoom-out-down spin-right revolve revolve-right stretch , stretch-vertical , my-custom-animation |
| data-jos_once | บูลีน | เท็จ | ตั้งค่าว่าองค์ประกอบควรเคลื่อนไหวเพียงครั้งเดียว | true false |
| data-jos_delay | int | 0 | ตั้งค่าความล่าช้าสำหรับแอนิเมชั่นเพื่อเริ่มต้น | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| data-jos_duration | ลอย | 0.4 | ตั้งค่าระยะเวลาสำหรับการเล่นแอนิเมชั่น | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| data-jos_timing-function | สาย | ผ่อนปรน | ตั้งค่าฟังก์ชั่นกำหนดเวลาสำหรับการเล่นแอนิเมชั่น | ease , ease-in , ease-out , ease-in-out , linear , step-start , ขั้นตอน step-end , steps(1, start) , steps(1, end) , cubic-bezier(0.1, 0.7, 1.0, 0.1) , my-custom-timingFunc |
| data-jos_invoke | สาย | โมฆะ | ตั้งค่าฟังก์ชั่นที่จะเรียกใช้เมื่อองค์ประกอบถูกเลื่อนเข้าไปในมุมมอง | function , myCustomFunction |
| data-jos_invoke_out | สาย | โมฆะ | ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อองค์ประกอบถูกเลื่อนออกจากมุมมอง | function , myCustomFunction |
| ข้อมูลครั้งเดียว | บูลีน & int | เท็จ | ตั้งค่าว่าองค์ประกอบควรเคลื่อนไหวเท่านั้น | (boolean: true, false) & (int: 0-infinity) |
| data-jos_rootmargin | สาย | 0% -10% 0% -50% | ตั้งค่ามาร์จิ้นสำหรับองค์ประกอบให้เคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | (string: "right% top% left% bottom%") |
| data-jos_rootmargin_top | สาย | 0% | กำหนดระยะขอบสำหรับองค์ประกอบให้เคลื่อนไหวที่ด้านบนของวิวพอร์ตเมื่อเลื่อน | (string: "top%") |
| data-jos_rootmargin_bottom | สาย | 0% | ตั้งค่าขอบสำหรับองค์ประกอบให้เคลื่อนไหวที่ด้านล่างของวิวพอร์ตเมื่อเลื่อน | (string: "bottom%") |
| data-jos_scrolldirection | สาย | ลง | กำหนดทิศทางสำหรับองค์ประกอบให้เคลื่อนไหวบน Ina Viewport เมื่อเลื่อน | (string: "up", "down", "none") |
| data-jos_startvisible | บูลีน & int | เท็จ | ตั้งค่าว่าองค์ประกอบควรเริ่มต้นที่สถานะสุดท้ายเมื่อโหลดหน้าเว็บหรือไม่ (ยังทำงานกับความล่าช้า) | (boolean: true, false) & (int: 0-10000 ms) |
| data-jos_anchor | สาย | โมฆะ | ตั้งค่าองค์ประกอบสมอสำหรับองค์ประกอบเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | (string: "#elementID") |
| data-jos_scroll | สาย | โมฆะ | ตั้งค่าฟังก์ชั่นการโทรกลับสำหรับองค์ประกอบเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | function , your_callbackFunction |
| data-jos_stagger | สาย | จางลง | ตั้งค่าแอนิเมชั่นที่น่าตื่นเต้นสำหรับองค์ประกอบของเด็กที่โซเซไปเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | string fade |
| data-jos_staggerinverse | สาย | คงที่ | ตั้งค่าแอนิเมชั่นผกผันที่แฝงอยู่สำหรับองค์ประกอบของเด็กที่โซเซไปเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน (เล่นแอนิเมชั่น) | string fade-play |
| data-jos_stagger_anchor | สาย | โมฆะ | ตั้งค่าองค์ประกอบสมอสำหรับองค์ประกอบเด็กที่โซเซไปเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | string #elementID |
| data-jos_stagger_seq | ลอย | โมฆะ | ตั้งค่าความล่าช้าลำดับสำหรับองค์ประกอบของเด็กที่โซเซไปเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | float , 0-1 |
| data-jos_stagger_delay | ลอย | โมฆะ | ตั้งค่าความล่าช้าสำหรับองค์ประกอบของเด็กที่โซเซไปเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | float , 0-1 |
| data-jos_stagger_duration | ลอย | โมฆะ | กำหนดระยะเวลาสำหรับองค์ประกอบให้กับเด็กที่มีการเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | float , 0-1 |
| data-jos_stagger_timing-function | สาย | โมฆะ | ตั้งค่าฟังก์ชั่นกำหนดเวลาสำหรับองค์ประกอบของเด็กที่โซเซไปเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | string ease |
| data-jos_stagger_mirror | บูลีน | โมฆะ | ตั้งค่าอนิเมชั่นมิเรอร์สำหรับองค์ประกอบเด็กที่โซเซไปเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | boolean true false |
| data-jos_stagger_rootmargin | สาย | โมฆะ | กำหนดระยะขอบสำหรับองค์ประกอบของเด็กที่โซเซไปเป็นภาพเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | (string: "right% top% left% bottom%") |
| data-jos_stagger_scrolldirection | สาย | โมฆะ | กำหนดทิศทางสำหรับองค์ประกอบของเด็กที่โซเซไปเป็นภาพเคลื่อนไหวบน Ina Viewport เมื่อเลื่อน | (string: "up", "down", "none") |
| data-jos_stagger_startvisible | บูลีน & int | โมฆะ | ตั้งค่าว่าองค์ประกอบของเด็กที่โซเซไปด้วยควรเริ่มต้นที่สถานะสุดท้ายเมื่อโหลดหน้าเว็บหรือไม่ (ยังทำงานกับความล่าช้า) | (boolean: true, false) & (int: 0-10000 ms) |
| data-jos_stagger_once | บูลีน | โมฆะ | ตั้งค่าว่าองค์ประกอบควรเคลื่อนไหวเพียงครั้งเดียวหรือ n นับ | true , false , int |
| data-jos_stagger_scroll | สาย | โมฆะ | ตั้งค่าฟังก์ชั่นการโทรกลับสำหรับเด็กที่เดินโซเซไปเคลื่อนไหวในวิวพอร์ตเมื่อเลื่อน | function , your_callbackFunction |
| data-jos_stagger_invoke | สาย | โมฆะ | ตั้งค่าฟังก์ชั่นที่จะเรียกใช้เมื่อองค์ประกอบของเด็กที่โซเซเลื่อนลงในมุมมอง | function , myCustomFunction |
| data-jos_stagger_invoke_out | สาย | โมฆะ | ตั้งค่าฟังก์ชั่นที่จะเรียกใช้เมื่อองค์ประกอบของเด็กที่โซเซเลื่อนออกจากมุมมอง | function , myCustomFunction |
| วิธี | คำอธิบาย | พารามิเตอร์ |
|---|---|---|
| init () | เริ่มต้น/รีเซ็ต Jos | ตัวเลือก = {} (อ้างอิง jos.init (ตัวเลือก)) |
| รีเฟรช () | รีเฟรช Jos | ไม่มี |
| หยุด() | หยุด/หยุดชั่วคราว Jos | state = ( 0 - หยุดที่สถานะสุดท้าย, 1 - หยุดที่สถานะเริ่มต้น -1 - หยุดชั่วคราวที่สถานะปัจจุบัน) |
| เริ่ม() | เริ่ม/กลับมาใช้บริการ JOS | state = ( 0 - ปกติ/เริ่มต้นเต็ม, -1 - กลับมาทำงานจากสถานะปัจจุบัน) |
| ทำลาย() | ทำลายอินสแตนซ์ของ Jos | state = ( 0 - ทำลายอินสแตนซ์ JOS ไม่รวมสไตล์ชีท, 1 - ทำลายเต็มไปด้วยสไตล์ Jos) |
เมื่อคุณทำเสร็จแล้วและพัฒนา JOS เวอร์ชันเสร็จแล้วคุณสามารถรวมมันโดยใช้คำสั่งต่อไปนี้จาก Project Root:
# JOS-Animation-Library
# |-dev
# |-dist
# |-bundler
# |-config
# |-export <-- Check this folder for the output files
# |-jos.css
# |-jos.js
# |...
# |-original
# |-bundle.sh <-- Run this file to bundle JOS
# ... # Change/Move to bundler directory
cd ./bundler
# Bundle the project
sh bundle.sh
# View the output files
ls ./exportย้ายไปที่ปัญหา
บางทีแม้แต่มัดมันและทดสอบก่อนที่จะแบ่งปันกับโลก
( ping ฉันถ้าคุณมีการสาธิต;) )
