JOS Animation Library
v0.9.2)
مكتبة الرسوم المتحركة بسيطة وسهلة الاستخدام لمطوري الويب
صفحات git · توضيح الملعب · تقرير خطأ
Jos-Animation ، JavaScript on Scroll Animation Library هي حزمة مكتبة الرسوم المتحركة بسيطة وسهلة الاستخدام لإضافة الرسوم المتحركة الاحترافية على الفور إلى موقع الويب الخاص بك. تم تصميمه لجعل حياتي أسهل أثناء تطوير مواقع الويب ويأتي مع الكثير من الميزات وقابلة للتخصيص بالكامل. إنه خفيف الوزن وله بصمة صغيرة جدًا. أفضل جزء على الإطلاق هو أنه لا يوجد لديه (*الحد الأدنى) للأداء.
يتم تطوير هذا المشروع حاليًا من قبل مجتمعي ومجتمع Dev ، لذلك يمكنك توقع المزيد من الميزات والتحديثات في كثير من الأحيان ..
كانت مستوحاة من 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-enimation 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 arvent على my-custom-animation-inverse : < div class =" jos " data-jos_animationInverse =" my-custom-animation-inverse " > </ div >هذا مفيد بشكل خاص عندما تريد تحريك عنصر عندما يتم تمريره من Rootmargin ، وهذا يعطي المزيد من التخصيص للرسوم المتحركة الجميلة.
يمكنك أيضًا استخدام مزيج من كل من 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 إليه ، مع بدء المعرف باللاحقة # : <!-- 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 .
هذه الميزة مفيدة خاصة عندما تريد عنصرًا في وضع ثابت ، أو موجود في الصفحة المقصودة ليكون في حالة مرئية في البداية بدون رسوم متحركة.
مثال: ابدأ مرئيًا
// 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 : < 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 التلقائي للعنصر الأصل واستخدامه كمرساة لعناصر الطفل.data-jos_stagger = #id سوف تستخدم المعرف المحدد كمرساة لعناصر الطفل.data-jos_stagger_anchor جعل العنصر مستقلًا عن العنصر الأصل. يتم استخدام data-jos_stagger_seq لتعيين التأخير بين كل عنصر في التسلسل (لتشغيل واحد تلو الآخر) في حين أن data-jos_stagger_delay تأخير كلي لكل عنصر ككل.
مثال: الرسوم المتحركة المذهلة
| يصف | يكتب | تقصير | وصف | قيم |
|---|---|---|---|---|
| Data-jos_animation | خيط | يختفي | اضبط نوع الرسوم المتحركة للعنصر. | fade ، slide ، zoom ، flip ، fade-right fade-left ، fade-up ، fade-down zoom-in-up zoom-in-down zoom-in-right zoom-out-right ، zoom-out-left rotate zoom-in-left zoom-out-down zoom-out-up flip-left flip-up rotate-right flip-down spin spin-right revolve flip-right revolve-right ، stretch ، stretch-vertical ، my-custom-animation |
| data-jos_animationInverse | خيط | ثابت | اضبط نوع الرسوم المتحركة العكسية للعنصر. | fade ، slide ، zoom ، flip ، fade-right fade-left ، fade-up ، fade-down zoom-in-up zoom-in-down zoom-in-right zoom-out-right ، zoom-out-left rotate zoom-in-left zoom-out-down zoom-out-up flip-left flip-up rotate-right flip-down spin spin-right revolve flip-right 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) |
| البيانات-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_rotmargin_top | خيط | 0 ٪ | يحدد الهامش لعنصر تحريكه في الجزء العلوي من إطار العرض عند التمرير. | (string: "top%") |
| data-jos_rotmargin_bottom | خيط | 0 ٪ | يضبط الهامش لعنصر تحريك في أسفل منفذ العرض عند التمرير. | (string: "bottom%") |
| Data-jos_scrolldirection | خيط | تحت | يضبط الاتجاه لعنصر للتحريك في إينا إيماءة عند التمرير. | (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 | خيط | يختفي | يضع الرسوم المتحركة Stagger لعنصر stagger طفل لتحريكه في منفذ العرض عند التمرير. | string ، fade |
| Data-jOS_StaggerInverse | خيط | ثابت | يضع الرسوم المتحركة العكسية stagger لعنصر stagger طفل لتحريكه في منفذ العرض عند التمرير (تشغيل الرسوم المتحركة). | string ، fade-play |
| Data-jos_stagger_anchor | خيط | باطل | يضع عنصر المرساة لعنصر stagger الطفل في موانئ العرض عند التمرير. | string ، #elementID |
| Data-jos_stagger_seq | يطفو | باطل | يضع تأخير التسلسل لعنصر stagger الطفل في موانئ العرض عند التمرير. | float ، 0-1 |
| data-jos_stagger_delay | يطفو | باطل | يضع تأخير عنصر stagger الطفل في تحريكه في منفذ العرض عند التمرير. | float ، 0-1 |
| Data-jos_stagger_duration | يطفو | باطل | يحدد مدة عنصر إلى طفل stagger تحريكه في إطار عرض عند التمرير. | float ، 0-1 |
| data-jos_stagger_timing-function | خيط | باطل | يحدد وظيفة التوقيت لعنصر stagger الطفل لتحريكه في منفذ العرض عند التمرير. | string ، ease |
| Data-jos_stagger_mirror | منطقية | باطل | يعين الرسوم المتحركة المرآة لعنصر stagger طفل لتحريكه في منفذ العرض عند التمرير. | boolean ، true ، false |
| data-jos_stagger_rotmargin | خيط | باطل | يحدد الهامش لعنصر stagger الطفل في إطار عرض عند التمرير. | (string: "right% top% left% bottom%") |
| data-jos_stagger_scrolldirection | خيط | باطل | يضع الاتجاه لعنصر stagger الطفل لتحريك في إينا عرض عند التمرير. | (string: "up", "down", "none") |
| data-jos_stagger_startvisible | منطقية و int | باطل | اضبط ما إذا كان عنصر stagger الطفل يجب أن يبدأ من الحالة النهائية عند تحميل الصفحة (تعمل أيضًا مع تأخير). | (boolean: true, false) و (int: 0-10000 ms) |
| data-jos_stagger_once | منطقية | باطل | اضبط ما إذا كان يجب أن يحفز العنصر مرة واحدة فقط أو N. | true ، false ، int |
| Data-jos_stagger_scroll | خيط | باطل | يحدد وظيفة رد الاتصال لطفل stagger لتحريكه في موقع عرض عند التمرير. | function ، your_callbackFunction |
| data-jos_stagger_invoke | خيط | باطل | قم بتعيين الوظيفة المراد التذرع بها عندما يتم تمرير عنصر stagger الطفل إلى العرض. | function ، myCustomFunction |
| data-jos_stagger_invoke_out | خيط | باطل | قم بتعيين الوظيفة المراد التذرع بها عندما يتم تمرير عنصر Stagger الطفل عن الأنظار. | function ، myCustomFunction |
| طريقة | وصف | حدود |
|---|---|---|
| init () | تهيئة/إعادة ضبط JOS | خيارات = {} (راجع jos.init (خيارات)) |
| ينعش() | تحديث جوس | لا أحد |
| قف() | توقف/توقف جوس | 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انتقل إلى القضايا
ربما حتى تجمعها واختبارها قبل مشاركتها مع العالم ؛
( بينغ لي إذا كان لديك عرض توضيحي ؛) )
