JOS Animation Library
v0.9.2)
Perpustakaan Animasi Sederhana & Mudah Digunakan untuk Pengembang Web
Halaman git · demo taman bermain · melaporkan bug · meminta fitur
Jos-animation, JavaScript di Gulungan Perpustakaan Animasi adalah paket perpustakaan animasi yang sederhana & mudah digunakan untuk secara instan menambahkan animasi profesional ke situs web Anda. Itu dibangun untuk membuat hidup saya lebih mudah saat mengembangkan situs web & dilengkapi dengan banyak fitur dan sepenuhnya dapat disesuaikan. Ini ringan & memiliki jejak yang sangat kecil. Bagian terbaik dari semuanya adalah tidak memiliki (*minimum) tol pada kinerja.
Proyek ini saat ini sedang dikembangkan oleh saya & komunitas dev, sehingga Anda dapat mengharapkan lebih banyak fitur dan pembaruan cukup sering ..
Terinspirasi oleh GSAP, perpustakaan AOS. Saya ingin sesuatu yang lebih mudah digunakan, dengan kinerja hebat dan ingin membuat implementasi lebih baik. Jadi saya mengerjakan proyek ini dari awal.
Jangan ragu untuk melaporkan masalah atau meminta fitur di repositori ini :) & untuk informasi lebih lanjut, lihat halaman web 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
Anda memiliki opsi untuk menggunakan versi terbaru JOS dari berbagai sumber:
< 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 >(atau)
< script src =" https://cdn.jsdelivr.net/npm/jos-animation/dist/jos.js " > </ script >(atau)
< 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 >(atau)
< 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 > Anda dapat menambahkan versi minified dari skrip dengan mengganti jos.js dengan jos.min.js dalam tag skrip di atas.
jos.js untuk BASIC. - jos.min.js untuk penggunaan produksi. - jos.debug.js untuk debugging bersama dengan beberapa fungsi lain dari v0.9 dan seterusnya, secara default jos.js tidak mengharuskan Anda untuk menambahkan stylesheet jos.css , itu akan diekspor bersama dengan skrip. Tetapi Anda masih dapat menambahkan stylesheet jika Anda mau karena beberapa alasan. ### Mengimpor Jos 1. Instal Jos Menggunakan NPM (Benang atau PNPM): `` `bash NPM Instal Jos-Animation jos-animation@latest[email protected][email protected] Jadi itu akan menjadi https://unpkg.com/jos-animation/@latest/dist/jos.js (embed) untuk versi terbaru. atau jos-animation/@0.8.8/dist/jos.js (instalasi NPM) untuk versi tertentu.
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 changeDigunakan dalam: https://jos-animation.vercel.app/
Contoh di atas untuk vue.js juga berlaku untuk 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 /> ) ;Digunakan dalam: https://azzle.netlify.app
Contoh di atas ini untuk react.js juga berlaku untuk 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 changeDigunakan dalam: 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
}Anda dapat memeriksa utas diskusi ini untuk informasi lebih lanjut: Jos untuk Angular
JOS.init(); Untuk menginisialisasi pustaka dengan pengaturan default. <!-- Initialize JOS with default settings -->
< script >
JOS . init ( ) ;
</ script >JOS.init(options); Untuk melampaui pengaturan default dengan pengaturan khusus Anda. <!-- 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" ke elemen yang ingin Anda animasikan: <!-- JOS class is required to animate the element -->
< div class =" jos " > </ div >data-jos *untuk menyesuaikan elemen yang ingin Anda berifosit <!-- 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 >Lihat Jos Props untuk informasi lengkap mengenai animasi, atribut, dan opsi.
/* 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 ke my-custom-animation : < div class =" jos " data-jos_animation =" my-custom-animation " > </ div >Contoh: Animasi Kustom
/* 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 ke my-custom-animation-inverse : < div class =" jos " data-jos_animationInverse =" my-custom-animation-inverse " > </ div >Ini sangat berguna ketika Anda ingin menghidupkan elemen ketika digulir keluar dari rootmarginnya , ini memberikan lebih banyak kemampuan kustomisasi untuk animasi yang indah.
Anda juga dapat menggunakan kombinasi dari kedua data-jos_animation ("tidak ada", "statis", no-transisi, dll) & atribut data-jos_animationInverse untuk membuat animasi khusus.
Contoh: Animasi terbalik khusus
/* 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 ke atribut my-custom-animation & data-jos_animationInverse ke my-custom-animation-play : < div
class =" jos "
data-jos_animation =" my-custom-animation "
data-jos_animationinverse =" static "
> </ div > Di sini atribut data-jos_animationinverse diatur ke static untuk mencegah elemen menjiwai tidak terlihat & untuk menyimpannya dalam keadaan akhir. Animasi yang dapat dimainkan dipicu dan mulai diputar ketika elemen digulir ke tampilan.
Contoh: animasi yang dapat dimainkan
/* 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 ke my-custom-timing-function : < div class =" jos " data-jos_timing-function =" myCustom-timingFunc " > </ div >Contoh: Fungsi Waktu Kustom
id ke dalamnya: <!-- My reference anchor element -->
< div id =" myElement " > </ div >data-jos_anchor ke dalamnya, dengan ID dimulai dengan akhiran # : <!-- My animated element -->
< div class =" jos " data-jos_anchor =" #myElement " > </ div > Ini memicu animasi ketika elemen myElement digulir ke tampilan.
Fitur ini berguna terutama ketika Anda ingin menghidupkan elemen yang berada dalam posisi tetap .
Contoh: jangkar
data-jos_scrollDirection ke dalamnya: <!-- My animated element -->
< div class =" jos " data-jos_scrollDirection =" down " > </ div > Ini memicu animasi ketika elemen digulir ke tampilan dari arah ke down .
& Anda dapat melakukan hal yang sama untuk arah ke up .
Ini sangat berguna ketika Anda ingin menghidupkan elemen ketika digulir ke tampilan dari arah tertentu.
Contoh: Animasi berbasis arah
data-jos_startVisible ke dalamnya: <!-- My animated element -->
< div class =" jos " data-jos_startVisible =" true " > </ div > Ini mengatur elemen agar terlihat saat halaman dimuat. Anda dapat menambahkan penundaan ke dalamnya dengan mengatur nilai di ms :
<!-- My animated element that is visible with a given timer/delay in ms-->
< div class =" jos " data-jos_startVisible =" 3000 " > </ div > Ini mengatur elemen agar terlihat ketika halaman dimuat setelah 3000 ms atau secara instan jika nilainya 0 (atau) true .
Fitur ini berguna terutama ketika Anda menginginkan elemen yang berada dalam posisi tetap, atau hadir di halaman arahan untuk pada awalnya dalam keadaan yang terlihat tanpa animasi.
Contoh: Mulai terlihat
// Create a custom function
function myCustomFunction ( ) {
// Do something
}data-jos_invoke ke myCustomFunction : < div class =" jos " data-jos_invoke =" myCustomFunction " > </ div >Ini memicu fungsi mycustomfunction () ketika elemen digulir ke tampilan.
Anda dapat menggunakan atribut data-jos_invoke_out untuk memicu fungsi ketika elemen digulir tidak terlihat.
Contoh: Fungsi Kustom
data-jos_scroll ke dalamnya: < 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 ;
} ;Ini memicu fungsi your_callbackfunction () saat elemen digulir. Dengan cara ini Anda dapat menangani kemajuan gulir elemen.
Contoh: Fungsi Kustom
data-jos_stagger ke dalamnya bersama dengan kelas 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 > Atribut data-jos_stagger bersama dengan kelas jos dalam elemen induk diperlukan/Harus memungkinkan mengejutkan bahkan jika Anda menggunakan atribut lain.
data-jos_stagger = true akan auto asign id untuk elemen induk & menggunakannya sebagai jangkar untuk elemen anak.data-jos_stagger = #id akan menggunakan ID yang diberikan sebagai jangkar untuk elemen anak.data-jos_stagger_anchor membuat elemen independen dari elemen induk. data-jos_stagger_seq digunakan untuk mengatur keterlambatan antara setiap elemen dalam urutan (untuk memicu satu demi satu) sedangkan data-jos_stagger_delay penundaan untuk setiap elemen secara keseluruhan.
Contoh: Animasi yang mengejutkan
| Atribut | Jenis | Bawaan | Keterangan | Nilai |
|---|---|---|---|---|
| data-jos_animation | rangkaian | memudar | Atur jenis animasi untuk elemen. | 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 , rotate , rotate-right , spin , spin-right , revolve , revolve-right , stretch , stretch-vertical , my-custom-animation |
| data-jos_animationInverse | rangkaian | statis | Atur tipe animasi terbalik untuk elemen. | 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 , rotate , rotate-right , spin , spin-right , revolve , revolve-right , stretch , stretch-vertical , my-custom-animation |
| data-jos_once | Boolean | PALSU | Tetapkan apakah elemen itu harus dianimasikan hanya sekali. | true , false |
| data-jos_delay | int | 0 | Atur penundaan untuk animasi untuk memulai. | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| data-jos_duration | mengambang | 0.4 | Atur durasi untuk pemutaran animasi. | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| data-jos_timing-function | rangkaian | kemudahan | Atur fungsi waktu untuk pemutaran animasi. | 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 | rangkaian | batal | Atur fungsi yang akan dipanggil saat elemen digulir ke dalam tampilan. | function , myCustomFunction |
| data-jos_invoke_out | rangkaian | batal | Atur fungsi yang akan dipanggil saat elemen digulir dari pandangan. | function , myCustomFunction |
| Data-once | Boolean & Int | PALSU | Tetapkan apakah elemen harus hidup saja | (boolean: true, false) & (int: 0-infinity) |
| data-jos_rootmargin | rangkaian | 0% -10% 0% -50% | Tetapkan margin untuk elemen untuk menghidupkan di viewport saat digulir. | (string: "right% top% left% bottom%") |
| data-jos_rootmargin_top | rangkaian | 0% | Tetapkan margin untuk suatu elemen untuk berai di bagian atas viewport saat digulir. | (string: "top%") |
| data-jos_rootmargin_bottom | rangkaian | 0% | Tetapkan margin untuk suatu elemen untuk menghidupkan di bagian bawah viewport saat digulir. | (string: "bottom%") |
| data-jos_scrolldirection | rangkaian | turun | Tetapkan arah untuk suatu elemen untuk menghidupkan pada viewport ina saat digulir. | (string: "up", "down", "none") |
| data-jos_startvisible | Boolean & Int | PALSU | Tetapkan apakah elemen harus dimulai pada keadaan akhir ketika halaman dimuat (juga berfungsi dengan penundaan). | (boolean: true, false) & (int: 0-10000 ms) |
| data-jos_anchor | rangkaian | batal | Mengatur elemen jangkar untuk elemen untuk menghidupkan di viewport saat digulir. | (string: "#elementID") |
| data-jos_scroll | rangkaian | batal | Mengatur fungsi panggilan balik untuk elemen untuk dianimasikan di viewport saat digulir. | function , your_callbackFunction |
| data-jos_stagger | rangkaian | memudar | Menetapkan animasi Stagger untuk elemen stagger anak untuk menghidupkan di viewport saat digulir. | string , fade |
| data-jos_staggerinverse | rangkaian | statis | Menetapkan animasi terbalik Stagger untuk elemen Child Stagger untuk beranasi dalam viewport saat digulir (mainkan animasi). | string , fade-play |
| data-jos_stagger_anchor | rangkaian | batal | Tetapkan elemen jangkar untuk elemen stagger anak untuk beridupkan di viewport saat digulir. | string , #elementID |
| data-jos_stagger_seq | mengambang | batal | Menetapkan penundaan urutan untuk elemen stagger anak untuk menghidupkan di viewport saat digulir. | float , 0-1 |
| data-jos_stagger_delay | mengambang | batal | Menetapkan keterlambatan untuk elemen stagger anak untuk menghidupkan di viewport saat digulir. | float , 0-1 |
| data-jos_stagger_duration | mengambang | batal | Tetapkan durasi untuk elemen untuk anak -anak terhuyung -huyung hidup di viewport saat digulir. | float , 0-1 |
| data-jos_stagger_timing-function | rangkaian | batal | Menetapkan fungsi waktu untuk elemen stagger anak untuk menghidupkan di viewport saat digulir. | string , ease |
| data-jos_stagger_mirror | Boolean | batal | Mengatur animasi cermin untuk elemen stagger anak untuk berayun di viewport saat digulir. | boolean , true , false |
| data-jos_stagger_rootmargin | rangkaian | batal | Menetapkan margin untuk elemen stagger anak untuk menghidupkan di viewport saat digulir. | (string: "right% top% left% bottom%") |
| data-jos_stagger_scrolldirection | rangkaian | batal | Tetapkan arah untuk elemen stagger anak untuk menghidupkan pada viewport saat digulir. | (string: "up", "down", "none") |
| data-jos_stagger_startvisible | Boolean & Int | batal | Tetapkan apakah elemen Stagger Child harus dimulai pada keadaan akhir ketika halaman dimuat (juga berfungsi dengan penundaan). | (boolean: true, false) & (int: 0-10000 ms) |
| data-jos_stagger_once | Boolean | batal | Tetapkan apakah elemen harus menghidupkan hanya sekali atau n dihitung. | true , false , int |
| data-jos_stagger_scroll | rangkaian | batal | Mengatur fungsi panggilan balik untuk seorang anak terhuyung -huyung untuk menghidupkan di viewport saat digulir. | function , your_callbackFunction |
| data-jos_stagger_invoke | rangkaian | batal | Atur fungsi yang akan dipanggil ketika elemen Child Stagger digulir ke tampilan. | function , myCustomFunction |
| data-jos_stagger_invoke_out | rangkaian | batal | Atur fungsi yang akan dipanggil ketika elemen Child Stagger digulir dari pandangan. | function , myCustomFunction |
| Metode | Keterangan | Parameter |
|---|---|---|
| init () | Inisialisasi/Reset Jos | opsi = {} (rujuk jos.init (opsi)) |
| menyegarkan() | Segarkan Jos | tidak ada |
| berhenti() | Berhenti/Jeda Jos | State = ( 0 - Berhenti di Status Akhir, 1 - Berhenti pada keadaan awal, -1 - Jeda pada keadaan saat ini) |
| awal() | Mulai/Lanjutkan Layanan Jos | status = ( 0 - Awal normal/penuh, -1 - Lanjutkan dari keadaan saat ini) |
| menghancurkan() | Hancurkan Jos Instance | state = ( 0 - Buang contoh Jos tidak termasuk stylesheet, 1 - hancurkan penuh bersama dengan jos -stylesheet) |
Setelah selesai dan selesai mengembangkan versi JOS, Anda dapat menggabungkannya menggunakan perintah berikut dari Root Proyek:
# 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 ./exportPindah ke masalah
Bahkan mungkin bundel dan mengujinya sebelum membaginya dengan dunia;
( Ping saya jika Anda memiliki demo;) )
