Para a última versão estável (v2) clique aqui
Para entender melhor como isso realmente funciona, encorajo você a conferir minha postagem sobre truques de CSS.
Adicione estilos em <head> :
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> Adicione o script antes de fechar a tag </body> e inicialize o AOS:
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > Instale o pacote aos :
yarn add aos@nextnpm install --save aos@nextImporte script, estilos e inicialize o AOS:
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;Para que funcione, você terá que certificar-se de que seu processo de construção configurou o carregador de estilos e agrupou tudo corretamente. No entanto, se você estiver usando o Parcel, ele funcionará imediatamente conforme fornecido.
AOS . init ( ) ;
// You can also pass an optional settings object
// below listed default settings
AOS . init ( {
// Global settings:
disable : false , // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent : 'DOMContentLoaded' , // name of the event dispatched on the document, that AOS should initialize on
initClassName : 'aos-init' , // class applied after initialization
animatedClassName : 'aos-animate' , // class applied on animation
useClassNames : false , // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver : false , // disables automatic mutations' detections (advanced)
debounceDelay : 50 , // the delay on debounce used while resizing window (advanced)
throttleDelay : 99 , // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset : 120 , // offset (in px) from the original trigger point
delay : 0 , // values from 0 to 3000, with step 50ms
duration : 400 , // values from 0 to 3000, with step 50ms
easing : 'ease' , // default easing for AOS animations
once : false , // whether animation should happen only once - while scrolling down
mirror : false , // whether elements should animate out while scrolling past them
anchorPlacement : 'top-bottom' , // defines which position of the element regarding to window should trigger the animation
} ) ;data-aos : < div data-aos =" fade-in " > </ div > E ajuste o comportamento usando atributos data-aos-* :
< div
data-aos =" fade-up "
data-aos-offset =" 200 "
data-aos-delay =" 50 "
data-aos-duration =" 1000 "
data-aos-easing =" ease-in-out "
data-aos-mirror =" true "
data-aos-once =" false "
data-aos-anchor-placement =" top-center "
>
</ div >Veja a lista completa de todas as animações, atenuações e posicionamentos de âncoras
Há também uma configuração que pode ser usada apenas por elemento:
data-aos-anchor - elemento cujo deslocamento será usado para acionar a animação em vez de uma animação real.Exemplos:
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >Dessa forma, você pode acionar a animação em um elemento enquanto rola para outro - útil na animação de elementos fixos.
O objeto AOS é exposto como uma variável global, por enquanto existem três métodos disponíveis:
init - inicializa o AOSrefresh - recalcular todos os deslocamentos e posições dos elementos (chamado no redimensionamento da janela)refreshHard - reinicia matriz com elementos AOS e aciona refresh (chamada em alterações DOM relacionadas a elementos aos )Exemplo de execução:
AOS . refresh ( ) ; Por padrão, o AOS está observando as alterações do DOM e se houver novos elementos carregados de forma assíncrona ou quando algo for removido do DOM, ele chamará refreshHard automaticamente. Em navegadores que não suportam MutationObserver como o IE, você pode precisar chamar AOS.refreshHard() sozinho.
O método refresh é chamado no redimensionamento da janela e assim por diante, pois não requer a construção de um novo armazenamento com elementos AOS e deve ser o mais leve possível.
AOS despacha dois eventos no documento: aos:in e aos:out sempre que qualquer elemento é animado dentro ou fora, para que você possa fazer coisas extras em JS:
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; Você também pode dizer ao AOS para acionar um evento personalizado em um elemento específico, definindo o atributo data-aos-id :
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >Então você poderá ouvir dois eventos personalizados:
aos:in:super-duperaos:out:super-duperÀs vezes, as animações integradas simplesmente não são suficientes. Digamos que você precise de uma caixa para ter animações diferentes dependendo da resolução. Veja como você pode fazer isso:
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}Então use-o em HTML:
< div data-aos =" new-animation " > </ div >O elemento animará apenas a opacidade em dispositivos móveis, mas a partir de 768px de largura também deslizará da direita para a esquerda.
Semelhante às animações, você pode adicionar atenuações personalizadas:
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}A distância padrão para animações integradas é 100px. Contanto que você esteja usando SCSS, você pode substituí-lo:
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; No entanto, você deve configurar seu processo de construção para permitir a importação de estilos de node_modules antecipadamente.
animatedClassName para alterar o comportamento padrão do AOS, para aplicar nomes de classes colocados dentro de data-aos na rolagem.
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; O elemento acima receberá duas classes: animated e fadeInUp . Usando diferentes combinações das três configurações acima, você poderá integrar qualquer biblioteca externa de animação CSS.
Bibliotecas externas, entretanto, não se importam muito com o estado da animação antes da animação real. Portanto, se quiser que esses elementos não fiquem visíveis antes da rolagem, talvez seja necessário adicionar estilos semelhantes:
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delayDuração e atraso aceitam valores de 50 a 3000, com passo de 50ms, é porque esses são tratados por css, e para não tornar o css mais longo do que já é implementei apenas um subconjunto. Acredito que isso deve cobrir a maioria dos casos.
Caso contrário, você pode escrever CSS simples que adicionará outra duração, por exemplo:
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} Este código adicionará uma duração de 4.000 ms disponível para você definir em elementos AOS ou para definir como duração global ao inicializar o script AOS. Observe que double [data-aos][data-aos] - não é um erro, é um truque, para tornar as configurações individuais mais importantes que as globais, sem a necessidade de escrever "!important" feio ali :)
Exemplo de uso:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > Animações de esmaecimento:
Inverter animações:
Animações de slides:
Animações de zoom:
Se você encontrou um bug, tem uma dúvida ou uma ideia, consulte o guia de contribuição do AOS e não hesite em criar novos problemas.
