JOS Animation Library
v0.9.2)
Uma biblioteca de animação simples e fácil de usar para desenvolvedores da web
Páginas Git · Demonstração do Playground · Relatório Bug · Recurso de Solicitar
JOS-Animação, JavaScript na Biblioteca de Animação de Roll é um pacote de biblioteca de animação simples e fácil de usar para adicionar instantaneamente animação profissional ao seu site. Foi construído para facilitar minha vida enquanto desenvolve sites e vem com toneladas de recursos e é totalmente personalizável. É leve e tem uma pegada muito pequena. A melhor parte de tudo é que ele não tem (*mínimo) no desempenho.
Atualmente, este projeto está sendo desenvolvido por mim e pela comunidade de desenvolvimento, para que você possa esperar mais recursos e atualizações com bastante frequência.
Foi inspirado no GSAP, a AOS Bibliotecas. Eu queria algo mais fácil de usar, com excelente desempenho e queria melhorar a implementação. Então eu trabalhei neste projeto do zero.
Sinta -se à vontade para relatar um problema ou solicitar um recurso neste repositório :) e para obter mais informações, consulte a página da web do 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
Você tem a opção de usar a versão mais recente do JOS de uma variedade de fontes:
< 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 >(ou)
< script src =" https://cdn.jsdelivr.net/npm/jos-animation/dist/jos.js " > </ script >(ou)
< 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 >(ou)
< 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 > Você pode adicionar uma versão minificada do script substituindo jos.js por jos.min.js na tag de script acima.
jos.js para básico. - jos.min.js para uso da produção. - jos.debug.js para depuração junto com outra função a partir v0.9 Em diante, por padrão jos.js não exige que você adicione a folha de estilo jos.css , ele será exportado junto com o script. Mas você ainda pode adicionar a folha de estilo, se quiser por algum motivo. ### Importando JOS 1. Instale o JOS usando o NPM (YARN ou PNPM): `` `BASH NPM Instale Jos-Animation jos-animation@latest[email protected][email protected] Portanto, seria https://unpkg.com/jos-animation/@latest/dist/jos.js (incorporado) para a versão mais recente. ou jos-animation/@0.8.8/dist/jos.js (instalação do npm) para uma versão específica.
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 changeUsado em: https://jos-animation.vercel.app/
Este exemplo acima para vue.js também é aplicável ao 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 /> ) ;Usado em: https://azzle.netlify.app
Este exemplo acima é para react.js também é aplicável ao 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 changeUsado em: 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
}Você pode verificar este tópico de discussão para obter mais informações: JOS para angular
JOS.init(); Para inicializar a biblioteca com configurações padrão. <!-- Initialize JOS with default settings -->
< script >
JOS . init ( ) ;
</ script >JOS.init(options); Para exceder as configurações padrão com suas configurações personalizadas. <!-- 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" para o elemento que você deseja animar: <!-- JOS class is required to animate the element -->
< div class =" jos " > </ div >data-jos *para personalizar o elemento que você deseja animar, <!-- 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 >Consulte o JOS Props para obter informações completas sobre a animação, atributos e opções.
/* 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 para my-custom-animation : < div class =" jos " data-jos_animation =" my-custom-animation " > </ div >Exemplo: animação personalizada
/* 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 para my-custom-animation-inverse : < div class =" jos " data-jos_animationInverse =" my-custom-animation-inverse " > </ div >Isso é especialmente útil quando você deseja animar um elemento quando ele é rolar para fora de sua margem de root , isso oferece mais personalização para belas animações.
Você também pode usar uma combinação de ambos data-jos_animation ("nenhum", "estático", sem transição, etc) e atributos data-jos_animationInverse para criar uma animação personalizada.
Exemplo: animação inversa personalizada
/* 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 para o atributo my-custom-animation & data-jos_animationInverse para my-custom-animation-play : < div
class =" jos "
data-jos_animation =" my-custom-animation "
data-jos_animationinverse =" static "
> </ div > Aqui, o atributo data-jos_animationinverse está definido como static para impedir que o elemento se anime e o mantenha no estado final. A animação jogável é acionada e começa a reproduzir quando o elemento é rolado em exibição.
Exemplo: animação jogável
/* 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 para my-custom-timing-function : < div class =" jos " data-jos_timing-function =" myCustom-timingFunc " > </ div >Exemplo: função de tempo personalizado
id : <!-- My reference anchor element -->
< div id =" myElement " > </ div >data-jos_anchor a ele, com o ID começando com o sufixo # : <!-- My animated element -->
< div class =" jos " data-jos_anchor =" #myElement " > </ div > Isso desencadeia a animação quando o elemento myElement é rolado para a vista.
Esse recurso é útil, especialmente quando você deseja animar um elemento que está em uma posição fixa .
Exemplo: âncora
data-jos_scrollDirection : <!-- My animated element -->
< div class =" jos " data-jos_scrollDirection =" down " > </ div > Isso desencadeia a animação quando o elemento é rolar para a direção da direção até down .
e você pode fazer o mesmo para subir a up .
Isso é particularmente útil quando você deseja animar um elemento quando ele é rolado para a vista de uma direção específica.
Exemplo: animação baseada em direção
data-jos_startVisible : <!-- My animated element -->
< div class =" jos " data-jos_startVisible =" true " > </ div > Isso define o elemento a ser visível quando a página é carregada. Você pode adicionar um atraso, definindo o valor em ms :
<!-- My animated element that is visible with a given timer/delay in ms-->
< div class =" jos " data-jos_startVisible =" 3000 " > </ div > Isso define o elemento a ser visível quando a página é carregada após 3000 ms ou instantaneamente se o valor for 0 (ou) true .
Esse recurso é útil, especialmente quando você deseja um elemento que esteja em uma posição fixa ou está presente na página de destino para estar inicialmente em um estado visível sem animação.
Exemplo: Comece visível
// Create a custom function
function myCustomFunction ( ) {
// Do something
}data-jos_invoke para myCustomFunction : < div class =" jos " data-jos_invoke =" myCustomFunction " > </ div >Isso desencadeia a função myCustomFunction () quando o elemento é rolado para a exibição.
Você pode usar o atributo data-jos_invoke_out para acionar a função quando o elemento é rolado fora de vista.
Exemplo: função personalizada
data-jos_scroll a ele: < 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 ;
} ;Isso aciona a função your_callbackfunction () quando o elemento é rolado. Dessa forma, você pode lidar com o progresso de rolagem do elemento.
Exemplo: função personalizada
data-jos_stagger a ele junto com a classe 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 > O atributo data-jos_stagger juntamente com a classe jos no elemento pai, é necessário/obrigatório para permitir o impressionante, mesmo se você estiver usando outros atributos.
data-jos_stagger = true faria automaticamente o ID do ASign para o elemento pai e o usaria como uma âncora para elementos filhos.data-jos_stagger = #id usaria o ID fornecido como âncora para elementos filhos.data-jos_stagger_anchor torna o elemento independente do elemento pai. data-jos_stagger_seq é usado para definir o atraso entre cada elemento na sequência (para acionar um após o outro), enquanto o atraso total data-jos_stagger_delay para cada elemento como um todo.
Exemplo: Animação impressionante
| Atributo | Tipo | Padrão | Descrição | Valores |
|---|---|---|---|---|
| Data-jos_animation | corda | desaparecer | Defina o tipo de animação para o elemento. | 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 | corda | estático | Defina o tipo de animação inversa para o elemento. | 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 | booleano | falso | Defina se o elemento deve animar apenas uma vez. | true , false |
| Data-jos_delay | int | 0 | Defina o atraso para a animação começar. | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| dados-jos_duration | flutuador | 0,4 | Defina a duração da reprodução da animação. | (float: 0-1) & (int: 0, 1, 2, 3, 4, 5) |
| Data-jos_timing-Função | corda | facilidade | Defina a função de tempo para a reprodução da animação. | 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 | corda | nulo | Defina a função a ser invocada quando o elemento for rolado na exibição. | function , myCustomFunction |
| Data-jos_invoke_out | corda | nulo | Defina a função a ser invocada quando o elemento estiver rolar fora de vista. | function , myCustomFunction |
| Dados-Once | Booleano & int | falso | Defina se o elemento deve animar apenas | (boolean: true, false) e (int: 0-infinity) |
| Data-jos_rootmargin | corda | 0% -10% 0% -50% | Define a margem para um elemento animar em uma viewport quando rolado. | (string: "right% top% left% bottom%") |
| Data-jos_rootmargin_top | corda | 0% | Define a margem para um elemento animar na parte superior de uma visualização quando rolado. | (string: "top%") |
| Data-jos_rootmargin_bottom | corda | 0% | Define a margem para um elemento animar na parte inferior de uma viewport quando rolar. | (string: "bottom%") |
| Data-jos_scrolldirection | corda | abaixo | Define a direção para um elemento animar na Viewport INA quando rolado. | (string: "up", "down", "none") |
| Data-jos_startvisible | Booleano & int | falso | Defina se o elemento deve começar no estado final quando a página for carregada (também funciona com atraso). | (boolean: true, false) e (int: 0-10000 ms) |
| Data-jos_anchor | corda | nulo | Define o elemento âncora para um elemento animado em uma viewport quando rolado. | (string: "#elementID") |
| Data-jos_scroll | corda | nulo | Define a função de retorno de chamada para um elemento para animar em uma viewport quando rolado. | function , your_callbackFunction |
| Data-jos_stagger | corda | desaparecer | Define a animação escalonada para um elemento de craque para crianças para animar em uma viewport quando rolado. | string , fade |
| Data-jos_staggerinverse | corda | estático | Define a animação inversa escalonada para um elemento de craque para crianças para animar em uma viewport quando rolado (reprodução de animação). | string , fade-play |
| Data-jos_stagger_anchor | corda | nulo | Define o elemento âncora para um elemento de craque para crianças para animar em uma viewport quando rolado. | string , #elementID |
| Data-jos_stagger_seq | flutuador | nulo | Define o atraso da sequência para um elemento de cambalhota de criança para animar em uma viewport quando rolado. | float , 0-1 |
| Data-jos_stagger_delay | flutuador | nulo | Define o atraso para um elemento de craque para crianças para animar em uma viewport quando rolado. | float , 0-1 |
| Data-jos_stagger_duration | flutuador | nulo | Define a duração para um elemento para a criança cambalear animar em uma janela de exibição quando rolada. | float , 0-1 |
| Data-jos_stagger_timing-FUNCTION | corda | nulo | Define a função de tempo para um elemento de craque para crianças para animar em uma viewport quando rolado. | string , ease |
| Data-jos_stagger_mirror | booleano | nulo | Define a animação espelhada para um elemento de cambaleia para crianças para animar em uma viewport quando rolado. | boolean , true , false |
| Data-jos_stagger_rootmargin | corda | nulo | Define a margem para um elemento de craque para crianças para animar em uma viewport quando rolado. | (string: "right% top% left% bottom%") |
| Data-jos_stagger_scrolldirection | corda | nulo | Define a direção de um elemento de cambaleia para crianças para animar na viewport INA quando rolado. | (string: "up", "down", "none") |
| Data-jos_stagger_startvisible | Booleano & int | nulo | Defina se o elemento filho do Stagge deve começar no estado final quando a página for carregada (também funciona com atraso). | (boolean: true, false) e (int: 0-10000 ms) |
| Data-jos_stagger_once | booleano | nulo | Defina se o elemento deve animar apenas uma vez ou n contagem. | true , false , int |
| Data-jos_stagger_scroll | corda | nulo | Define a função de retorno de chamada para uma criança cambalear para animar em uma viewport quando rolada. | function , your_callbackFunction |
| Data-jos_stagger_invoke | corda | nulo | Defina a função a ser invocada quando o elemento de cambalhota infantil for rolado para a exibição. | function , myCustomFunction |
| Data-jos_stagger_invoke_out | corda | nulo | Defina a função a ser invocada quando o elemento de cambalhota infantil estiver rolado fora de vista. | function , myCustomFunction |
| Método | Descrição | Parâmetros |
|---|---|---|
| init () | Inicializar/redefinir jos | opções = {} (consulte Jos.init (opções))) |
| Refresh () | Atualize Jos | nenhum |
| parar() | Pare/pausa Jos | Estado = ( 0 - Pare no estado final, 1 - Pare no estado inicial, -1 - pausa no estado atual) |
| começar() | Iniciar/retomar o serviço JOS | Estado = ( 0 - Start Normal/Completo, -1 - retomar do estado atual) |
| destruir() | Destrua a instância de Jos | Estado = ( 0 - Destrua a instância JOS excluindo a folha de estilo, 1 - Destrua completa junto com a folha de estilo JOS) |
Depois de terminar e terminar de desenvolver uma versão do JOS, você pode agrupá -lo usando o seguinte comando do 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 ./exportMovido para problemas
Talvez até agrupe -o e testá -lo antes de compartilhá -lo com o mundo;
( Me pingue se você tem uma demonstração;) )
