JOS Animation Library
v0.9.2)
一個簡單易於使用的動畫庫，用於Web開發人員
git頁·操場演示·報告錯誤·請求功能
JOS-Animation，Scroll Animation庫上的JavaScript是一個簡單易用的動畫庫軟件包，可以立即將專業動畫添加到您的網站上。它的構建是為了使我的生活更輕鬆，並帶有大量功能，並且可以完全自定義。它是輕巧的，足跡很小。最好的部分是它沒有（*最低）性能損失。
該項目目前是由ME＆The Dev社區開發的，因此您可以期待更多的功能和更新。
受到AOS庫GSAP的啟發。我想要一些更容易使用的東西，性能出色，並希望使實施更好。因此，我從頭開始從事這個項目。
請隨時報告問題或請求此存儲庫中的功能:)＆有關更多信息，請查看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
您可以選擇從各種來源使用最新版本的JO：
< 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.min.js替換jos.js來添加腳本的縮小版本。
jos.js的基本。 jos.min.js生產使用。 jos.debug.js用於調試以及從v0.9開始的一些其他功能，默認情況下， jos.js不需要您添加stylesheet jos.css ，它將與腳本一起導出。但是，如果您想出於某種原因，您仍然可以添加樣式表。 ###導入JOS1。使用NPM安裝JOS（YARN或PNPM）： 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 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 （“無”，“靜態”，no-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 ＆ 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 （或）時，將其設置為可見的元素。
此功能很有用，尤其是當您想要一個處於固定位置的元素時，或者存在著陸頁中的元素最初處於無動畫狀態時處於可見狀態。
示例：開始可見
// 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 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-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_animation-inverse | 細繩 | 靜止的 | 為元素設置逆動畫類型。 | 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 | 布爾 | 錯誤的 | 設置該元素是否應僅動畫一次。 | 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功能 | 細繩 | 舒適 | 為動畫播放設置定時功能。 | 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視口上為iNA的元素設定方向。 | (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-unction | 細繩 | 無效的 | 為子滾動時，設置兒童錯位元素在視口上進行動畫的定時函數。 | string ， ease |
| data-jos_stagger_mirror | 布爾 | 無效的 | 設置鏡子動畫，以使孩子錯位元素在滾動時在視口上進行動畫。 | boolean ， true ， false |
| data-jos_stagger_rootmargin | 細繩 | 無效的 | 在滾動時，設置了一個孩子錯位元素在視口上進行動畫動畫的空間。 | (string: "right% top% left% bottom%") |
| data-jos_stagger_scrolldirection | 細繩 | 無效的 | 滾動時，設定了子錯元素在iNA視口上進行動畫動畫的方向。 | (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 | options = {} （請參閱jos.init（options）） |
| 重新整理() | 刷新Jos | 沒有任何 |
| 停止（） | 停止/暫停Jos | 狀態=（ 0在最終狀態下停止， 1在初始狀態下停止-1在當前狀態下暫停） |
| 開始（） | 開始/恢復JOS服務 | 狀態=（ 0正常/全啟動， -1從當前狀態恢復） |
| 破壞（） | 銷毀Jos實例 | 狀態=（ 0銷毀jos實例不包括樣式表， 1與jos -stylesheet一起全面銷毀） |
完成並完成了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轉到問題
甚至可以將其捆綁並進行測試，然後再與世界分享；
（如果您有演示，請給我; ）
