JOS Animation Library
v0.9.2)
Eine einfache und einfach zu verwendende Animationsbibliothek für Webentwickler
GIT -Seiten · Playground Demo · Meldefehler · Anforderungsfunktion
Jos-Animation, JavaScript in der Scroll Animationsbibliothek ist ein einfaches und einfach zu verwendenes Animationsbibliothekspaket, um Ihrer Website sofort professionelle Animation hinzuzufügen. Es wurde entwickelt, um mir das Leben zu erleichtern, während ich Websites entwickelte, und ist mit unzähligen Funktionen ausgestattet und ist vollständig anpassbar. Es ist leicht und hat einen sehr kleinen Fußabdruck. Das Beste an allem ist, dass es keine (*minimale) Leistung auf Leistung hat.
Dieses Projekt wird derzeit von mir und der Dev -Community entwickelt, sodass Sie ziemlich oft mehr Funktionen und Updates erwarten können.
Wurde von GSAP, AOS -Bibliotheken inspiriert. Ich wollte etwas einfacher zu bedienen, mit großer Leistung und wollte die Implementierung verbessern. Also habe ich von Grund auf dieses Projekt an diesem Projekt gearbeitet.
Fühlen Sie sich frei, ein Problem zu melden oder eine Funktion in diesem Repository anzufordern :) & Weitere Informationen finden Sie auf der JOS -Webseite.
< 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
Sie haben die Möglichkeit, die neueste Version von JOS aus einer Vielzahl von Quellen zu verwenden:
< 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 >(oder)
< script src =" https://cdn.jsdelivr.net/npm/jos-animation/dist/jos.js " > </ script >(oder)
< 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 >(oder)
< 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 > Sie können eine Minimified -Version des Skripts hinzufügen, indem Sie jos.js durch jos.min.js im obigen Skript -Tag ersetzen.
jos.js für Basic. - jos.min.js für die Produktionsnutzung. - jos.debug.js zum Debuggen mit einer anderen Funktion ab v0.9 , standardmäßig muss jos.js nicht das Stylesheet jos.css hinzufügen, es wird zusammen mit dem Skript exportiert. Sie können das Stylesheet jedoch aus irgendeinem Grund immer noch hinzufügen. ### Importieren von JOS 1. Installieren Sie JOS mit NPM (Garn oder PNPM): `` `bash npm Installieren Sie JOS-Animation jos-animation@latest[email protected][email protected] Es wäre also https://unpkg.com/jos-animation/@latest/dist/jos.js (einbett) für die neueste Version. oder jos-animation/@0.8.8/dist/jos.js (npm install) für eine bestimmte Version.
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 changeVerwendet in: https://jos-animation.vercel.app/
Dieses obige Beispiel für Vue.js gilt auch für 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 /> ) ;Verwendet in: https://azzle.netlify.app
Dieses obige Beispiel gilt auch für React.js. Es gilt auch für 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 changeVerwendet in: 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
}Sie können diesen Diskussionsthread überprüfen, um weitere Informationen zu erhalten: JOS für Angular
JOS.init(); So initialisieren Sie die Bibliothek mit Standardeinstellungen. <!-- Initialize JOS with default settings -->
< script >
JOS . init ( ) ;
</ script >JOS.init(options); Um die Standardeinstellungen mit Ihren benutzerdefinierten Einstellungen zu übergeben. <!-- 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" auf das Element, das Sie animieren möchten: <!-- JOS class is required to animate the element -->
< div class =" jos " > </ div >data-jos *-attribute, um das Element anzupassen, das Sie animieren möchten. <!-- 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 >In JOS -Requisiten finden Sie vollständige Informationen zu den Animationen, Attributen und Optionen.
/* 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 auf my-custom-animation einstellen: < div class =" jos " data-jos_animation =" my-custom-animation " > </ div >Beispiel: benutzerdefinierte Animation
/* 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 auf my-custom-animation-inverse einstellen: < div class =" jos " data-jos_animationInverse =" my-custom-animation-inverse " > </ div >Dies ist besonders nützlich, wenn Sie ein Element animieren möchten, wenn es aus dem Rootmargin gescrollt wird. Dies bietet mehr Anpassbarkeit für schöne Animationen.
Sie können auch eine Kombination aus sowohl data-jos_animation ("none", "static", ohne Übergang usw.) und data-jos_animationInverse -Attribute verwenden, um eine benutzerdefinierte Animation zu erstellen.
Beispiel: benutzerdefinierte inverse Animation
/* 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 auf my-custom-animation & data-jos_animationInverse Attribut zum my-custom-animation-play einstellen: < div
class =" jos "
data-jos_animation =" my-custom-animation "
data-jos_animationinverse =" static "
> </ div > Hier ist das data-jos_animationinverse Attribut auf static eingestellt, um zu verhindern, dass das Element nicht aus der Sicht animiert und es im endgültigen Zustand aufbewahrt. Die spielbare Animation wird ausgelöst und beginnt zu spielen, wenn das Element in Sichtweise gescrollt wird.
Beispiel: spielbare Animation
/* 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 auf my-custom-timing-function einstellen: < div class =" jos " data-jos_timing-function =" myCustom-timingFunc " > </ div >Beispiel: benutzerdefinierte Timing -Funktion
id hinzu: <!-- My reference anchor element -->
< div id =" myElement " > </ div >data-jos_anchor hinzu, wobei die ID mit Suffix # beginnt: <!-- My animated element -->
< div class =" jos " data-jos_anchor =" #myElement " > </ div > Dies löst die Animation aus, wenn das myElement -Element in Sichtweise gescrollt wird.
Diese Funktion ist nützlich, insbesondere wenn Sie ein Element animieren möchten, das sich in einer festen Position befindet.
Beispiel: Anker
data-jos_scrollDirection hinzu: <!-- My animated element -->
< div class =" jos " data-jos_scrollDirection =" down " > </ div > Dies löst die Animation aus, wenn das Element von oben nach down in die Sichtweise gescrollt wird.
& Sie können dasselbe für die up tun.
Dies ist besonders nützlich, wenn Sie ein Element animieren möchten, wenn es aus einer bestimmten Richtung in Sichtweise gescrollt wird.
Beispiel: Richtungsbasierte Animation
data-jos_startVisible Attribut hinzu: <!-- My animated element -->
< div class =" jos " data-jos_startVisible =" true " > </ div > Dies setzt das Element, das sichtbar ist, wenn die Seite geladen wird. Sie können eine Verzögerung hinzufügen, indem Sie den Wert in ms festlegen:
<!-- My animated element that is visible with a given timer/delay in ms-->
< div class =" jos " data-jos_startVisible =" 3000 " > </ div > Dies setzt das Element, das sichtbar ist, wenn die Seite nach 3000 ms geladen wird, oder sofort, wenn der Wert 0 (oder) true ist.
Diese Funktion ist nützlich, insbesondere wenn Sie ein Element in einer festen Position haben möchten oder auf der Zielseite vorhanden ist, um zunächst in einem sichtbaren Zustand ohne Animation zu sein.
Beispiel: Starten Sie sichtbar
// Create a custom function
function myCustomFunction ( ) {
// Do something
}data-jos_invoke auf myCustomFunction einstellen: < div class =" jos " data-jos_invoke =" myCustomFunction " > </ div >Dies löst die Funktion mycustomfunction () aus, wenn das Element in Sichtweise gescrollt wird.
Sie können das Attribut data-jos_invoke_out verwenden, um die Funktion auszulösen, wenn das Element aus der Ansicht gescrollt wird.
Beispiel: Benutzerdefinierte Funktion
data-jos_scroll -Attribut hinzu: < 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 ;
} ;Dies löst die Funktion your_callbackfunction () aus, wenn das Element gescrollt wird. Auf diese Weise können Sie den Bildlauffortschritt des Elements bewältigen.
Beispiel: Benutzerdefinierte Funktion
jos Klasse das data-jos_stagger -Attribut hinzu: < 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 > Das data-jos_stagger -Attribut zusammen mit jos Klasse im übergeordneten Element ist erforderlich/muss das Staffeln ermöglichen, auch wenn Sie andere Attribute verwenden.
data-jos_stagger = true würde eine automatische ASsign-ID für das übergeordnete Element automatisch und als Anker für untergeordnete Elemente verwenden.data-jos_stagger = #id würde die angegebene ID als Anker für untergeordnete Elemente verwenden.data-jos_stagger_anchor verwenden, machen Sie das Element unabhängig vom übergeordneten Element. data-jos_stagger_seq wird verwendet, um die Verzögerung zwischen jedem Element in der Sequenz (um nach anderen auszulösen) festlegen, während data-jos_stagger_delay die Gesamtverzögerung für jedes Element als Ganzes.
Beispiel: Staffelende Animation
| Attribut | Typ | Standard | Beschreibung | Werte |
|---|---|---|---|---|
| Data-jos_animation | Saite | verblassen | Legen Sie den Animationstyp für das Element ein. | 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 | Saite | statisch | Legen Sie den inversen Animationstyp für das Element ein. | 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 | FALSCH | Stellen Sie fest, ob das Element nur einmal animieren sollte. | true , false |
| Data-Jos_Delay | int | 0 | Stellen Sie die Verzögerung für die Animation ein. | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| Data-jos_duration | schweben | 0,4 | Legen Sie die Dauer für die Animationswiedergabe fest. | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| Data-jos_timing-Funktion | Saite | Leichtigkeit | Legen Sie die Timing -Funktion für die Animationswiedergabe fest. | 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 | Saite | NULL | Legen Sie die zu aufgerufene Funktion fest, wenn das Element in die Sichtweise gescrollt wird. | function , myCustomFunction |
| data-jos_invoke_out | Saite | NULL | Legen Sie die zu aufgerufene Funktion fest, wenn das Element aus der Sichtweise gescrollt wird. | function , myCustomFunction |
| data-once | Boolean & int | FALSCH | Stellen Sie fest, ob das Element nur animieren sollte | (boolean: true, false) & (int: 0-infinity) |
| Data-jos_rootmargin | Saite | 0% -10% 0% -50% | Legt den Rand für ein Element fest, das beim Scrollte in einem Ansichtsfenster animiert werden kann. | (string: "right% top% left% bottom%") |
| data-jos_rootmargin_top | Saite | 0% | Legt den Rand fest, dass ein Element beim Scrollten oben auf einem Ansichtsfenster animiert wird. | (string: "top%") |
| data-jos_rootmargin_bottom | Saite | 0% | Legt den Rand fest, dass ein Element beim Scrollen am unteren Rand eines Ansichtsfensters animiert wird. | (string: "bottom%") |
| Data-jos_scrollldirection | Saite | runter | Legt die Richtung für ein Element fest, um beim Scrollte auf dem Ina -Ansichtsfenster zu animieren. | (string: "up", "down", "none") |
| data-jos_startvisible | Boolean & int | FALSCH | Stellen Sie fest, ob das Element beim Laden der Seite am endgültigen Zustand starten soll (funktioniert auch mit Verzögerung). | (boolean: true, false) & (int: 0-10000 ms) |
| Data-jos_anchor | Saite | NULL | Legt das Ankerelement fest, damit ein Element beim Scrollen in einem Ansichtsfenster animiert wird. | (string: "#elementID") |
| Data-Jos_Scroll | Saite | NULL | Legt die Rückruffunktion für ein Element fest, um beim Scrollen in einem Ansichtsfenster zu animieren. | function , your_callbackFunction |
| data-jos_stagger | Saite | verblassen | Legt die Staffelungsanimation für ein Kinderstärkeelement in einem Ansichtsfenster fest, wenn er gescrollt ist. | string , fade |
| data-jos_staggerinverse | Saite | statisch | Legt die stolper inverse Animation für ein Kinderstärkeelement in einem Ansichtsfenster fest, wenn sie gescrollt sind (Animation abspielen). | string , fade-play |
| data-jos_stagger_anchor | Saite | NULL | Legt das Ankerelement für ein Child -Staffelungselement in einem Ansichtsfenster fest, wenn er gescrollt ist. | string , #elementID |
| data-jos_stagger_seq | schweben | NULL | Legt die Sequenzverzögerung für ein Child -Staffelelement fest, um beim Scrollen in einem Ansichtsfenster zu animieren. | float , 0-1 |
| data-jos_stagger_delay | schweben | NULL | Legt die Verzögerung für ein Kinderstärkeelement fest, um beim Scrollen in einem Ansichtsfenster zu animieren. | float , 0-1 |
| data-jos_stagger_duration | schweben | NULL | Legt die Dauer für ein Element fest, um das Kind beim Schriften in einem Ansichtsfenster zu stolpern. | float , 0-1 |
| Data-Jos_Stagger_Timing-Funktion | Saite | NULL | Legt die Timing -Funktion für ein Child -Staffelelement fest, um beim Scrollen in einem Ansichtsfenster zu animieren. | string , ease |
| data-jos_stagger_mirror | boolean | NULL | Legt die Spiegelanimation für ein Kinderstärkeelement in einem Ansichtsfenster fest, wenn er gescrollt ist. | boolean , true , false |
| data-jos_stagger_rootmargin | Saite | NULL | Legt den Rand für ein Kinderstärkeelement in einem Ansichtsfenster fest, wenn ein Kinderbetrag bei Scrollen in einem Ansichtsfenster animiert wird. | (string: "right% top% left% bottom%") |
| data-jos_stagger_scrolldirection | Saite | NULL | Legt die Richtung für ein Kinderstärkeelement auf INA -Ansichtsfenster beim Schriften ein. | (string: "up", "down", "none") |
| data-jos_stagger_startvisible | Boolean & int | NULL | Legen Sie fest, ob das untergeordnete Staffelelement beim Laden der Seite am endgültigen Zustand starten sollte (funktioniert auch mit Verzögerung). | (boolean: true, false) & (int: 0-10000 ms) |
| data-jos_stagger_once | boolean | NULL | Stellen Sie fest, ob das Element nur einmal oder n zählen sollte. | true , false , int |
| data-jos_stagger_scroll | Saite | NULL | Legt die Rückruffunktion für ein Kind in einem Ansichtsfenster ein, wenn ein Kind beim Scrollen in einem Ansichtsfenster animiert wird. | function , your_callbackFunction |
| data-jos_stagger_invoke | Saite | NULL | Legen Sie die zu aufgerufene Funktion ein, wenn das untergeordnete Staggerelement in die Sichtweise gescrollt wird. | function , myCustomFunction |
| data-jos_stagger_invoke_out | Saite | NULL | Stellen Sie die zu aufgerufene Funktion fest, wenn das untergeordnete Staffelungselement aus der Sichtweise gescrollt wird. | function , myCustomFunction |
| Verfahren | Beschreibung | Parameter |
|---|---|---|
| init () | Jos initialisieren/zurücksetzen | Optionen = {} (siehe Jos.init (Optionen)) |
| erfrischt () | Aktualisieren Sie Jos | keiner |
| stoppen() | Stop/Pause Jos | Status = ( 0 - Halten Sie im endgültigen Zustand an, 1 - Stoppen Sie im Anfangszustand, -1 - Pause im aktuellen Zustand) |
| Start() | Starten/Lebenslauf Jos Service | Status = ( 0 - Normal/Vollstart, -1 - Lebenslauf aus dem aktuellen Zustand) |
| zerstören() | Zerstöre JOS -Instanz | State = ( 0 - JOS -Instanz ohne Stylesheet, 1 - voll zerstören zusammen mit Jos -Stylesheet) |
Sobald Sie fertig sind und eine Version von JOS entwickelt haben, können Sie sie mit dem folgenden Befehl von Project Root bündeln:
# 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 ./exportZu Themen umgezogen
Vielleicht bündeln Sie es sogar und testen Sie es, bevor Sie es mit der Welt teilen.
( Ping mich, wenn du eine Demo hast;) )
