Pour la dernière version stable (v2), allez ici
Pour mieux comprendre comment cela fonctionne réellement, je vous encourage à consulter mon article sur les astuces CSS.
Ajoutez des styles dans <head> :
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> Ajoutez un script juste avant de fermer la balise </body> et initialisez AOS :
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > Installez le paquet aos :
yarn add aos@nextnpm install --save aos@nextImportez le script, les styles et initialisez AOS :
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;Pour que cela fonctionne, vous devrez vous assurer que votre processus de construction a configuré le chargeur de styles et qu'il regroupe le tout correctement. Cependant, si vous utilisez Parcel, cela fonctionnera immédiatement comme prévu.
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 > Et ajustez le comportement en utilisant les attributs 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 >Voir la liste complète de toutes les animations, assouplissements et placements d'ancres
Il existe également un paramètre qui ne peut être utilisé que par élément :
data-aos-anchor - élément dont le décalage sera utilisé pour déclencher une animation au lieu d'une animation réelle.Exemples :
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >De cette façon, vous pouvez déclencher une animation sur un élément pendant que vous faites défiler vers un autre – utile pour animer des éléments fixes.
L'objet AOS est exposé en tant que variable globale. Pour l'instant, trois méthodes sont disponibles :
init - initialiser AOSrefresh - recalcule tous les décalages et positions des éléments (appelé lors du redimensionnement de la fenêtre)refreshHard - réinitialise le tableau avec les éléments AOS et déclenche refresh (appelée sur les modifications DOM liées aux éléments aos )Exemple d'exécution :
AOS . refresh ( ) ; Par défaut, AOS surveille les modifications du DOM et s'il y a de nouveaux éléments chargés de manière asynchrone ou lorsque quelque chose est supprimé du DOM, il appelle automatiquement refreshHard . Dans les navigateurs qui ne prennent pas en charge MutationObserver comme IE, vous devrez peut-être appeler AOS.refreshHard() par vous-même.
La méthode refresh est appelée lors du redimensionnement de la fenêtre, etc., car elle ne nécessite pas de créer un nouveau magasin avec des éléments AOS et doit être aussi légère que possible.
AOS distribue deux événements sur le document : aos:in et aos:out chaque fois qu'un élément s'anime en entrée ou en sortie, afin que vous puissiez faire des choses supplémentaires dans JS :
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; Vous pouvez également demander à AOS de déclencher un événement personnalisé sur un élément spécifique, en définissant l'attribut data-aos-id :
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >Vous pourrez alors écouter deux événements personnalisés :
aos:in:super-duperaos:out:super-duperParfois, les animations intégrées ne suffisent pas. Disons que vous avez besoin d'une boîte pour avoir une animation différente en fonction de la résolution. Voici comment procéder :
[ 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 );
}
}
}Utilisez-le ensuite en HTML :
< div data-aos =" new-animation " > </ div >L'élément animera uniquement l'opacité sur les appareils mobiles, mais à partir d'une largeur de 768 pixels, il glissera également de droite à gauche.
Semblable aux animations, vous pouvez ajouter des assouplissements personnalisés :
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}La distance par défaut pour les animations intégrées est de 100 px. Tant que vous utilisez SCSS, vous pouvez le remplacer :
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; Vous devez cependant configurer votre processus de build pour lui permettre d'importer au préalable les styles depuis node_modules .
Utilisez animatedClassName pour modifier le comportement par défaut d'AOS, afin d'appliquer les noms de classe placés dans data-aos lors du défilement.
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; L'élément ci-dessus obtiendra deux classes : animated et fadeInUp . En utilisant différentes combinaisons des trois paramètres ci-dessus, vous devriez pouvoir intégrer n'importe quelle bibliothèque d'animation CSS externe.
Cependant, les bibliothèques externes ne se soucient pas trop de l'état de l'animation avant l'animation réelle. Donc, si vous souhaitez que ces éléments ne soient pas visibles avant le défilement, vous devrez peut-être ajouter des styles similaires :
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delayLa durée et le délai acceptent des valeurs de 50 à 3000, avec un pas de 50 ms, c'est parce que celles-ci sont gérées par CSS, et pour ne pas rendre le CSS plus long qu'il ne l'est déjà, je n'ai implémenté qu'un sous-ensemble. Je pense que ceux-ci devraient couvrir la plupart des cas.
Sinon, vous pouvez écrire du CSS simple qui ajoutera une autre durée, par exemple :
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} Ce code ajoutera une durée de 4 000 ms que vous pourrez définir sur les éléments AOS ou pour définir comme durée globale lors de l'initialisation du script AOS. Notez que double [data-aos][data-aos] - ce n'est pas une erreur, c'est une astuce, pour rendre les paramètres individuels plus importants que globaux, sans avoir besoin d'y écrire un vilain "! Important" :)
Exemple d'utilisation :
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > Animations de fondu :
Retourner les animations :
Animations de diapositives :
Animations zoomées :
Si vous avez trouvé un bug, avez une question ou une idée, veuillez consulter le guide de contribution AOS et n'hésitez pas à créer de nouveaux tickets.
