Die letzte stabile Version (v2) finden Sie hier
Um besser zu verstehen, wie das tatsächlich funktioniert, empfehle ich Ihnen, meinen Beitrag zu CSS-Tricks zu lesen.
Fügen Sie Stile in <head> hinzu:
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> Fügen Sie direkt vor dem Schließen </body> -Tags ein Skript hinzu und initialisieren Sie AOS:
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > aos Paket installieren:
yarn add aos@nextnpm install --save aos@nextSkript und Stile importieren und AOS initialisieren:
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;Damit es funktioniert, müssen Sie sicherstellen, dass Ihr Build-Prozess den Styles Loader konfiguriert hat und alles richtig bündelt. Wenn Sie jedoch Parcel verwenden, funktioniert es wie vorgesehen sofort.
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 -Attributs fest: < div data-aos =" fade-in " > </ div > Und passen Sie das Verhalten mithilfe von data-aos-* Attributen an:
< 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 >Sehen Sie sich die vollständige Liste aller Animationen, Lockerungen und Ankerplatzierungen an
Es gibt auch eine Einstellung, die nur auf Elementbasis verwendet werden kann:
data-aos-anchor – Element, dessen Offset anstelle einer tatsächlichen Animation zum Auslösen einer Animation verwendet wird.Beispiele:
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >Auf diese Weise können Sie eine Animation für ein Element auslösen, während Sie zu einem anderen scrollen – nützlich bei der Animation fester Elemente.
Das AOS-Objekt wird als globale Variable bereitgestellt. Derzeit stehen drei Methoden zur Verfügung:
init – AOS initialisierenrefresh – alle Offsets und Positionen von Elementen neu berechnen (wird bei der Fenstergröße aufgerufen)refreshHard – Array mit AOS-Elementen neu initialisieren und refresh auslösen (aufgerufen bei DOM-Änderungen, die sich auf aos -Elemente beziehen)Beispielausführung:
AOS . refresh ( ) ; Standardmäßig überwacht AOS DOM-Änderungen und ruft automatisch refreshHard auf, wenn neue Elemente asynchron geladen werden oder wenn etwas aus dem DOM entfernt wird. In Browsern, die MutationObserver wie IE nicht unterstützen, müssen Sie möglicherweise AOS.refreshHard() selbst aufrufen.
Die refresh wird bei der Größenänderung des Fensters usw. aufgerufen, da kein neuer Store mit AOS-Elementen erstellt werden muss und so leicht wie möglich sein sollte.
AOS löst zwei Ereignisse für das Dokument aus: aos:in und aos:out , wann immer ein Element ein- oder ausgeht, sodass Sie in JS zusätzliche Dinge tun können:
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; Sie können AOS auch anweisen, ein benutzerdefiniertes Ereignis für ein bestimmtes Element auszulösen, indem Sie das Attribut data-aos-id festlegen:
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >Anschließend können Sie auf zwei benutzerdefinierte Ereignisse warten:
aos:in:super-duperaos:out:super-duperManchmal reichen integrierte Animationen einfach nicht aus. Nehmen wir an, Sie benötigen eine Box, um je nach Auflösung unterschiedliche Animationen zu erhalten. So könnten Sie es machen:
[ 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 );
}
}
}Dann verwenden Sie es in HTML:
< div data-aos =" new-animation " > </ div >Das Element animiert die Deckkraft nur auf Mobilgeräten, ab einer Breite von 768 Pixeln gleitet es jedoch auch von rechts nach links.
Ähnlich wie bei Animationen können Sie benutzerdefinierte Beschleunigungen hinzufügen:
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}Der Standardabstand für integrierte Animationen beträgt 100 Pixel. Solange Sie jedoch SCSS verwenden, können Sie es überschreiben:
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; Sie müssen Ihren Build-Prozess jedoch so konfigurieren, dass er vorher Stile aus node_modules importieren kann.
Verwenden Sie animatedClassName , um das Standardverhalten von AOS zu ändern und beim Scrollen Klassennamen anzuwenden, die in data-aos platziert sind.
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; Das obige Element erhält zwei Klassen: animated und fadeInUp . Mit verschiedenen Kombinationen der drei oben genannten Einstellungen sollten Sie in der Lage sein, jede externe CSS-Animationsbibliothek zu integrieren.
Externe Bibliotheken kümmern sich jedoch nicht allzu sehr um den Animationsstatus vor der eigentlichen Animation. Wenn Sie also möchten, dass diese Elemente vor dem Scrollen nicht sichtbar sind, müssen Sie möglicherweise ähnliche Stile hinzufügen:
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delayDauer und Verzögerung akzeptieren Werte von 50 bis 3000, mit einem Schritt von 50 ms. Dies liegt daran, dass diese von CSS verarbeitet werden. Um CSS nicht länger zu machen, als es bereits ist, habe ich nur eine Teilmenge implementiert. Ich glaube, dass diese die meisten Fälle abdecken sollten.
Wenn nicht, können Sie einfaches CSS schreiben, das eine weitere Dauer hinzufügt, zum Beispiel:
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} Dieser Code fügt eine Dauer von 4000 ms hinzu, die Sie für AOS-Elemente festlegen oder als globale Dauer beim Initialisieren des AOS-Skripts festlegen können. Beachten Sie, dass das Doppelte [data-aos][data-aos] kein Fehler, sondern ein Trick ist, um einzelne Einstellungen wichtiger als globale zu machen, ohne dass dort ein hässliches „!important“ geschrieben werden muss :)
Beispielverwendung:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > Fade-Animationen:
Flip-Animationen:
Folienanimationen:
Zoom-Animationen:
Wenn Sie einen Fehler gefunden haben, eine Frage oder eine Idee haben, lesen Sie bitte den AOS-Beitragsleitfaden und zögern Sie nicht, neue Probleme zu erstellen.
