Aos.js page scrolling element animation jquery Animation Library

Aos.js page scrolling element animation jquery Animation Library

Plugin Description:aos.js is an awesome page scrolling element animated jquery Animation Library plugin. The animation library provides 28 different elements to animate when the page scrolls, as well as a variety of easing effects. When the page scrolls back, the element reverts to its original state.

Brief tutorials

Aos.js is an awesome page scrolling element animated jquery Animation Library plugin. The animation library provides 28 different elements to animate when the page scrolls, as well as a variety of easing effects. When the page scrolls back, the element reverts to its original state.

aos.js Download Case Demo

Installation

The AOS animation library plugin can be installed via bower.

Bower Install AOS--save

How to use

Introduction of AOS.CSS files in the page, jquery and aos.js files

<link rel= "stylesheet" href= "Dist/aos.css"/> <script src= "js/jquery.min.js" ></script> <script Src= "Dist/aos.js" ></script>

HTML structure

To use the AOS animation library, all you need to do is add the AOS attribute on the element that needs to be animated, for example:

<div aos= "Animation_name" >

The AOS script will trigger the corresponding animation on that element when the page scrolls.

You can also add some of the following properties on the element:

Property	Property	Property	Default value
Aos-offset	Whether to trigger an animation immediately or after a specified time	200	120
Aos-duration	Animation duration	600	400
Aos-easing	Easing animation effects of animations	Ease-in-sine	Ease
Aos-delay	Delay Time of animation	300	0
Aos-anchor	Anchor element. Use its offset to replace the offset of the actual element to trigger the animation	#selector	Null
Aos-anchor-placement	Anchor position, where the element is positioned on the screen when the animation is triggered	Top-center	Top-bottom
Aos-once	Whether the animation fires only once, or if each scroll up or down will trigger	True	False

Note that the Aos-duration animation duration ranges from 50-3000 milliseconds, and if you want to set a larger value, you can add the following CSS code to the page:

body[aos-duration= ' 4000 ' [AOS], [aos][aos][aos-duration= ' 4000 ']{       transition-duration:4000ms;}

The above code modifies the duration of the animation to 4000 milliseconds.

Example code:

<div aos= "fade-zoom-in" aos-offset= "$" aos-easing= "Ease-in-sine" aos-duration= "> <div aos=" Flip-left " Aos-delay= "aos-anchor=". Example-selector "> <div aos=" fade-up "aos-anchor-placement=" Top-center ">

If you are concerned about the HTML5 checksum, you can add a data-prefix to the above attribute.

<div data-aos= "Animation_name" data-aos-offset= "data-aos-easing=" >

Global configuration

If you don't want to animate each element individually, you can use the Init () method to configure the animation of all elements uniformly.

Aos.init ({       offset:200,       duration:600,       easing: ' Ease-in-sine ',       delay:100,});

Additional configuration

The AOS provides 2 additional configuration methods that can only be used at initialization time.

Configuration	Describe	Example values	Default value
Disable	Conditions for AOS to be disabled	Mobile	False
Startevent	AOS initialized event name	Exampleevent	domcontentloaded

To disable AOS:

If you disable AOS in a small-screen device, you can:

Aos.init ({       disable: ' Mobile '});

You can pass in 3 types of devices: mobile, phone, or tablet.

You can also set your own disabling conditions, such as disabling the AOS when the screen is less than 1024 pixels:

Disable:window.innerWidth < 1024

or pass in a function that returns TRUE or false.

Disable:function () {    var maxWidth = 1024x768;    return window.innerwidth < MaxWidth;}

To start an animated event:

If you do not want the scrolling animation to start after the page loads (domcontentloaded), you can use Startevent to set your own events, and the AOS listens on the document for this event:

Aos.init ({  startevent: ' Somecoolevent '});

Api

There are 2 methods available for the AOS object:

• Init
• Refresh

Aos.refresh ();

The above code recalculates the position and offset of the element.

Animation and Anchor position

Animation

Fade Animation:

• Fade-up
• Fade-down
• Fade-left
• Fade-right
• Fade-up-right
• Fade-up-left
• Fade-down-right
• Fade-down-left

Flip Animation:

• Flip-up
• Flip-down
• Flip-left
• Flip-right

Slide Animation:

• Slide-up
• Slide-down
• Slide-left
• Slide-right

To scale an animation:

• Zoom-in
• Zoom-in-up
• Zoom-in-down
• Zoom-in-left
• Zoom-in-right
• Zoom-out
• Zoom-out-up
• Zoom-out-down
• Zoom-out-left
• Zoom-out-right

Anchor position

• Top-bottom
• Top-center
• Top-top
• Center-bottom
• Center-center
• Center-top
• Bottom-bottom
• Bottom-center
• Bottom-top

Easing animation

You can use some of the following easing animation effects:

• Linear
• Ease
• Ease-in
• Ease-out
• Ease-in-out
• Ease-in-back
• Ease-out-back
• Ease-in-out-back
• Ease-in-sine
• Ease-out-sine
• Ease-in-out-sine
• Ease-in-quad
• Ease-out-quad
• Ease-in-out-quad
• Ease-in-cubic
• Ease-out-cubic
• Ease-in-out-cubic
• Ease-in-quart
• Ease-out-quart
• Ease-in-out-quart

Aos.js page scrolling element animation jquery Animation Library