JOS Animation Library
v0.9.2)
웹 개발자를위한 간단하고 사용하기 쉬운 애니메이션 라이브러리
git 페이지 · 놀이터 데모 · 보고서 버그 · 요청 기능
스크롤 애니메이션 라이브러리의 JavaScript, Jos-Animation, JavaScript는 단순하고 사용하기 쉬운 애니메이션 라이브러리 패키지로 웹 사이트에 전문 애니메이션을 즉시 추가합니다. 웹 사이트를 개발하는 동안 내 인생을 더 쉽게 만들 수 있도록 만들어졌으며 수많은 기능이 있으며 완벽하게 사용자 정의 할 수 있습니다. 가볍고 발자국이 매우 작습니다. 무엇보다도 가장 좋은 점은 성능에 대한 (*최소)가 없다는 것입니다.
이 프로젝트는 현재 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.debug.js 기본적으로 jos.js 스타일 시트 jos.css 추가 할 필요가 없으며 스크립트와 함께 내보낼 것입니다. 그러나 어떤 이유로 든 원하는 경우 스타일 시트를 추가 할 수 있습니다. ### JOS 가져 오기 1. NPM (원사 또는 PNPM)을 사용하여 JOS 설치 :``Bash NPM JOS-Animation 설치. jos-animation@latest[email protected][email protected] 따라서 최신 버전의 경우 https://unpkg.com/jos-animation/@latest/dist/jos.js (Embed)입니다. 또는 특정 버전의 경우 jos-animation/@0.8.8/dist/jos.js (npm install).
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에 적용됩니다. 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 for 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 소품을 참조하십시오.
/* 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 >이것은 RootMargin에서 스크롤 될 때 요소를 애니메이션하려는 경우 특히 유용합니다. 이것은 아름다운 애니메이션에 더 많은 사용자 정의 가능성을 제공합니다.
또한 data-jos_animation ( "none", "static", to-transition 등) 및 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 에 설정하고 my-custom-animation-play data-jos_animationInverse 대한 속성으로 설정하여 재생 가능한 애니메이션을 사용하십시오. < 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 ;
}my-custom-timing-function 에 data-jos_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
}myCustomFunction 으로 data-jos_invoke 속성을 설정하여 사용자 정의 기능을 사용하십시오. < 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 () 함수를 트리거합니다. 이렇게하면 요소의 스크롤 진행 상황을 처리 할 수 있습니다.
예 : 사용자 정의 기능
jos 클래스와 함께 data-jos_stagger 속성을 애니메이션하고 추가하려는 부모 요소를 작성하십시오. < 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 > 부모 요소의 jos 클래스와 함께 data-jos_stagger 속성은 다른 속성을 사용하더라도 비틀 거리는 것을 활성화해야합니다.
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 fade-left fade-up , 페이드 다운, fade-down , zoom-in-right zoom-in-left zoom-in-up , zoom-in-down , zoom-out-left zoom-out-right , 플리프 업, flip-right flip-left , flip-up flip-down zoom-out-up rotate zoom-out-down , rotate-right , 순간적 spin revolve , revolve-right spin-right stretch . stretch-vertical , my-custom-animation |
| data-jos_animationInverse | 끈 | 공전 | 요소의 반대 애니메이션 유형을 설정하십시오. | 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-left zoom-out-right , 플리프 업, flip-right flip-left , flip-up flip-down zoom-out-up rotate zoom-out-down , rotate-right , 순간적 spin revolve , revolve-right spin-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 | 끈 | 바래다 | 스크롤 될 때 뷰포트에서 어린이 스 태거 요소의 스agger 애니메이션을 설정합니다. | string , fade |
| data-jos_staggerinverse | 끈 | 공전 | 스크롤 될 때 (재생 애니메이션) 뷰포트에서 어린이 스 태거 요소의 스agger 역 애니메이션을 설정합니다. | 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 | 뜨다 | 널 | 스크롤 될 때 뷰포트에서 요소 to Child Shetger Animate의 지속 시간을 설정합니다. | float , 0-1 |
| data-jos_stagger_miming-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 | 부울 | 널 | 요소가 한 번만 애니메이션 해야하는지 여부를 설정하십시오. | 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를 중지/일시 중지하십시오 | state = ( 0 최종 상태에서 정지, 1 초기 상태에서 정지, -1 현재 상태에서 일시 중지) |
| 시작() | 시작/재개 JOS 서비스 | state = ( 0 정상/전체 시작, -1 현재 상태에서 이력서) |
| 파괴하다() | JOS 인스턴스를 파괴하십시오 | state = ( 0 스타일 시트 제외, 1 조스 스타일 시트와 함께 전체 파괴) |
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문제로 이동했습니다
어쩌면 그것을 묶고 세상과 공유하기 전에 테스트 할 수도 있습니다.
( 데모가 있으면 나에게 핑;))) ))
